Uso de PHP para renderizar un bloque en el editor de WordPress (Gutenberg)

Al crear un bloque en el Editor de bloques de WordPress (Gutenberg), es probable que haya estado usando JavaScript para convertir el bloque en el contenido de su publicación. En esta guía, veremos el uso de PHP para representar el bloque, creando lo que se conoce como un ‘Bloque dinámico’.

Vamos a mantenerlo simple en esta guía y ampliaremos lo que ya hemos construido en nuestra guía de complementos de WordPress Gutenberg. Sin embargo, los bloques dinámicos son muy útiles para presentar información más compleja en un bloque, como un post loop.

requisitos previos

• Familiarícese con la creación de complementos para WordPress Gutenberg

Crear PHP para el bloque dinámico

Si aún no lo ha hecho, complete los pasos en la guía del complemento de WordPress Gutenberg, para que tenga un área editable de RichText.

Agregue el siguiente PHP en su complemento (en este ejemplo wholesome-plugin.php), reemplazando el bloque de código que comienza con register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Atributos

Lo primero que notará es que hemos redefinido los atributos en este archivo, y son los mismos que definimos en el /src/index.jsarchivo en nuestra guía anterior.

La razón por la que necesitamos hacer esto es para que nuestra salida pueda acceder a los tipos de atributos y su contenido predeterminado.

Renderizar devolución de llamada

En el código anterior también hemos agregado el argumento render_callbacka la register_block_typefunción. Esto maneja la salida del bloque, reemplazando la savefunción en el /src/index.jsarchivo.

La render_callbackfunción toma dos parámetros. Estos son:

• $attributes— esto recibe los atributos que definimos tanto en el attributesargumento de esta función como en el /src/index.jsarchivo
• $content— esto recibe todo lo que se ha guardado a través del savemétodo en el /src/save.jsarchivo. Esto es útil si estamos renderizando InnerBlocks, que de otro modo no se pasaría al método de renderizado de PHP.

En este ejemplo, hemos utilizado una función anónima para render_callback, pero podríamos haber pasado fácilmente una referencia a una función aquí y definirla en otro lugar.

Tenga en cuenta que no tenemos la capacidad de acceder a los accesorios en PHP render_callback, por lo que tuvimos que agregar manualmente la clase HTML a la <p>etiqueta para que nuestros estilos aún funcionen (en teoría, podríamos aprovechar el $contentparámetro y hacer un poco de encontrar y reemplazar trucos si los quisiéramos, pero eso es algo para otra guía).

Eliminar el método de guardado de JavaScript

Como se mencionó anteriormente, el $contentparámetro de la render_callbackfunción almacena la salida del savemétodo JavaScript, pero tenga en cuenta que no lo estamos usando en nuestro código.

En el archivo, /src/index.jsreemplace el savemétodo con lo siguiente:

Esto le dice al método save que no devuelva nada.

Eliminar la saveimportación

Mientras estamos en eso, también elimine la siguiente línea de /src/index.js:

import save from './save';

Ahora también puede eliminar el /src/save.jsarchivo.

Compilando el complemento

Abra la terminal, asegúrese de estar en el directorio raíz de su complemento y ejecute el siguiente comando:

El script se compilará. Si tiene algún error, la terminal debe informarle cuáles son.

Usa el Bloque Dinámico

Ahora debería poder insertar el bloque en una página, editar su contenido y verlo en la parte delantera.

El bloque dinámico en acción

En este ejemplo básico, el bloque tendrá el mismo aspecto y comportamiento que si hubiera utilizado un método de renderizado de JavaScript.

• Eche un vistazo a la creación de bloques secundarios anidados con el InnerBlockscomponente
• Explore el almacenamiento de atributos de Gutenberg como metacampos posteriores