Registre una plantilla de bloque para el editor de bloques de WordPress (Gutenberg)

En mi guía anterior, exploré el poder de los patrones de bloques. Las plantillas de bloques son similares, pero en lugar de depender de su cliente para insertar patrones de bloques en el editor, les brinda un diseño completo tan pronto como insertan una nueva publicación.

requisitos previos

• Instalación de WordPress
• Editor de código

Crea tu plantilla de bloque

En este ejemplo, voy a insertar el mismo patrón de bloque que creé en mi guía anterior, pero como una plantilla de bloque.

En esa guía copiamos el HTML de la salida del editor. En esta guía, haremos algo ligeramente diferente y crearemos una matriz de espacios de nombres, propiedades y contenido de bloques.

En su forma más simple, una plantilla de bloque se parece un poco a esto:

$block_template = [
  [ 'core/heading', [ 'level'   => 2, 'content' => 'Example Block Template' ] ],
  [ 'core/paragraph', [ 'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],
];

Como puede ver, es una matriz que contiene bloques en el siguiente patrón:

• Espacio de nombres de bloque
• Atributos de bloque

Sin embargo, queremos usar bloques anidados, por lo que vamos a pasar un tercer parámetro a esta matriz de bloques, que son los bloques internos.

¿Solo quieres la ubicación del bloque?

Tenga en cuenta que puede dejar los atributos vacíos, solo para proporcionar los bloques sin contenido establecido.

La matriz para crear el mismo bloque que creamos en la guía de patrones de bloques, necesitamos una matriz más compleja, así:

$block_template = [
  [
    'core/group',
    [],
    [
      [
        'core/heading',
        [
          'level'   => 2,
          'content' => 'Example Block Template',
        ]
      ],
      [
        'core/paragraph',
        [
          'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
        ]
      ],
      [
        'core/columns',
        [],
        [
          [
            'core/column',
            [],
            [
              [
                'core/heading',
                [
                  'level'   => 3,
                  'content' => 'Sub Heading 1',
                ]
              ],
              [
                'core/paragraph',
                [
                  'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
                ]
              ],
            ]
          ],
          [
            'core/column',
            [],
            [
              [
                'core/heading',
                [
                  'level'   => 3,
                  'content' => 'Sub Heading 2',
                ]
              ],
              [
                'core/paragraph',
                [
                  'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
                ]
              ],
            ]
          ],
        ],
      ],
    ]
  ]
];

Registre la plantilla de bloque

Registro de una plantilla de bloque para un tipo de publicación existente

Para registrar una plantilla de bloque para un tipo de publicación existente (como el posttipo de publicación), puede usar el siguiente código para anular el objeto de tipo de publicación.

function register_block_template() {

    $post_type_object                = get_post_type_object( 'post' );
    $post_type_object->template      = $block_template;
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );

Este código simplemente establece la plantilla y (opcionalmente) el [template_lock](https://wholesomecode.ltd/#template-lock)tipo.

El código completo se vería así:

function register_block_template() {
    $block_template = [
      [
        'core/group',
        [],
        [
          [
            'core/heading',
            [
              'level'   => 2,
              'content' => 'Example Block Template',
            ]
          ],
          [
            'core/paragraph',
            [
              'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
            ]
          ],
          [
            'core/columns',
            [],
            [
              [
                'core/column',
                [],
                [
                  [
                    'core/heading',
                    [
                      'level'   => 3,
                      'content' => 'Sub Heading 1',
                    ]
                  ],
                  [
                    'core/paragraph',
                    [
                      'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
                    ]
                  ],
                ]
              ],
              [
                'core/column',
                [],
                [
                  [
                    'core/heading',
                    [
                      'level'   => 3,
                      'content' => 'Sub Heading 2',
                    ]
                  ],
                  [
                    'core/paragraph',
                    [
                      'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
                    ]
                  ],
                ]
              ],
            ],
          ],
        ]
      ]
    ];

    $post_type_object                = get_post_type_object( 'post' );
    $post_type_object->template      = $block_template;
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );

Registro de una plantilla de bloque para un nuevo tipo de publicación

Si está registrando un tipo de publicación, puede pasar la plantilla al templateargumento de register_post_type.

También puede pasar el [template_lock](https://wholesomecode.ltd/#template-lock)argumento a register_post_type.

Bloqueo de plantilla

El template_lockargumento puede hacer varias cosas dependiendo del argumento que se le pase. Estos se enumeran en la guía de desarrollo de Gutenberg como:

• all— impide todas las operaciones. No es posible insertar nuevos bloques, mover bloques existentes o eliminar bloques.
• insert— evita insertar o quitar bloques, pero permite mover bloques existentes.

El bloqueo de plantilla no funciona en bloques anidados

El bloqueo de plantilla solo funciona en bloques de nivel superior. Usa esto a tu favor creando un diseño que tenga encabezados fijos, imágenes, párrafos y un área de grupo para que tu cliente inserte el contenido que desee.

También puede crear una plantilla de bloque anidado personalizada con InnerBlocks.

También puede limitar los bloques que puede insertar en ciertos tipos de publicaciones.

Utilice la plantilla de bloque

Para usar la plantilla de bloque, simplemente cree una nueva publicación (o un tipo de publicación personalizada según cómo haya configurado las cosas). Se insertará la plantilla y ahora tendrá áreas de contenido fijas en su página.

Insertar una publicación muestra la plantilla de bloque

Puede limitar los bloques que están disponibles para varios tipos de publicaciones usando el siguiente código.

function filter_allowed_block_types( $allowed_block_types, $post) {

  if ($post->post_type !== 'post') {
    return $allowed_block_types;
  }

  $allowed_block_types = [
    'core/column',
    'core/columns',
    'core/group',
    'core/heading',
    'core/paragraph',
  ];

  return $allowed_block_types;
}
add_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );

El código anterior limita los bloques permitidos en el posttipo de publicación a lo siguiente:

• columna (core/column)

• Columnas (core/columns)

• Grupo (core/group)

• Encabezado (core/heading)

• Párrafo (core/paragraph)

• ¿Necesitas algo más flexible? Intente registrar un patrón de bloque en su lugar

• ¿Necesita algo que se aplique a los bloques para niños? Intente registrar una plantilla de InnerBlocks