O SCSS deve seguir exatamente a mesma estrutura do HTML quando se tratar da hierarquia.

Exemplo

.home-about {
    .container {
        .box-left {
            .image {

            }
        }

        .box-right {
            .content {

                p {

                }

                ul {

                }
            }
        }
    }
}

Evitar duplicação de código.

Utilizar mixins sempre que possível.

• O projeto possui diversos mixins compartilhados, como styled-lists-*, que alimentam outros blocos.
• Utilizar o import abaixo quando necessário.

@use "../../../assets/scss/framework/mixins" as *;

Não utilizar IDs para estilização.

Não rodar:

node esbuild.js

Todo script.js deve permanecer dentro da própria pasta do bloco se houver necessidade..

• Nunca criar arquivos JavaScript compartilhados entre blocos, salvo quando solicitado.

Seguir sempre o padrão de responsividade existente em:

assets/scss/utilities/media

Utilizar sempre:

@include mq.below(md) {

}

Exemplo

.element {
    padding: 40px;

    @include mq.below(md) {
        padding: 20px;
    }
}

use dessa forma pra chamar aonde quer colocar o media;

@use "../../../assets/scss/utilities/media" as mq;

Utilizar ao máximo as variáveis já existentes no projeto.

Arquivo principal:

assets/scss/theme/_variables.scss

Quando for necessário declarar uma cor diretamente, prezar por hexadecimal.

Para cores com opacidade, preferir hexadecimal com alpha ao invés de rgba().

Não fazer

background: rgba(0, 0, 0, 0.3);

Fazer

color: var(--color-primary);
background: var(--color-background);
background: #0000004d;

Ou qualquer variável global existente no projeto.

A tipografia existente deve ser preservada.

• Não alterar sem autorização.

13. Sempre reutilizar o sistema existente em _buttons.scss, que diz respeito aos botões do site.

Criar botão novo somente mediante solicitação explícita.

Antes de alterar qualquer componente, identificar se as classes internas já possuem um arquivo dono.

As classes abaixo pertencem ao sistema e devem ser alteradas apenas em seus respectivos arquivos.

• .btn pertence ao sistema de botões (_buttons.scss).
• .menu-toggle pertence ao Main Navigation.
• .menu-toggle__hamburger pertence ao Main Navigation.
• .menu-toggle__hamburger span e qualquer linha interna do hamburger pertencem ao Main Navigation.

O menu-toggle é um pedaço de código pertencente à pasta Main Navigation.

• Não alterar seu comportamento fora do componente responsável.

Sempre que existir uma área de conteúdo renderizada pelo CMS, aplicar suporte para listas.

Exemplo

.content {

    ul {
        @include styled-lists-dots;
        // @include styled-lists;
    }

}

Regra

styled-lists-dots é o padrão.

Utilizar styled-lists somente quando solicitado.

Aplica-se principalmente para:

• .content
• .editor-content
• .wysiwyg
• .text-content

Ou qualquer bloco que renderize conteúdo vindo do CMS.

Utilizar como padrão a chamada abaixo.

O terceiro parâmetro (2) deve permanecer como padrão.

Alterar apenas quando houver necessidade explícita de controlar a sequência de animação. Em alguns casos esse valor pode ser alterado para mudar a animação de forma sequencial.

<?php echo _mm_get_content('all', '', 2); ?>
<?php echo _mm_get_content('eyebrow', '', 2); ?>
<?php echo _mm_get_content('title', '', 2); ?>
<?php echo _mm_get_content('content', '', 2); ?>
<?php echo _mm_get_content('cta_buttons', '', 2); ?>

Utilizar sempre o padrão de animações do projeto.

Animações

O projeto possui um padrão de animação global em:

assets/scss/framework/_animations.scss
assets/js/utilities/animations.js

Regra obrigatória

Sempre utilizar as classes existentes de animação.

Não criar animações locais dentro de componentes sem solicitação explícita.

Classes disponíveis

Classe base

animate

Obrigatória para o JS observar o elemento e adicionar in-view.

Direções disponíveis

fade-up
fade-down
fade-left
fade-right

Delays disponíveis

delay-1 até delay-15

Cada número equivale a 100ms depois que o elemento recebe in-view.

Exemplo

class="animate fade-up delay-2"

Padrão recomendado

Para conteúdo comum, utilizar:

class="animate fade-up delay-2"

Para conteúdo dinâmico via helper, manter:

<?php echo _mm_get_content('title', '', 2); ?>
<?php echo _mm_get_content('content', '', 2); ?>
<?php echo _mm_get_content('cta_buttons', '', 2); ?>

Alterar o terceiro parâmetro apenas quando houver necessidade explícita de controlar a sequência.

Image reveal

Também existem classes para reveal de imagem:

image-reveal
image-reveal--reverse

Utilizar apenas quando o efeito de cortina de imagem for necessário.

Procedures / Navegação ACF

Quando for apenas renderizar o menu, utilizar:

<?php _mm_render_procedures(); ?>

Regras

Utilizar o helper acima sempre que possível.

Caso seja necessário acessar campos adicionais ou propriedades específicas dos itens:

• Não utilizar o helper.
• Construir a estrutura manualmente.
• Utilizar loop próprio.

Repeater ACF

Sempre que os dados vierem de um Repeater:

have_rows()
the_row()
get_sub_field()

A estrutura deve ser construída manualmente.

Não utilizar helpers automáticos quando for necessário acessar informações específicas do item.

Comentários

Não adicionar comentários novos.

Regra obrigatória

Preservar apenas comentários já existentes no projeto.

Não fazer

// Novo comentário criado pelo Codex

Fazer

Manter apenas comentários que já estavam presentes originalmente.

Alterações Estruturais

As seguintes áreas não devem ser modificadas sem autorização explícita:

• Variáveis globais.
• Sistema de botões.
• Sistema tipográfico.
• Mixins globais.
• Estrutura principal do framework.

Caso uma alteração seja necessária, solicitar aprovação antes de implementar.

Utilizar sempre uma estrutura semântica para montar o HTML.

Preferir nomes como:

• box-left
• box-right
• box-center
• box-top
• box-bottom

Sempre utilizar nomes de acordo com a posição do elemento dentro do bloco.

Exemplo:

Se um bloco possuir box-top e box-bottom, e dentro do box-top existirem duas colunas, utilizar:

• box-left
• box-right

Aplicar esse padrão em toda a estrutura do projeto.

Imagens vindas de campos ACF devem utilizar o helper existente:

<?php echo _mm_get_image( $image['id'] ); ?>

Não montar manualmente a tag <img> com url, alt, width ou height quando o helper puder ser utilizado.

Todas as imagens de um mesmo bloco devem seguir o mesmo padrão de renderização.

Para texturas, grafismos, formas e imagens estritamente decorativas, utilizar preferencialmente o clone Decor Images e o helper existente:

<?php _mm_decor_images(); ?>
<?php _mm_decor_images('block'); ?>

Não criar um campo ACF específico para textura ou imagem decorativa quando o sistema Decor Images atender à necessidade.

No layout do bloco dar preferencia por display grid e suas frações referentes dando preferencia por 1fr e o restante maior que 1fr,sempre, salvo excessão.

Sempre quando pedir um bloco especifico use h2 ou outro h que identifique o tamanho. mais jamais h1. so pode h1 no hero e outros blocos.

No bloco hero o eyebrow e subtitle tem ficar dentro do h1 como span.

A altura dos blocos geralmente não é definido por altura em height e sim por valores de padding ou margin nos elementos dentro de cada div ou outra tag.

eyebrow, h1, p, e eyebron vem da _typography.scss. não ajustar manualmente.

Manter os comentarios padroes do bloco, abaixo tem um exemplo

/*
Block: Home Doctor
*/

// Block Attributes
$block_id = _mm_block_attributes($block, 'id');
$block_classes = _mm_block_attributes($block, 'classes');

// block settings (background, margin, padding, etc.)
_mm_block_settings($block_id, array('background', 'margin', 'padding', 'display'));
// block fields
$image = get_field('image');
?>´´

no block.json sempre passar esse icone:

"icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 12V24H12H24V12V0H12H0V12ZM7.63031 11.3805L10.3517 7.125H12.75V16.7812H10.0798C10.0976 15.5181 10.0766 12.1894 9.99412 12.1914C9.91144 12.1937 9.46406 12.8297 9 13.6048C8.22825 14.8937 8.08687 14.9601 7.60594 14.9601C7.125 14.9601 6.91969 14.6826 6.19969 13.5L5.25 12.1875V16.7812H2.53125C2.5035 14.2566 2.4375 7.125 2.4375 7.125H3.70312H4.96875L7.63031 11.3805ZM21.375 7.125L16.5497 16.7812C13.3125 16.7812 13.3125 16.7812 13.3125 16.7812C13.3125 16.7812 15.1875 13.0312 18.2126 7.125H21.375Z\" fill=\"black\"/><path d=\"M16.5497 16.7812H13.3125C13.3125 16.7812 15.1875 13.0312 18.2126 7.125H21.375L16.5497 16.7812Z\" fill=\"#8438FE\"/><path d=\"M7.63031 11.3805L10.3517 7.125H12.75V16.7812H10.0798C10.0976 15.5181 10.0766 12.1894 9.99412 12.1914C9.91144 12.1937 9.46406 12.8297 9 13.6048C8.22825 14.8937 8.08687 14.9601 7.60594 14.9601C7.125 14.9601 6.91969 14.6826 6.19969 13.5L5.25 12.1875V16.7812H2.53125C2.5035 14.2566 2.4375 7.125 2.4375 7.125H3.70312H4.96875L7.63031 11.3805Z\" fill=\"#8438FE\"/></svg>"

Em qualquer hover que tiver que afastar um texto ou arrow svg so pode ter no maximo deslocamento de 1rem com margin ou translate.

no <a> muitas vezes ta com opacidade abaixo de 1 no hover, dessa forma ao passar o mouse fica claro, devolver o 1, porque muitas vezes o hover sera aplicado cor os deslocamento

Não é pra ser aplicado placeholder nas fields do wp/acf.

quando vir uma imagem ao fundo do bloco não criar um novo background, ele é definido no WP, ja existe.

não pode adicionar overlay nas imagens sem liberação mesmo achando que tem.

vc estava criando umas mascaras degrades na imagem, pq estava identificando um sombreado, ignore isso e não faça.

use o que ja existe, se for necessario avise no chat e deixe em destaque pra que tenha enfase e observação aparecente no proprio chat para identificarmos logo.

Prints são referências visuais e não autorizam criar conteúdo padrão nos arquivos block.json ou nos arquivos de campos ACF (block-*.json). O preenchimento é responsabilidade de quem monta o site. Preserve os valores padrão existentes no Initial commit. Quando solicitado explicitamente, preencha o conteúdo diretamente nos campos do bloco na página do WordPress, sem transformar esses valores em padrões do código.