Crie Meta Boxes personalizadas usando o WordPress Block Editor (Gutenberg)
A primeira pergunta que você pode ter é “por que eu precisaria criar meta caixas personalizadas com o Block Editor (Gutenberg)?", você ainda pode implementar meta caixas com PHP e adicionar controles ao bloco, post ou até mesmo uma barra lateral personalizada em Gutemberg.
Existem algumas razões pelas quais você pode querer fazer isso, incluindo:
- Alguns blocos têm configurações complexas, e visualizar uma meta box no modo de edição pode facilitar o uso para um cliente
- Porque você pode querer alterar um determinado aspecto de layout da postagem, como o cabeçalho. Você pode ocultar o campo de título da postagem e substituí-lo por uma caixa meta personalizada na parte superior da página e poder controlar toda a meta da postagem relacionada a ela
- Porque você pode usar modelos de bloco para colocar as meta caixas personalizadas onde quiser, para que elas façam mais sentido no contexto
- Porque você pode aplicar esse aprendizado a outros aspectos do desenvolvimento do editor de blocos (Gutenberg)
Neste guia, vamos expandir o que já construímos em nosso guia Post Meta Fields. Você pode usar atributos de bloco, no entanto, devido à natureza das meta-caixas, usaremos meta campos de postagem neste guia.
Pré-requisitos
- Familiarize-se com a criação de plugins para WordPress Gutenberg
- Familiarize-se com blocos dinâmicos e renderização do lado do servidor
- Familiarize-se com o uso de meta campos de postagem no WordPress Gutenberg
Como estamos seguindo o guia Post Meta Fields, já teremos usado register_metapara criar nosso meta campo post, garantindo que configuramos show_in_restcomo true e também configuramos a fonte do atributo JavaScript para metae definimos a meta-chave.
Tudo o que resta é implementar a interface.
Edite o /src/edit.jsarquivo, substituindo a @wordpress/componentsimportação pelo seguinte:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Em seguida, substitua o bloco de código Editar pelo seguinte:
export default function Edit( { attributes, setAttributes }) {
const { blockText } = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
label={ __( 'Example Meta', 'wholesome-plugin') }
help={ __( 'This is an example meta field.', 'wholesome-plugin') }
onChange={ (blockText) => setAttributes( { blockText }) }
value={ blockText }
/>
</PanelBody>
</Panel>
</div>
);
}
Agora temos a Panel, a PanelBodye a TextControl. Observe que adicionei o admin-pluginsparâmetro ao ícone do PanelBodypara mantê-lo consistente com o ícone do plug-in.
Aplicar os estilos
Substitua o SCSS /src/editor.scsspelo seguinte:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Se você estiver usando uma Custom Meta Box criada em Gutenberg, eu recomendaria colocá-la com um template de bloco, porém você pode inseri-la da maneira normal assim:
Usando uma caixa meta personalizada do Gutenberg
Depois de criar sua meta box, não há limite para o que você pode adicionar a ela. Toda a biblioteca de componentes do WordPress Gutenberg React está disponível para você, juntamente com uma vasta biblioteca de componentes externos do React (veja meu artigo sobre como adicionar select2 ao seu projeto ).
O exemplo a seguir é a ponta do iceberg do que você pode alcançar:
Caixa Meta Personalizada com Campos Meta Adicionais
Para construir isso, aqui está o código que você precisa:
Registre seus campos meta de postagem em PHP
Abra o arquivo PHP raiz do plugin (neste caso wholesome-plugin.php) e atualize o register_metaque adicionamos no guia anterior com o seguinte:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_select',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_2',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_3',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_toggle',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Atualizar os atributos JavaScript
Abra /src/index.jse substitua os atributos que adicionamos no guia anterior pelo seguinte:
attributes: {
exampleSelect: {
meta: '_wholesomecode_wholesome_plugin_example_select',
source: 'meta',
},
exampleText: {
meta: '_wholesomecode_wholesome_plugin_example_text',
source: 'meta',
},
exampleText2: {
meta: '_wholesomecode_wholesome_plugin_example_text_2',
source: 'meta',
},
exampleText3: {
meta: '_wholesomecode_wholesome_plugin_example_text_3',
source: 'meta',
},
exampleToggle: {
meta: '_wholesomecode_wholesome_plugin_example_toggle',
source: 'meta',
},
},
Importar os componentes
Edite o /src/edit.jsarquivo, substituindo a @wordpress/componentsimportação pelo seguinte:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Atualize o método de edição
Continue a editar o /src/edit.jsarquivo, substituindo Edito bloco de código pelo seguinte:
export default function Edit( { attributes, setAttributes }) {
const {
exampleSelect,
exampleText,
exampleText2,
exampleText3,
exampleToggle,
} = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select','wholesome-plugin') }
onChange={ (exampleSelect) => setAttributes( { exampleSelect }) }
options={ [
{
label: __( 'Please Select...', 'wholesome-plugin' ),
value: '',
},
{
label: __( 'Option 1', 'wholesome-plugin' ),
value: 'option-1',
},
{
label: __( 'Option 2', 'wholesome-plugin' ),
value: 'option-2',
},
] }
value={ exampleSelect }
/>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => setAttributes( { exampleText }) }
value={ exampleText }
/>
<PanelRow>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => setAttributes( { exampleText2 }) }
value={ exampleText2 }
/>
<TextControl
help={ __( 'This control is inline.', 'wholesome-plugin') }
label={ __( 'Example Text 3', 'wholesome-plugin') }
onChange={ (exampleText3) => setAttributes( { exampleText3 }) }
value={ exampleText3 }
/>
</PanelRow>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => setAttributes( { exampleToggle }) }
/>
</PanelBody>
</Panel>
</div>
);
}
Adicionar algum SCSS
Por fim, abra o /src/editor.scssarquivo e substitua seu conteúdo pelo seguinte:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
.components-base-control {
margin-bottom: 1rem;
select {
height: 2rem;
min-height: 2rem;
}
}
p {
all: unset;
}
}
- Dê uma olhada na criação de blocos filho aninhados com o
InnerBlockscomponente - Dê uma olhada no uso de configurações para armazenar dados na tabela de opções em Gutenberg