Uso de post metacampos para almacenar atributos en el editor de bloques de WordPress (Gutenberg)

Cuando registra y almacena atributos en el editor de bloques de WordPress (Gutenberg), tiene la opción de almacenarlos como meta meta, en lugar de los atributos de bloque habituales.

Con este método, puede tener una configuración en su bloque que pueda controlar algo en toda la publicación o en la plantilla.

Una nota importante sobre la representación de metaatributos de publicación

No puede renderizar los meta atributos de la publicación usando un método de guardado de JavaScript. El equipo de Gutenberg tomó una decisión para evitar esto, porque los bloques que representan los campos meta de la publicación pueden romperse fácilmente debido a que la meta meta cambia en otra parte de la publicación.

En esta guía, vamos a ampliar lo que ya hemos creado en nuestra guía de complementos de WordPress Gutenberg, y también en la guía de bloques dinámicos.

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

Registrando el Post Meta en PHP

Antes de que podamos usar un metacampo de publicación en JavaScript, debemos asegurarnos de que lo hayamos registrado en PHP usando register_metay que el show_in_restargumento se haya establecido en verdadero.

Siguiendo con la guía de Dynamic Block, abra el archivo PHP raíz del complemento (en este caso wholesome-plugin.php) y agregue el siguiente código al final de ese archivo después de todas las demás funciones:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_block_text',
        [
            'auth_callback' => '__return_true',
            'default'       => __( 'Wholesome Plugin – hello from the editor!', 'wholesome-plugin' ),
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Este código registra un metacampo llamado _wholesomecode_wholesome_plugin_block_textpara el posttipo de publicación. También garantiza que la API REST pueda acceder a este metacampo con el show_in_restvalor establecido en verdadero.

También estamos pasando la función __return_trueal auth_callbackargumento para asegurarnos de que tenemos los permisos para acceder a este parámetro. Si quisiéramos una mayor seguridad para este parámetro, lo modificaríamos a una función personalizada que verifique un determinado rol de usuario.

Registro de los metaatributos de la publicación en JavaScript

Nuevamente, siguiendo con la guía anterior, abra /src/index.jsy reemplace attributescon lo siguiente:

attributes: {
  blockText: {
    meta: '_wholesomecode_wholesome_plugin_block_text',
    source: 'meta',
  },
},

En lugar de indicar el tipo de atributo y asignar un valor predeterminado, definimos la clave meta de la que provendrá el atributo de datos e indicamos que el sourcedel atributo es meta.

Como se indica en la advertencia en la parte superior de esta guía, no puede acceder a los atributos del metacampo de publicación a través del savemétodo JavaScript, así que compile el complemento npm starty veamos cómo podemos generar el meta.

Representación de la publicación meta

Debido a que hemos guardado nuestro atributo como publicación meta, podemos generar esto en cualquier lugar de WordPress usando get_post_meta(siempre que tengamos $post_id):

get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );

Continuando con la guía de Dynamic Block, veamos cómo podemos acceder a este atributo en el lado del servidor en PHP.

El meta no está disponible a través del $attributesparámetro de render_callback, ya que los meta atributos de la publicación no pasan su valor a través de este parámetro, pero podemos acceder al $postobjeto global para obtener la ID de la publicación.

Con esto en mente, actualicemos nuestro register_block_typepara generar el meta de la publicación:

register_block_type(
  'wholesomecode/wholesome-plugin',
  array(
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      global $post;
      $block_text = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_block_text', true );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',) );

Tenga en cuenta que ya no necesitamos registrar attributesaquí, porque solo estamos accediendo al metacampo de publicación a través de la get_post_metafunción.

Usando el bloque

Este no es el mejor caso de uso de este tipo de meta, sin embargo, cuando usamos el bloque, podemos ver que debido a que estamos almacenando los atributos como meta posterior, si actualizamos el atributo en un bloque, actualiza todos los bloques, como la publicación meta se almacena en la publicación, no en el bloque individual:

Publicar metaatributos en acción

• Eche un vistazo a la creación de bloques secundarios anidados con el InnerBlockscomponente
• Lleve más lejos el uso de post meta en Gutenberg mediante la creación de metaboxes personalizados en Gutenberg
• Eche un vistazo al uso de configuraciones para almacenar datos en la tabla de opciones en Gutenberg