{"id":228436,"date":"2022-10-19T12:10:00","date_gmt":"2022-10-19T09:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228436"},"modified":"2022-11-09T02:26:01","modified_gmt":"2022-11-08T23:26:01","slug":"agregar-controles-a-la-barra-lateral-de-bloques-principales-y-de-terceros-con-filtros-y-componentes-de-orden-superior","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregar-controles-a-la-barra-lateral-de-bloques-principales-y-de-terceros-con-filtros-y-componentes-de-orden-superior\/","title":{"rendered":"Agregar controles a la barra lateral de bloques principales y de terceros con filtros y componentes de orden superior"},"content":{"rendered":"\n<p>En nuestra \u00faltima gu\u00eda, analizamos c\u00f3mo <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregar <code>InspectorControls<\/code>a nuestros bloques personalizados<\/a> para permitirnos usar controles en la barra lateral de bloques. En esta gu\u00eda, 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.<\/p>\n<p>En esta gu\u00eda, vamos a crear la funcionalidad de &#8216;bloque de borrador&#8217; que aparece en mi <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">complemento Wholesome Publishing<\/a>.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Haber seguido la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Crear un complemento para el editor de bloques de WordPress (Gutenberg)<\/a><\/li>\n<li>Ha seguido la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Agregar una barra lateral a su bloque personalizado de WordPress con InspectorControls<\/a><\/li>\n<\/ul>\n<h2>Prepar\u00e1ndose para esta gu\u00eda<\/h2>\n<p>Si ha seguido la <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda Agregar una barra lateral<\/a>, genial. Pero ahora voy a tener que pedirle que deshaga los cambios que hizo en el paso 4 de esa gu\u00eda (la Alternancia de bloque de borrador), porque vamos a extrapolar esa funcionalidad y aplicarla a todos nuestros bloques.<\/p>\n<p>Si no ha seguido esa gu\u00eda, aseg\u00farese de seguirla hasta el paso 4 primero, ya que esta gu\u00eda se deriva directamente de esa.<\/p>\n<h2>Crear componentes de orden superior<\/h2>\n<p>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\u00eda decir en un &#8216;Orden superior&#8217;.<\/p>\n<p>Vamos a crear dos nuevos HoC, as\u00ed que cree una nueva carpeta en su complemento llamada <code>components<\/code>y cree los siguientes dos archivos:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>conInspectorControls<\/h3>\n<p>Abre <code>\/components\/withInspectorControls.js<\/code>y agrega el siguiente c\u00f3digo:<\/p>\n<pre><code>import { InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, ToggleControl } from '@wordpress\/components';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment }    from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default createHigherOrderComponent( (BlockEdit) =&gt; {\n     return (props) =&gt; {\n        const {\n            attributes: {\n                isBlockDraft,\n            },\n            setAttributes,\n        } = props;\n\n        return (&lt;Fragment&gt;\n                &lt;BlockEdit { ...props } \/&gt;\n                &lt;InspectorControls&gt;\n                    &lt;PanelBody\n                        title={ __( 'Block Display Settings', 'wholesome-plugin') }\n                        icon=\"visibility\"\n                        initialOpen={ false }\n                    &gt;\n                        &lt;ToggleControl\n                            label={ __( 'Set Block as Draft', 'wholesome-plugin') }\n                            checked={ isBlockDraft }\n                            onChange={ (isBlockDraft) =&gt; setAttributes( { isBlockDraft }) }\n                            help={ __( 'If the block is set to draft it will not show on the front end.',\n                                'wholesome-plugin') }\n                        \/&gt;\n                    &lt;\/PanelBody&gt;\n                &lt;\/InspectorControls&gt;\n            &lt;\/Fragment&gt;\n        );\n    };\n }, 'withInspectorControls' );\n<\/code><\/pre>\n<p>Es posible que reconozca este c\u00f3digo del paso 4 de la <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gu\u00eda de la barra lateral<\/a>. Es m\u00e1s o menos el mismo c\u00f3digo, aparte de que lo hemos envuelto en <code>createHigherOrderComponent<\/code>.<\/p>\n<p>La <code>createHigherOrderComponent<\/code>que nos permite acceder a <code>BlockEdit<\/code>esta es la funci\u00f3n de edici\u00f3n original del bloque que envolver\u00e1 este componente. Descubriremos c\u00f3mo se transmite esto cuando creemos los filtros en breve.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>Abre <code>\/components\/withIsBlockDraft.js<\/code>y pega el siguiente c\u00f3digo:<\/p>\n<pre><code>import { createHigherOrderComponent } from '@wordpress\/compose';\n\nexport default createHigherOrderComponent( (BlockListBlock) =&gt; {\n     return (props) =&gt; {\n         const { attributes } = props;\n         const { isBlockDraft } = attributes;\n\n         return &lt;BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } \/&gt;;\n     };\n }, 'withIsBlockDraft' );\n<\/code><\/pre>\n<p>Esto <code>createHigherOrderComponent<\/code>nos permite acceder a <code>BlockListBlock<\/code>lo que nos permite pasar atributos al envoltorio del bloque del editor. Lo estamos usando aqu\u00ed para establecer una clase de &#8216;bloque de borrador&#8217; en el envoltorio si se ha configurado la alternancia de Bloque de borrador. Esto recrea lo que hab\u00edamos agregado previamente al m\u00e9todo de edici\u00f3n en el paso 4 de la <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gu\u00eda de la barra lateral<\/a>.<\/p>\n<p>Nuevamente, debemos configurar un filtro para que <code>BlockListBlock<\/code>se pase a este control.<\/p>\n<h2>Configurar los filtros<\/h2>\n<p>En la parte superior del <code>\/src\/index.js<\/code>archivo agregue lo siguiente:<\/p>\n<pre><code>import { addFilter } from '@wordpress\/hooks';\n\nimport withIsBlockDraft from '.\/components\/withIsBlockDraft';\nimport withInspectorControls from '.\/components\/withInspectorControls';\n<\/code><\/pre>\n<p>Realmente deber\u00edamos pensar en alterar la estructura de nuestro complemento para que el c\u00f3digo que registra el bloque se importe desde otro archivo, pero por simplicidad usaremos el mismo archivo.<\/p>\n<h3>Filtrar los atributos<\/h3>\n<p>En el mismo archivo agregue el siguiente c\u00f3digo:<\/p>\n<pre><code>addFilter(\n    'blocks.registerBlockType',\n    'wholesome-plugin\/block-draft-attributes', (settings) =&gt; {\n        const { attributes } = settings;\n        return {\n            ...settings,\n            attributes: {\n                ...attributes,\n                isBlockDraft: {\n                    default: false,\n                    type: 'boolean',\n                },\n            },\n        };\n    }\n);\n<\/code><\/pre>\n<p>Este filtro agrega atributos adicionales a todos los bloques de la compilaci\u00f3n. En teor\u00eda, podr\u00edamos filtrar esto para que solo sea para ciertos bloques, pero no lo haremos para nuestro ejemplo.<\/p>\n<p>Si quisi\u00e9ramos limitar este filtro a ciertos bloques, podr\u00edamos hacerlo as\u00ed:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtrar los InspectorControls<\/h3>\n<p>Agregue el siguiente c\u00f3digo al <code>\/src\/index.js<\/code>archivo:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>Aqu\u00ed filtramos <code>BlockEdit<\/code>para que pase esto a nuestro HoC que creamos anteriormente.<\/p>\n<p>Si quisi\u00e9ramos limitar este filtro a ciertos bloques har\u00edamos lo siguiente <strong>dentro del HoC<\/strong> :<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtrar BlockListBlock<\/h3>\n<p>Finalmente, agreguemos el filtro para nuestro <code>BlockListBlock<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockListBlock',\n    'wholesome-plugin\/block-draft-class',\n    withIsBlockDraft\n);\n<\/code><\/pre>\n<p>Nuevamente, si desea restringir este bloque, puede hacerlo dentro del HoC.<\/p>\n<h2>Agregue PHP y SCSS<\/h2>\n<p>Agregue lo siguiente para <code>\/editor.scss<\/code>que nuestro banner de Borrador se vea bonito (esto se puede hacer mucho mejor, pero esto es solo un ejemplo).<\/p>\n<pre><code>.editor-styles-wrapper {\n    .draft-block {\n\n        border-bottom: 1px dotted #cfcfcf;\n        border-left: 1px solid #cfcfcf;\n        border-right: 1px solid #cfcfcf;\n        margin-top: 3em;\n\n        &amp;::before {\n            background: #cfcfcf;\n            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);\n            background-size: 8.49px 8.49px;\n            border-left: 1px solid #cfcfcf;\n            border-right: 1px solid #cfcfcf;\n            border-top: 1px solid #cfcfcf;\n            color: black;\n            content: 'Draft Block';\n            display: block;\n            font-family: monospace;\n            font-size: 1rem;\n            left: 0;\n            padding-left: 5px;\n            position: absolute;\n            top: -27px;\n            width: 100%;\n        }\n\n        opacity: .4;\n\n        &amp;.is-selected {\n            opacity: .8;\n        }\n    }\n}\n<\/code><\/pre>\n<p>Agregue lo siguiente al archivo ra\u00edz del complemento (en nuestro caso <code>wholesome-plugin.php<\/code>).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {\n\n    if (is_admin()) {\n        return $pre_render;\n    }\n\n    if (isset( $block['attrs']) &amp;&amp;\n        isset( $block['attrs']['isBlockDraft']) &amp;&amp;\n        $block['attrs']['isBlockDraft']) {\n        return false;\n    }\n\n    return $pre_render;\n}\nadd_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );\n<\/code><\/pre>\n<p>Esto detendr\u00e1 la salida de los borradores de bloques en la interfaz.<\/p>\n<h2>Verlo en acci\u00f3n<\/h2>\n<p>Recuerde compilar con <code>npm start<\/code>y ahora podemos establecer cualquier tipo de bloque en un borrador de bloque:<\/p>\n<p>Armado y desarmado de bloques de tiro<\/p>\n<ul>\n<li>Eche un vistazo a la creaci\u00f3n de <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloques secundarios anidados con el <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>Eche un vistazo al <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de metacampos de publicaci\u00f3n en bloques de Gutenberg<\/a><\/li>\n<li>Intente <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregar controles a la barra lateral de la publicaci\u00f3n<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En nuestra \u00faltima gu\u00eda, analizamos c\u00f3mo agregar InspectorControls a nuestros bloques personalizados para permitirnos usar controles en la barra lateral de bloques. En esta gu\u00eda, nos basaremos en eso y agregaremos&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,935,779],"tags":[1172],"class_list":["post-228436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-software-de-codigo-abierto","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228436"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}