Construindo um estilo de bloco de imagem “Polaroid” – WP Tavern

Eu sou uma criança do final dos anos 80 e 90. Antes de todos nós termos câmeras embutidas em nossos telefones celulares—bem, antes dos telefones celulares decolarem, realmente– as famílias carregavam câmeras Polaroid para capturar esses momentos especiais. Mesmo que eu odiasse posar para fotos estranhas com meus irmãos, ainda sou nostálgica sobre a magia do filme de uma época passada.

Agora, eu cresci o suficiente para ver o retorno das impressões físicas, provocadas principalmente pela Fujifilm Instax. Eles são pelo menos populares nos grupos de journaling que eu espreito. Ainda tenho que desembolsar o dinheiro para uma das minicâmeras ou impressoras de smartphones da Fujifilm, mas confesso que estou tentado. Talvez seja uma moda passageira, mas ainda sou levado a reviver essa parte da minha juventude.

Independentemente de eu possuir o equipamento físico, sempre posso recriar fotos no estilo Polaroid na web. O sistema de blocos do WordPress simplifica.

Este post Construindo com Blocos atenderá principalmente aos autores de temas. No entanto, os usuários de bricolage também podem tentar. O tutorial percorrerá as etapas de criação de um quadro de imagem no estilo Polaroid como um estilo de bloco personalizado.

Para este tutorial, usei o Twenty Twenty-Two e o WordPress 6.0 Beta 2. Ele também deve funcionar com o WordPress 5.9. Para outros temas, pode ser necessário ajustar as cores.

Construindo o estilo do bloco

Grande parte da diversão que tive com o sistema de blocos foi criar estilos personalizados. Eles normalmente levam apenas algumas linhas de código para transformar blocos em algo totalmente diferente. O estilo Polaroid é o mesmo.

O primeiro passo é usar o register_block_style() função para registrar um estilo personalizado através do seu tema functions.php:

add_action( 'init', 'tavern_register_block_styles' );

function tavern_register_block_styles() {
    register_block_style( 'core/image', [
        'name'  => 'polaroid',
        'label' => __( 'Polaroid', 'tavern' )
    ] );
}

Uma vez registrado, aparecerá como um estilo selecionável para o bloco Imagem no editor. No entanto, ainda precisa de um design personalizado. Para isso, você só precisa de um pouco de CSS.

Adicione o seguinte à folha de estilo do seu tema ou, de preferência, registre-o via wp_enqueue_block_style():

.wp-block-image[class*=is-style-polaroid] {
    box-sizing: border-box;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 ),
                0 0 4rem rgba( 255, 255, 235, 0.5 ) inset;
}

.wp-block-image[class*=is-style-polaroid] figcaption {
    margin-top: 1rem;
    margin-bottom: 0;
}

É literalmente isso. Estilos de blocos personalizados são vitórias tão fáceis que não entendo por que mais autores de temas não os incluem. Eu tinha mais de 70 anos no meu último projeto temático e estava me segurando—OK, então eu posso ter exagerado um pouco.

Se você quiser mudar a “idade” da foto, você pode escurecer a inset shadow no CSS acima. É um efeito sutil por padrão, mas fique à vontade para mexer nele.

Leitores atentos devem ter notado que eu segmentei [class*=is-style-polaroid] ao invés de .is-style-polaroid. Há uma razão para isso. Ele reduz o código para estilos adicionais construídos no mesmo conceito.

Bônus: Estilos Inclinados

Um quadro no estilo Polaroid é um efeito divertido, mas podemos dar um passo a mais e adicionar variações para inclinar imagens para a esquerda ou para a direita. Adicione o seguinte ao existente tavern_register_block_styles() função criada na seção anterior:

register_block_style( 'core/image', [
    'name'  => 'polaroid-tilt-left',
    'label' => __( 'Polaroid: Tilt Left', 'tavern' )
] );

register_block_style( 'core/image', [
    'name'  => 'polaroid-tilt-right',
    'label' => __( 'Polaroid: Tilt Right', 'tavern' )
] );

Para cada um dos estilos de “inclinação”, você pode usar o transform propriedade CSS junto com o scale() e rotate() funções. Eu escolhi pequenas rotações de 2deg e -2degmas você pode levar isso até onde quiser para obter seu design preferido.

.wp-block-image.is-style-polaroid-tilt-right {
    transform: scale( 0.99, 0.99 ) rotate( 2deg );
}

.wp-block-image.is-style-polaroid-tilt-left {
    transform: scale( 0.99, 0.99 ) rotate( -2deg );
}

Um efeito divertido é remover a transformação de inclinação quando um visitante passa o mouse sobre as imagens. Use o seguinte CSS para isso:

.wp-block-image[class*=is-style-polaroid-tilt] {
    transition: all 0.5s ease-in-out;
}

.wp-block-image[class*=is-style-polaroid-tilt]:hover {
    transform: scale( 1, 1 ) rotate( 0 );
}

Deixe-me saber nos comentários se você deu uma chance a esse estilo de bloco. Se você realmente quer se inclinar para o estilo Polaroid da velha escola, experimente com uma fonte de caligrafia personalizada para a legenda. Além disso, compartilhe quaisquer designs personalizados relacionados a imagens, se você os tiver.