Cómo crear un bloque de Gutenberg con campos personalizados avanzados (ACF)

Si eres un desarrollador nuevo o estás creando tu propio sitio web debido a limitaciones de presupuesto, es posible que esto te parezca que está fuera de tus posibilidades. Sin embargo, gracias a la gente deCampos personalizados avanzados (ACF), no tiene por qué ser así.

Desde la versión 5.8, se ha hecho posible crear y personalizar tus propios bloques para el editor Gutenberg. En este post te mostraremos cómo funciona. Hablaremos de por qué es genial crear bloques a través de ACF, quién puede aprovechar esta función y, por último, cómo hacerlo paso a paso.

Vamos a entrar en materia.

¿Por qué crear bloques Gutenberg con ACF?

Si lees la publicación sobre cómo crear bloques Gutenberg personalizados manualmente (con la ayuda decrear bloque guten), habrás notado que es bastante técnico. Para poder utilizar la herramienta, necesitas usar webpack, React, ESLint, Babel y mucho más.

Además, debes codificar manualmente tus bloques. Si bien haydocumentación detalladaPara ayudarte a hacerlo, está fuera del alcance de los no desarrolladores (de nuevo, lo he intentado).

Entonces, ¿cómo hacen los campos personalizados avanzados para que todo este proceso sea más sencillo?

Bueno, en primer lugar, te permiten registrar bloques a través de PHP, en lugar de JavaScript. Para los usuarios de WordPress, que han trabajado con PHP durante los últimos 15 años, eso es una buena noticia.

Además, a través de ACF, también puedes crear las partes de tu bloque a través de una interfaz de usuario familiar. Además, en lugar de un entorno de desarrollo sofisticado, solo necesitas tu instalación de WordPress, el complemento y uneditor de código.

¿Para quién es ideal?

Nos gustaría pensar que cualquiera que use WordPress estaría interesado en una publicación de este tipo, pero si tuviéramos que limitarlo a una audiencia específica, sería:

1. Desarrolladores que no son expertos en JavaScript— El camino para convertirse en un desarrollador experto en JavaScript es largo. Sin duda, es un lenguaje poderoso y útil que conviene conocer, y no estamos desalentando en absoluto a los nuevos desarrolladores a aprenderlo, solo estamos destacando que puede llevar tiempo.
2. Propietarios de empresas emergentes o pequeñas que no pueden permitirse los servicios de un desarrollador: tener una empresa emergente o una pequeña empresa a menudo significa falta de tiempo, dinero, recursos y personal. También es probable que deba desempeñar diferentes funciones para realizar una variedad de tareas. Una de esas funciones puede ser diseñar su sitio. Esta publicación lo ayudará a aprender a crear bloques de Gutenberg sin ser desarrollador.
3. Abanicos de campos personalizados avanzados— El complemento ACF permite a los usuarios añadir campos de contenido adicionales a su editor de WordPress desde hace años. Tiene muchas aplicaciones útiles y, si eres fanático, aquí tienes otra cosa que puedes agregar a la lista.
4. Cualquiera que quiera jugar con los bloques de Gutenberg sin codificación avanzada—Ya sea que pertenezcas a alguno de los grupos anteriores o a ninguno, aún puedes divertirte y crear bloques de Gutenberg con ACF para aprender el proceso y aumentar tu destreza en WordPress.

Ahora que hemos destacado las ventajas de crear bloques a través de ACF y quién se beneficiará con ello, veamos cómo hacerlo.

Cómo crear bloques en Gutenberg con campos personalizados avanzados

Para este tutorial, quiero crear un bloque para mostrar los elementos de mi portafolio. Esto incluye una imagen del logotipo del cliente ubicado a la izquierda, un encabezado H3 para el nombre del cliente y un campo de texto para la descripción del cliente y el trabajo realizado.

A continuación, aprenderá cómo crear el resultado final anterior con campos personalizados avanzados.

1. Instalar el complemento

Para poder utilizar esta funcionalidad, necesitas la versión Pro de ACF 5.8 o superior. Puedes adquirirla ensitio web principal.

ÉlCuesta 25 AUD por un solo sitio y 100 AUD por una licencia de desarrollador válida para una cantidad ilimitada de sitios web. Los precios son justos, considerando que se trata de un pago único sin cargos recurrentes y que tiene derecho a actualizaciones ilimitadas.

Una vez que lo hayas comprado, ve a tu cuenta y haz clic en el enlace de descarga.

Una vez en su disco duro, inicie sesión en su sitio y vaya aComplementos Agregar nuevo Cargar complemento.

GolpearNavegar…, busque el archivo en su computadora y haga clicInstalar ahoraUna vez hecho esto, no olvides activarlo.

2.Registra tu bloque

Después de la instalación, es momento de registrar el bloque. Esto sucede dentro delfunciones.phparchivo de su tema con la ayuda de la acf_register_block_type()función.

Funciona de manera similar al registro de untipo de publicación personalizadaEn WordPress, utilice su cliente FTP preferido para acceder al archivo de funciones en su servidor y, a continuación, agregue el siguiente código:

function acf_portfolio_item_block() {// check function existsif( function_exists('acf_register_block') ) {// register a portfolio item blockacf_register_block(array('name'= 'portfolio-item','title'= __('Portfolio Item'),'description'= __('A custom block for portfolio items.'),'render_template'= 'template-parts/blocks/portfolio-item/block-portfolio-item.php','category'= 'layout','icon'= 'excerpt-view','keywords'= array( 'portfolio' ),));}}add_action('acf/init', 'acf_portfolio_item_block');

Aquí hay una explicación de lo que todo esto significa:

• nombre— Este es el nombre del bloque que crearás. Se utilizará para que todo funcione y solo puede contener caracteres alfanuméricos y guiones.
• título—Este es el título del bloque tal como aparecerá en el editor de Gutenberg.
• descripción— Una descripción de lo que hace tu bloque. Esto aparece en la barra lateral del editor.
• plantilla de renderizado— Hace referencia al archivo que se utiliza para renderizar el bloque. Verás cómo funciona más adelante.
• categoría— Significa la categoría de bloque bajo la que aparecerá tu bloque. Las opciones incluyencomún,formato,disposición,widgets,incrusta.
• icono— El icono asociado a tu bloque. Puedes elegir entre losIconos de Dash(Publica el nombre sin el símbolo dashicons-al frente). Opcionalmente, utiliza un archivo SVG personalizado.
• Palabras clave— Lo que los usuarios pueden escribir para encontrar tu bloque. Puedes utilizar hasta tres términos aquí.

Ahora que comprende lo que significa cada parte, puede copiar y pegar el código anterior y cambiarlo por el tipo de bloque que decida crear.La documentaciónPara más información.

Por cierto, para poder activar y desactivar el bloque y transferirlo a otro sitio, alternativamente, puede ingresar todo lo anterior en uncomplemento personalizado.

2. Crea tus campos

Después de incluir el código anterior enfunciones.phpYa podrás ver tu bloque en el editor de Gutenberg.

Sin embargo, actualmente no contiene nada. Es hora de cambiar eso.

Para ello, acceda aCampos personalizados Agregar nuevodentro del back end de WordPress para crear un nuevo grupo de campos. Si no está seguro de qué son los campos, lea nuestroTutorial para principiantes de ACF.

Aquí está mi configuración:

Si ya ha creado grupos de campos antes, se dará cuenta de que este proceso es similar al uso normal de ACF. Sin embargo, hay una diferencia clave: deberá dirigirse a suReglas de ubicaciónsección y luego especificar que elBloqueares igual aElemento de cartera(o cualquier otro nombre que le hayas dado a tu bloque personalizado). Puedes verlo en la captura de pantalla anterior.

Una vez que hayas terminado, desplázate hacia arriba y presiona elPublicarbotón.

3. Renderiza tu bloque

Si bien ya definiste el contenido de tu bloque personalizado creado con ACF, aún no aparecerá ni en el front-end ni en el back-end. Esto se debe a que aún no configuramos ninguna directiva para mostrarlo.

Como probablemente puedas adivinar por lo anterior, para eso sirve la plantilla de renderizado. Con su ayuda, puedes proporcionar a WordPress la información necesaria para mostrar tu bloque.

Para que esto suceda, debes incluir un archivo con el mismo nombre y en el mismo lugar que definiste cuando registraste tu bloque. En mi caso es template-parts/blocks/portfolio-item/block-portfolio-item.php. Allí incluí lo siguiente:

 ?php$logo = get_field( 'logo' );$title = get_field( 'title' );$description = get_field( 'description' );echo 'div';if( !empty( $logo ) )echo wp_get_attachment_image( $logo['ID'], 'thumbnail', null, array( 'class' = 'portfolio-logo alignleft' ) );if( !empty( $title ) )echo 'h3' . $title . '/h3';if( !empty( $description ) )echo 'div' . $description . '/div';echo '/div';?

Con ese archivo presente, cuando vuelvo al editor de Gutenberg y elijo insertar el bloque de elementos de la cartera, veo esto:

Y así es como se ve el contenido en el frontend.

Bastante emocionante, ¿verdad? Si esto es lo que ya planeabas construir, puedes detenerte aquí. Sin embargo, en mi caso, todavía quiero cambiar el estilo de mi bloque, así que tengo un paso más que dar.

4. Proporcionar estilo

Su bloque se representa con CSS tanto en la parte frontal como en la posterior del sitio. Gracias aClases e identificadores HTMLIncorporado en el marcado anterior, es bastante fácil realizar cambios en su apariencia.

Por ejemplo, puedo agregar lo siguiente a mi hoja de estilo:

.portfolio-item {border-bottom: 1px solid #999;}.portfolio-title {    clear: none;}.portfolio-logo {    outline: 2px solid #ebebeb;}

Después de esto, finalmente tenemos el resultado anterior:

Sin embargo, el estilo modificado aún no es visible en el back end. Para lograrlo, debe ingresarlo en otro archivo y ponerlo en cola con enqueue_block_editor_assets. Puede encontrar más información al respecto enEste artículo.

Y eso es todo. Esa es la forma básica de crear un bloque de Gutenberg con ACF.

5. Algunas cosas más

Por cierto, una de las cosas interesantes de un bloque creado de esta manera es que viene con un modo de vista previa. Eso significa que puedes verlo funcionalmente y editarlo directamente o ver la versión renderizada y cambiar su contenido en la barra lateral del editor.

Además, los bloques creados con ACF son compatibles con la barra de herramientas de alineación de Gutenberg. Por lo tanto, si desea que su nuevo bloque se extienda por toda la pantalla, puede hacerlo.

Además, si necesita más bloques que funcionen con campos personalizados avanzados pero no desea crearlos usted mismo, el complementoBloques de Gutenberg: conjunto de bloques ACFes justo lo que necesitas. Entre otras cosas, contiene bloques para testimonios, clics para tuitear, controles deslizantes de imágenes, uso compartido en redes sociales y más.

La construcción con bloques de Gutenberg es más sencilla gracias a ACF

¡Y ya lo tienes! Tu guía completa sobre cómo crear tu propio bloque de Gutenberg con ACF. Si bien antes esto podría llevarte horas, ahora puedes hacerlo en cuestión de minutos. Aquí están los pasos una vez más:

1. Instalar campos personalizados avanzados
2. Registra el bloque que deseas crear
3. Crea tu grupo de campos personalizado
4. Renderiza tu bloque

Ya seas un desarrollador, un usuario nuevo de WordPress, un propietario de una pequeña empresa o un propietario de un sitio web, la personalización de contenido es una parte importante de tu trabajo. Ahora es más fácil. ¿Qué bloque vas a crear?

¿Has probado a crear bloques de Gutenberg a través de ACF? ¿Qué has conseguido? Cuéntanoslo todo en la sección de comentarios.