Agregar controles a la barra lateral de bloques principales y de terceros con filtros y componentes de orden superior
En nuestra última guía, analizamos cómo agregar InspectorControlsa nuestros bloques personalizados para permitirnos usar controles en la barra lateral de bloques. En esta guía, nos basaremos en eso y agregaremos un control de alternancia a la barra lateral de bloques de todos nuestros bloques, incluidos los bloques principales y de terceros que estemos usando.
En esta guía, vamos a crear la funcionalidad de ‘bloque de borrador’ que aparece en mi complemento Wholesome Publishing.
requisitos previos
- Haber seguido la guía Crear un complemento para el editor de bloques de WordPress (Gutenberg)
- Ha seguido la guía Agregar una barra lateral a su bloque personalizado de WordPress con InspectorControls
Preparándose para esta guía
Si ha seguido la guía Agregar una barra lateral, genial. Pero ahora voy a tener que pedirle que deshaga los cambios que hizo en el paso 4 de esa guía (la Alternancia de bloque de borrador), porque vamos a extrapolar esa funcionalidad y aplicarla a todos nuestros bloques.
Si no ha seguido esa guía, asegúrese de seguirla hasta el paso 4 primero, ya que esta guía se deriva directamente de esa.
Crear componentes de orden superior
Los componentes de orden superior (HoC) se utilizan en React para envolver un componente existente y pasar funcionalidad o accesorios a ese componente. Se denominan HoC porque se insertan en el DOM antes que el componente existente, o se podría decir en un ‘Orden superior’.
Vamos a crear dos nuevos HoC, así que cree una nueva carpeta en su complemento llamada componentsy cree los siguientes dos archivos:
/components/withInspectorControls.js/components/withIsBlockDraft.js
conInspectorControls
Abre /components/withInspectorControls.jsy agrega el siguiente código:
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default createHigherOrderComponent( (BlockEdit) => {
return (props) => {
const {
attributes: {
isBlockDraft,
},
setAttributes,
} = props;
return (<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( 'Block Display Settings', 'wholesome-plugin') }
icon="visibility"
initialOpen={ false }
>
<ToggleControl
label={ __( 'Set Block as Draft', 'wholesome-plugin') }
checked={ isBlockDraft }
onChange={ (isBlockDraft) => setAttributes( { isBlockDraft }) }
help={ __( 'If the block is set to draft it will not show on the front end.',
'wholesome-plugin') }
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControls' );
Es posible que reconozca este código del paso 4 de la Guía de la barra lateral. Es más o menos el mismo código, aparte de que lo hemos envuelto en createHigherOrderComponent.
La createHigherOrderComponentque nos permite acceder a BlockEditesta es la función de edición original del bloque que envolverá este componente. Descubriremos cómo se transmite esto cuando creemos los filtros en breve.
withIsBlockDraft
Abre /components/withIsBlockDraft.jsy pega el siguiente código:
import { createHigherOrderComponent } from '@wordpress/compose';
export default createHigherOrderComponent( (BlockListBlock) => {
return (props) => {
const { attributes } = props;
const { isBlockDraft } = attributes;
return <BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } />;
};
}, 'withIsBlockDraft' );
Esto createHigherOrderComponentnos permite acceder a BlockListBlocklo que nos permite pasar atributos al envoltorio del bloque del editor. Lo estamos usando aquí para establecer una clase de ‘bloque de borrador’ en el envoltorio si se ha configurado la alternancia de Bloque de borrador. Esto recrea lo que habíamos agregado previamente al método de edición en el paso 4 de la Guía de la barra lateral.
Nuevamente, debemos configurar un filtro para que BlockListBlockse pase a este control.
Configurar los filtros
En la parte superior del /src/index.jsarchivo agregue lo siguiente:
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Realmente deberíamos pensar en alterar la estructura de nuestro complemento para que el código que registra el bloque se importe desde otro archivo, pero por simplicidad usaremos el mismo archivo.
Filtrar los atributos
En el mismo archivo agregue el siguiente código:
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
Este filtro agrega atributos adicionales a todos los bloques de la compilación. En teoría, podríamos filtrar esto para que solo sea para ciertos bloques, pero no lo haremos para nuestro ejemplo.
Si quisiéramos limitar este filtro a ciertos bloques, podríamos hacerlo así:
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Filtrar los InspectorControls
Agregue el siguiente código al /src/index.jsarchivo:
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Aquí filtramos BlockEditpara que pase esto a nuestro HoC que creamos anteriormente.
Si quisiéramos limitar este filtro a ciertos bloques haríamos lo siguiente dentro del HoC :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Filtrar BlockListBlock
Finalmente, agreguemos el filtro para nuestro BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Nuevamente, si desea restringir este bloque, puede hacerlo dentro del HoC.
Agregue PHP y SCSS
Agregue lo siguiente para /editor.scssque nuestro banner de Borrador se vea bonito (esto se puede hacer mucho mejor, pero esto es solo un ejemplo).
.editor-styles-wrapper {
.draft-block {
border-bottom: 1px dotted #cfcfcf;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
margin-top: 3em;
&::before {
background: #cfcfcf;
background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);
background-size: 8.49px 8.49px;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
border-top: 1px solid #cfcfcf;
color: black;
content: 'Draft Block';
display: block;
font-family: monospace;
font-size: 1rem;
left: 0;
padding-left: 5px;
position: absolute;
top: -27px;
width: 100%;
}
opacity: .4;
&.is-selected {
opacity: .8;
}
}
}
Agregue lo siguiente al archivo raíz del complemento (en nuestro caso wholesome-plugin.php).
function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {
if (is_admin()) {
return $pre_render;
}
if (isset( $block['attrs']) &&
isset( $block['attrs']['isBlockDraft']) &&
$block['attrs']['isBlockDraft']) {
return false;
}
return $pre_render;
}
add_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );
Esto detendrá la salida de los borradores de bloques en la interfaz.
Verlo en acción
Recuerde compilar con npm starty ahora podemos establecer cualquier tipo de bloque en un borrador de bloque:
Armado y desarmado de bloques de tiro
- Eche un vistazo a la creación de bloques secundarios anidados con el
InnerBlockscomponente - Eche un vistazo al uso de metacampos de publicación en bloques de Gutenberg
- Intente agregar controles a la barra lateral de la publicación