Cor, Alinhamento e Estilo Dinâmico com Gutenberg + React

Bora! Chegamos ao Dia 10 da Trilha WordPress Extremo — e agora é hora de levar nossos blocos a um novo nível de interação visual.

Hoje vamos trabalhar com alinhamento, controle de cores, e atributos que afetam o estilo de forma dinâmica, direto no editor Gutenberg.

Seus blocos já funcionam. Já têm campos. Já têm estilo.

Mas agora vamos deixá-los com cara de plugin premium: personalizáveis, intuitivos e responsivos.

✅ O que você vai aprender hoje:

• Usar ColorPalette e AlignmentToolbar
• Salvar valores de cor e alinhamento como atributos
• Aplicar estilos inline com base nos atributos
• Deixar o bloco mais visual e interativo

🧩 Atributos que vamos adicionar

Atualize o block.json:

"attributes": {
  "mensagem": {
    "type": "string",
    "default": "Olá do WP24Horas!"
  },
  "destaque": {
    "type": "boolean",
    "default": false
  },
  "corTexto": {
    "type": "string",
    "default": "#333333"
  },
  "alinhamento": {
    "type": "string",
    "default": "left"
  }
}

🎛️ Editando o bloco (edit.js)

Atualize o editor com novos controles:

import { __ } from '@wordpress/i18n';
import {
  useBlockProps,
  InspectorControls,
  BlockControls,
  AlignmentToolbar
} from '@wordpress/block-editor';
import {
  PanelBody,
  TextControl,
  ToggleControl,
  ColorPalette
} from '@wordpress/components';

const CORES = [
  { name: 'Azul', color: '#007cba' },
  { name: 'Verde', color: '#46b450' },
  { name: 'Cinza', color: '#555d66' },
  { name: 'Preto', color: '#000000' }
];

export default function Edit({ attributes, setAttributes }) {
  const { mensagem, destaque, corTexto, alinhamento } = attributes;

  const classes = [
    'wp-block-wp24h-hello',
    destaque ? 'is-highlighted' : ''
  ].join(' ').trim();

  const styles = {
    color: corTexto,
    textAlign: alinhamento
  };

  return (
    <>
      <BlockControls>
        <AlignmentToolbar
          value={alinhamento}
          onChange={(align) => setAttributes({ alinhamento: align })}
        />
      </BlockControls>

      <InspectorControls>
        <PanelBody title="Configurações">
          <TextControl
            label="Mensagem"
            value={mensagem}
            onChange={(value) => setAttributes({ mensagem: value })}
          />
          <ToggleControl
            label="Destaque"
            checked={destaque}
            onChange={(value) => setAttributes({ destaque: value })}
          />
          <p><strong>Cor do texto:</strong></p>
          <ColorPalette
            colors={CORES}
            value={corTexto}
            onChange={(value) => setAttributes({ corTexto: value })}
          />
        </PanelBody>
      </InspectorControls>

      <div { ...useBlockProps({ className: classes, style: styles }) }>
        <p>{ mensagem }</p>
      </div>
    </>
  );
}

💾 Salvando o conteúdo (save.js)

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
  const { mensagem, destaque, corTexto, alinhamento } = attributes;

  const classes = [
    'wp-block-wp24h-hello',
    destaque ? 'is-highlighted' : ''
  ].join(' ').trim();

  const styles = {
    color: corTexto,
    textAlign: alinhamento
  };

  return (
    <div {...useBlockProps.save({ className: classes, style: styles })}>
      <p>{ mensagem }</p>
    </div>
  );
}

✅ Resultado:

• O usuário pode:
  • Escrever uma mensagem
  • Escolher cor do texto
  • Alinhar à esquerda, centro ou direita
  • Destacar o bloco

Tudo isso com UI intuitiva e estilos aplicados ao vivo.

🔨 Compile:

npm run build

✅ Conclusão do Dia 10

Hoje você:

✔️ Aprendeu a usar AlignmentToolbar e ColorPalette
✔️ Adicionou atributos visuais ao bloco
✔️ Aplicou estilos inline com React
✔️ Transformou seu bloco em algo digno de produção real

💬 Curtiu o conteúdo?

Esse é o tipo de desenvolvimento que você vê em plugins pagos — e você tá construindo com liberdade total.

👉 Comenta abaixo o que você achou disso!