Cree cajas meta personalizadas con el editor de bloques de WordPress (Gutenberg)
La primera pregunta que podría tener es "¿por qué necesitaría crear metacuadros personalizados con el Editor de bloques (Gutenberg)?", Aún puede implementar metacuadros con PHP y agregar controles al bloque, publicación o incluso una barra lateral personalizada. en Gutenberg.
Hay algunas razones por las que es posible que desee hacer esto, que incluyen:
- Algunos bloques tienen configuraciones complejas, y ver un cuadro meta cuando está en modo de edición puede hacer que sea más fácil de usar para un cliente
- Porque es posible que desee cambiar un cierto aspecto del diseño de la publicación, como el encabezado. Puede ocultar el campo del título de la publicación y reemplazarlo con un cuadro de metadatos personalizado en la parte superior de la página, y poder controlar todos los metadatos de la publicación que se relacionan con él.
- Porque puede usar plantillas de bloques para colocar los metacuadros personalizados donde desee, para que tengan más sentido en contexto
- Porque puede aplicar este aprendizaje a otros aspectos del desarrollo del editor de bloques (Gutenberg)
En esta guía vamos a ampliar lo que ya hemos construido en nuestra guía Post Meta Fields. Puede usar atributos de bloque; sin embargo, debido a la naturaleza de los metaboxes, usaremos post metacampos en esta guía.
requisitos previos
- Familiarícese con la creación de complementos para WordPress Gutenberg
- Sea familiar con los bloques dinámicos y la representación del lado del servidor
- Familiarícese con el uso de metacampos de publicación en WordPress Gutenberg
Debido a que estamos siguiendo la guía Post Meta Fields, ya lo habremos utilizado register_metapara crear nuestro meta campo de publicación, asegurándonos de haberlo establecido show_in_resten verdadero y también habremos establecido la fuente de nuestro atributo de JavaScript metay definido la meta clave.
Todo lo que queda es implementar la interfaz.
Edite el /src/edit.jsarchivo, reemplazando la @wordpress/componentsimportación con lo siguiente:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Luego reemplace el bloque de código de edición con lo siguiente:
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>
);
}
Ahora tenemos a Panel, a PanelBodyy a TextControl. Tenga en cuenta que he agregado admin-pluginsal parámetro del ícono PanelBodypara mantenerlo consistente con el ícono del complemento.
Aplicar los estilos
Reemplace el SCSS /src/editor.scsscon lo siguiente:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Si está utilizando un Meta Box personalizado creado en Gutenberg, recomendaría colocarlo con una plantilla de bloque, sin embargo, puede insertarlo de la manera normal de la siguiente manera:
Uso de un metabox personalizado de Gutenberg
Una vez que haya creado su metabox, no hay límite para lo que puede agregar en él. La biblioteca completa de componentes de WordPress Gutenberg React está disponible para usted, junto con una amplia biblioteca de componentes React externos (vea mi artículo sobre cómo agregar select2 a su proyecto ).
El siguiente ejemplo es la punta del iceberg de lo que puedes lograr:
Metabox personalizado con metacampos adicionales
Para construir esto, aquí está el código que necesita:
Registre sus metacampos de publicación en PHP
Abra el archivo PHP raíz del complemento (en este caso wholesome-plugin.php) y actualice el register_metaque agregamos en la guía anterior con lo siguiente:
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' );
Actualizar los atributos de JavaScript
Abra /src/index.jsy reemplace los atributos que agregamos en la guía anterior con lo siguiente:
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 los componentes
Edite el /src/edit.jsarchivo, reemplazando la @wordpress/componentsimportación con lo siguiente:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Actualizar el método de edición
Continúe editando el /src/edit.jsarchivo, reemplazando Editel bloque de código con lo siguiente:
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>
);
}
Agregar algunos SCSS
Finalmente abra el /src/editor.scssarchivo y reemplace su contenido con lo siguiente:
.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;
}
}
- Eche un vistazo a la creación de bloques secundarios anidados con el
InnerBlockscomponente - Eche un vistazo al uso de configuraciones para almacenar datos en la tabla de opciones en Gutenberg