Los patrones de WordPress

Los patrones de WordPress son una forma sencilla de crear diseños personalizados para tus páginas y entradas. Pueden utilizarse para crear cabeceras, pies de página, páginas de inicio, páginas de contacto y mucho más.

En este artículo, vamos a explorar algunos de los patrones mejorados que se introdujeron en WordPress 6.4, la última versión del popular sistema de gestión de contenidos. Los patrones son fragmentos de diseño predefinidos que se pueden insertar fácilmente en cualquier página o entrada usando el editor de bloques. Los patrones nos ayudan a crear diseños complejos y atractivos sin necesidad de tener conocimientos de código.

En WordPress 6.2, se introdujeron dos características relacionadas con los patrones: los bloques reutilizables y los patrones de bloques. Los bloques reutilizables son bloques que se pueden guardar y usar en varias páginas o entradas, mientras que los patrones de bloques son colecciones de bloques que forman un diseño coherente. Ambas características nos permiten crear y gestionar nuestros propios patrones personalizados.

Acceder a los patrones de WordPress desde el Editor del sitio

Sí, se puede acceder a los patrones desde el Editor del sitio, que no es lo mismo que Editar página.

• Para acceder a los patrones desde el Editor del sitio, sigue estos pasos:
• Ve al escritorio de tu sitio de WordPress.
• Haz clic en «Apariencia» en el menú de la izquierda.
• Haz clic en «Editor».

Se abrirá el Editor del sitio. En la parte superior del Editor del sitio, verás una barra de herramientas con varias opciones. Haz clic en el botón «Patrones».

Esto abrirá una lista de todos los patrones disponibles. Puedes buscar patrones por palabra clave o categoría.

Para insertar un patrón en una página o entrada, haz clic en el botón «Copiar» y luego pega el patrón en la ubicación deseada.

Los patrones se pueden personalizar para que se adapten a tus necesidades. Para ello, abre el patrón en el Editor del sitio y haz clic en el botón «Editar». A continuación, puedes cambiar el texto, las imágenes, los colores y otras opciones del patrón.

Aquí hay algunas diferencias clave entre el Editor del sitio y Editar página:

• El Editor del sitio te permite editar todo el tema de tu sitio web, incluyendo las páginas, las entradas, los menús, los widgets y el diseño general.
• Editar página te permite editar una página o entrada específica.

El Editor del sitio es una herramienta más potente que Editar página, pero también es más compleja. Si eres nuevo en WordPress, es posible que quieras empezar con Editar página y luego pasar al Editor del sitio cuando te sientas más cómodo con WordPress.

El directorio /patterns de WordPress

En WordPress 6.3, se ha mejorado el soporte para los patrones de bloques, añadiendo la posibilidad de registrar patrones de bloques personalizados a través del directorio /patterns. Este directorio se encuentra dentro del tema activo y nos permite almacenar archivos PHP que definen los patrones de bloques que queremos registrar. De esta forma, podemos crear nuestros propios patrones de bloques sin necesidad de usar un plugin o un código adicional.

Además, WordPress 6.3 también nos permite usar los patrones como plantillas iniciales para nuestras páginas o entradas. Esto significa que podemos elegir un patrón de bloque que nos guste y usarlo como punto de partida para nuestro contenido, modificando o añadiendo los bloques que queramos. Así, podemos ahorrar tiempo y esfuerzo a la hora de crear diseños originales y profesionales.

Para crear una plantilla en el directorio /patterns

Para crear una plantilla en el directorio /patterns de WordPress, debes seguir estos pasos:

El código de tu plantilla debe incluir los siguientes elementos:

• Un bloque template-part para definir el diseño de tu plantilla.
• Un bloque wp-block-content para mostrar el contenido de la página o entrada.

El bloque template-part debe incluir el código que define el diseño de tu plantilla. Puedes utilizar cualquier bloque de contenido que desees para crear el diseño de tu plantilla.

El bloque wp-block-content debe incluir el código que muestra el contenido de la página o entrada. Puedes utilizar cualquier bloque de contenido que desees para mostrar el contenido de tu plantilla.

Por ejemplo, el siguiente código crea una plantilla simple que muestra un título y un párrafo:

PHP

<?php

/**
 * Template Name: Mi plantilla personalizada
 */

// Define el diseño de la plantilla
$template_part = new WP_Block_Template_Part('mi-plantilla');

// Muestra el contenido de la página o entrada
echo new WP_Block_Content(array(
    'content' => '
        <h1>Título</h1>
        <p>Este es el contenido de la plantilla.</p>
    '
));

?>

Una vez que hayas creado la plantilla, puedes subirla a tu sitio web. Para ello, puedes utilizar un cliente FTP o el administrador de archivos de tu sitio web.

Una vez que hayas subido la plantilla a tu sitio web, puedes usarla para crear páginas o entradas personalizadas. Para ello, debes seleccionar la plantilla en el menú desplegable «Plantilla» cuando edites una página o entrada.

Para obtener más información sobre cómo crear plantillas en el directorio /patterns de WordPress, consulta la documentación de WordPress.

1. Ve al sitio web de WordPress.org.
2. Haz clic en el enlace «Documentación» en la barra de navegación.
3. En la página de documentación, haz clic en el enlace «Plantillas».

La documentación de WordPress contiene información sobre cómo crear plantillas en el directorio /patterns de WordPress. La documentación incluye los siguientes temas:

• Requisitos previos
• Cómo crear una plantilla
• Cómo subir una plantilla
• Cómo usar una plantilla

Usar los patrones como plantillas iniciales

Para usar los patrones de bloques personalizados como plantillas iniciales, puedes seguir estos pasos:

1. Abre el editor de bloques de WordPress.
2. Haz clic en la pestaña «Patrones».
3. Busca el patrón que quieres utilizar como plantilla inicial.
4. Haz clic en el botón «Copiar».
5. Crea una nueva entrada o página.
6. Haz clic en el botón «Añadir bloque».
7. En el menú desplegable, selecciona «Patrón».
8. Pega el patrón que copiaste en el paso 4.

El patrón se pegará en la nueva entrada o página. Puedes personalizar el patrón para que se adapte a tus necesidades.

Aquí hay un ejemplo de cómo usar un patrón de bloques personalizado como plantilla inicial:

Imaginemos que quieres crear una entrada de blog con un diseño de encabezado y pie de página personalizados. Puedes encontrar un patrón de encabezado y pie de página en el directorio /patterns. Una vez que hayas encontrado el patrón que te gusta, puedes copiarlo en una nueva entrada de blog.

El patrón se pegará en la entrada de blog. Puedes personalizar el patrón para que incluya el título de la entrada, el contenido de la entrada y cualquier otra información que quieras.

Aquí hay algunas cosas que puedes personalizar en un patrón de bloques personalizado:

• Texto: Puedes cambiar el texto del patrón.
• Imágenes: Puedes añadir o eliminar imágenes del patrón.
• Colores: Puedes cambiar los colores del patrón.
• Otros ajustes: Puedes cambiar otros ajustes del patrón, como el tamaño de la fuente o el espaciado.

Al personalizar un patrón de bloques personalizado, puedes crear un diseño personalizado para tu sitio web sin tener que empezar desde cero.

Para usar los patrones como plantillas iniciales, solo tenemos que hacer clic en el botón «Añadir nuevo» en el menú «Páginas» o «Entradas» y seleccionar la opción «Elegir un patrón». Esto nos mostrará una pantalla con todos los patrones disponibles, tanto los que vienen por defecto con WordPress como los que hemos registrado nosotros mismos. Podemos filtrar los patrones por categorías o buscarlos por palabras clave. Una vez que encontremos el patrón que queremos usar, solo tenemos que hacer clic en él y se insertará automáticamente en el editor de bloques.

Otra forma de acceder a los patrones es desde el propio editor de bloques, haciendo clic en el icono «+» en la esquina superior izquierda y seleccionando la pestaña «Patrones». Esto nos mostrará una lista similar a la anterior, pero con la ventaja de que podemos ver una vista previa de cómo quedaría el patrón en nuestra página o entrada. También podemos arrastrar y soltar los patrones desde la lista hasta el lugar donde queramos insertarlos.

Gestionar patrones en WordPress

Para gestionar patrones en WordPress, puedes acceder a la página de administración de patrones de dos maneras:

1. Añadiendo /wp-admin/edit.php?post_type=wp_block a la URL de tu sitio web.

Por ejemplo, si tu sitio web tiene la URL https://www.ejemplo.com/, puedes acceder a la página de administración de patrones añadiendo el siguiente parámetro a la URL:

https://www.ejemplo.com/wp-admin/edit.php?post_type=wp_block

2. Haciendo clic en el botón «Gestionar Mis patrones» en el insertador de bloques.

Para ello, abre una página o entrada en el editor de bloques. En la esquina superior izquierda del editor, haz clic en el botón «Insertar bloques» (+). A continuación, haz clic en el botón «Gestionar Mis patrones».

Una vez que hayas accedido a la página de administración de patrones, podrás realizar las siguientes acciones:

• Crear nuevos patrones. Para ello, haz clic en el botón «Crear nuevo patrón».
• Editar patrones existentes. Para ello, haz clic en el título del patrón que deseas editar.
• Eliminar patrones. Para ello, haz clic en el icono de la papelera junto al título del patrón que deseas eliminar.

También puedes acceder a la página de administración de patrones desde el directorio de patrones de WordPress.org. Para ello, ve al sitio web de WordPress.org y haz clic en el enlace «Patrones» en la barra de navegación. A continuación, haz clic en el botón «Crear nuevo patrón» para crear un nuevo patrón o en el título de un patrón existente para editarlo.

Crear plantillas de páginas personalizadas

Para crear plantillas de páginas personalizadas con  Edición completa del sitio (FSE), primero debes instalar un tema de bloques. Los temas de bloques son temas de WordPress que están diseñados para funcionar con la edición completa del sitio. Puedes encontrar temas de bloques en el directorio de temas de WordPress.org o en la biblioteca de temas de WordPress.com.

Una vez que hayas instalado un tema de bloques, puedes comenzar a crear plantillas de páginas. Para ello, sigue estos pasos:

1. Ve a la página de Apariencia en el panel de administración de WordPress.
2. Haz clic en el enlace Plantillas de páginas.
3. Haz clic en el botón Nueva plantilla.

4. En la ventana emergente, introduce un nombre para tu plantilla y haz clic en el botón Crear.

5. El editor de plantillas se abrirá en una nueva ventana. Puedes utilizar el editor de bloques para crear el diseño de tu plantilla.

Una vez que hayas creado el diseño de tu plantilla, puedes guardarlo haciendo clic en el botón Guardar en la esquina superior derecha del editor.

Para usar tu plantilla personalizada, debes asignarla a una página o publicación. Para ello, ve a la página o publicación que deseas personalizar y haz clic en la pestaña Plantilla. En el menú desplegable Plantilla, selecciona tu plantilla personalizada.

Una vez que hayas asignado tu plantilla personalizada a una página o publicación, se utilizará ese diseño para esa página o publicación.

Aquí hay algunos consejos para crear plantillas de páginas personalizadas con FSE:

• Utiliza bloques de contenido para crear el diseño de tu plantilla. Los bloques de contenido te permiten crear diseños flexibles y adaptables.
• Utiliza los controles de los bloques para personalizar el diseño de tu plantilla. Los controles de los bloques te permiten cambiar el tamaño, el color y otros aspectos del diseño de tus bloques.
• Utiliza los estilos de bloque para aplicar estilos globales a tus bloques. Los estilos de bloque te permiten aplicar estilos a todos los bloques de un tipo específico.
• Utiliza los estilos personalizados para aplicar estilos específicos a tus bloques. Los estilos personalizados te permiten aplicar estilos a bloques individuales o a grupos de bloques.

Los patrones de WordPress son una forma estupenda de crear diseños personalizados para tus páginas y entradas. Puedes utilizar patrones para crear diseños de cabecera, pies de página, páginas de inicio, páginas de contacto, etc.

• El directorio de patrones de WordPress: El directorio de patrones de WordPress es un repositorio de patrones creados por desarrolladores de WordPress y diseñadores web de todo el mundo. Puedes encontrar patrones para una amplia gama de temas, desde encabezados y pies de página hasta secciones de contenido y formularios.

Para acceder al directorio de patrones de WordPress, abre el editor de bloques de WordPress y haz clic en la pestaña «Patrones». A continuación, puedes buscar patrones por palabra clave o categoría.

Los temas de bloques de wordpress son el futuro

Sí, los temas de bloques de WordPress son el futuro. Ofrecen una serie de ventajas que los hacen superiores a los temas clásicos:

• Mayor flexibilidad y personalización: Los temas de bloques permiten a los usuarios personalizar cada aspecto de su sitio web, desde el encabezado hasta el pie de página. Esto es posible gracias a los bloques, que son unidades de contenido reutilizables que se pueden combinar para crear cualquier diseño imaginable.
• Facilidad de uso: Los temas de bloques son más fáciles de usar que los temas clásicos. Esto se debe a que el Editor de bloques, que es el editor de contenido predeterminado de WordPress, está diseñado específicamente para trabajar con bloques.
• Mejor rendimiento: Los temas de bloques suelen tener un mejor rendimiento que los temas clásicos. Esto se debe a que los temas de bloques utilizan menos código y se cargan más rápido.

Como resultado de estas ventajas, los temas de bloques están ganando popularidad rápidamente. En 2023, ya representan más de la mitad de todos los temas de WordPress disponibles.

En concreto, los temas de bloques ofrecen las siguientes ventajas para los creadores de sitios web:

• Para principiantes: Los temas de bloques son una excelente opción para los principiantes que quieren crear un sitio web sin tener que aprender a codificar. El Editor de bloques es muy intuitivo y fácil de usar, incluso para personas que no tienen experiencia en diseño web.
• Para profesionales: Los temas de bloques también son una herramienta valiosa para los profesionales del diseño web. Ofrecen un alto grado de flexibilidad y personalización, lo que permite crear sitios web únicos y personalizados.

En general, los temas de bloques son una opción superior a los temas clásicos para cualquier tipo de creador de sitios web. Son más flexibles, fáciles de usar y ofrecen un mejor rendimiento.

Los patrones son una herramienta muy útil y potente para crear diseños impresionantes con WordPress. Con WordPress 6.3, se ha mejorado aún más el soporte para los patrones, facilitando su creación y uso. Si quieres aprender más sobre los patrones, te recomendamos que visites el directorio de patrones oficial de WordPress, donde podrás encontrar cientos de ejemplos inspiradores y descargarlos gratis.

Enlaces para expertos

Cómo extender los bloques centrales de WordPress

Esta es una lista de recursos de la sesión «Cómo extender los bloques centrales de WordPress» de Developer Hours celebrada el 29 de noviembre de 2023.

Estilos de bloque register_block_style – https://developer.wordpress.org/reference/functions/register_block_style/

Tema Twenty Twenty-Four – https://wordpress.org/themes/twentytwentyfour/

Hojas de estilo por bloque wp_enqueue_block_style – https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/

Uso de múltiples hojas de estilo por bloque –  https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/

Creación de estilos de bloques personalizados en temas de WordPress –  https://developer.wordpress.org/news/2023/02/creating-custom-block-styles-in-wordpress-themes/

Aprovechar theme.json y los estilos por bloque para temas más eficientes –  https://developer.wordpress.org/news/2022/12/leveraging-theme-json-and-per-block-styles-for-more-performant-themes/

Variaciones de bloque wp.blocks.registerBlockVariation()  – https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/

Una introducción a las variaciones de bloque – https://developer.wordpress.org/news/2023/08/an-introduction-to-block-variations/

Pasillo Hangout sobre variaciones – https://www.youtube.com/watch?v=nYmPLCNiqzw&list=PL1pJFUVKQ7ESY-3rCwwYSAdNsEj2W7cJi&index=2

Plugin de bucle de consultas avanzadas de Ryan Welcher – https://github.com/ryanwelcher/advanced-query-loop

Complementos de extensión de bloque Serie «Más allá de los estilos de bloque» de Justin Tadlock https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/  https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-2-building-a-custom-style-for-the-separator-block/  https://developer.wordpress.org/news/2023/08/beyond-block-styles-part-3-building-custom-design-tools/

Plugin de imagen receptiva de Aki Hermano – https://github.com/t-hamano/enable-responsive-image 

Plugin Habilitar iconos de botones de Nick Diego – https://github.com/ndiego/enable-button-icons 

Plugin Habilitar dirección de columna de Nick Diego – https://github.com/ndiego/enable-column-direction 

Plugin Visibilidad de bloque de Nick Diego – https://wordpress.org/plugins/block-visibility/

Conceptos básicos wp-scripts Comenzando con wp-scripts https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/

Inyectar activos en el editor enqueue_block_editor_assets y enqueue_block_assets (6.3) – https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/ 

Modificar un bloque en el editor https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/

blocks.registerBlockType – Se utiliza para filtrar las configuraciones de bloque al registrar el bloque https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype

editor.BlockEdit: se utiliza para modificar el componente de edición del bloque. https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor-blockedit

editor.BlockListBlock: se utiliza para modificar el componente contenedor del bloque que contiene el componente de edición del bloque y todas las barras de herramientas. https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor-blocklistblock