Advanced Custom Fields version 5.12 is now available! This release brings ACF Blocks compatibility with all of the full site editing goodness that arrived in WordPress 5.9, as well as compatibility with features that arrived in WordPress 5.8.

The release contains significant changes to ACF Blocks to support the structure of the new WordPress Full Site Editor. Thanks to all those that tested out the beta and RC releases we’ve put out over the last few weeks.

Please find the release notes below. For the latest ACF news, follow us on Twitter @wp_acf.

Let’s get into it.

Full Site Editing Support

WordPress 5.9 makes the block-based editing experience for posts and pages available to the whole site, with menus, sidebars, headers, and footers all in scope for editing and designing with blocks.

ACF Blocks is one of the best ways to create custom blocks without using React and getting to grips with the extensive tooling required to build a block. So it was natural we would want ACF Blocks to be used in the site editor. With 5.12, ACF Blocks work everywhere.

There have been significant changes in WordPress to introduce the site editor, which presented us with numerous technical challenges in building ACF Blocks support. The main challenge is how we have had to handle editing ACF Blocks within the site editor.

Query Loop Block Support

The Query Loop block officially landed in WordPress 5.8 “Tatum” and brings a way to query posts with a block:

“The Query Loop block makes it possible to display posts based on specified parameters; like a PHP loop without the code.”

The Query Loop block really comes into its own with full site editing. For example, you could add a Query Loop block to your “Home” page to display the last 5 posts in the “News” category.

The Query Loop block is really a special group of blocks that will iterate over the posts returned by the query. The block has nested blocks inside it, like the “Post Title” block. It’s a bit like the ACF Repeater field where sub fields are configured and rendered for every item in the repeater.

Up until now, ACF Blocks could not be properly nested inside Query Loop blocks. Now with 5.12, ACF Blocks are fully supported, allowing you to enrich your Query Block loops with ACF Blocks and custom data. For example, if your ACF Block data comes from a post or custom post type, you can choose to display the content and fields from the post or custom post type, instead of fields assigned to the ACF Block in the code.

There are some things to note about ACF Block support for the Query Loop block.

1. Supporting the Query Loop block now means we support post IDs correctly inside an ACF Block.
2. When you edit a field assigned to an ACF Block used inside a Query Loop block, the change will apply to every post inside the loop in the editor, as the block only exists once but is duplicated for each post in the loop.
3. Editing an ACF block in a Query Loop block is done in the sidebar, rather than inline on the block using the edit mode/view.

Widget Editor Support

Although ACF Blocks initially worked in the new block-based Widget editor introduced in WordPress 5.8, there have been a few compatibility issues reported.

I’m pleased to say we’ve ironed out these issues in ACF 5.12 and ACF Blocks are now fully supported inside the Widget Block Editor.

Unfortunately, the new Widget Editor does not support ACF fields inside field groups assigned to a “widget” location. These will either not appear at all if the widget has been migrated to a native WordPress block, or not save correctly in the Widget Block Editor if they use the Legacy Widget block . If you need to maintain support for these, you should disable the new Widget Block Editor and use the classic Widgets Editor instead.

Block Loading Performance

Each time an ACF Block is rendered in the block editor, an AJAX call is required to load the block template. With the introduction of block patterns which can contain ACF Blocks and other features that show previews in the block editor, this can lead to a significant amount of loading time.

While we can’t prevent that initial load, in the case of block patterns, the same block is often loaded many times. To solve this, we’ve implemented a local cache of these AJAX call results. This means we only need to make that call once, no matter how many times it’s displayed.

This should result in significantly fewer AJAX calls and improved performance, especially when using features like block styles or ACF Blocks inside block patterns.

Developer Notes

ACF Block Preview Mode

TL;DR Editing ACF Block data in the Full Site Editor has to be done in the sidebar

WordPress 5.9’s Site Editor view uses an iframe for rendering the blocks inside a page template. This isolates the content from the rest of WordPress to separate the blocks from the rest of the styles loaded globally, but it also means ACF can’t easily access its JavaScript code for fields powered by Select2, or jQuery UI libraries like date and color pickers.

Unfortunately, until we or the Gutenberg team can develop a solution to make these third-party libraries work correctly inside the Site Editor, ACF Block data has to be edited in the editor sidebar. This matches the behavior of using a block inside a Query Loop block. Editing in the sidebar for complex fields like repeaters isn’t ideal due to the small width of the sidebar area. However, there is a plugin available to help resize the sidebar if needed.

We’ve also found that WordPress switches to the iframe approach if you use the Block Editor’s mobile or tablet preview modes, so we’ve also disabled inline editing of ACF Block data in that scenario as well.

Post ID Changes Inside a Block

In releases prior to ACF 5.12, use of $post_id inside a block template was not consistent. It would be null in the block editor, but return the $post_id of the container post when rendered on the frontend. In ACF 5.12, there is now a consistent use of $post_id across backend and frontend views of blocks, which is dependent on the context in which the block is used.
If used inside a Query Loop block, $post_id will be the post ID of the current post displayed inside the loop. For all other uses of blocks, $post_id will be the post ID of the container post.

get_field() and the_field() will return block field values. To access fields from the post, you need to pass in the post ID. For example:

$field_name = get_field(‘field_name’, get_the_ID())

Improved Plugin Translation Process

Our .pot file was a little bit out of date, which resulted in incorrect translations of ACF strings for the PRO plugin. As of 5.12 we have an automated build system to localize the strings so we can better facilitate the further translation of ACF into different languages.

If you are interested in helping translate ACF into your language, get in touch.

Security Fixes, Improvements, and Bug Fixes

This release also includes the following improvements:

1. Adding an ACF block to a page no longer breaks the default sanitization of dangerous HTML in native blocks.
2. Better support for double byte characters in acf_get_truncated() (props @cabradb).
3. REST API no longer throws PHP notices on PHP 8.1.

We’ve also shipped a temporary workaround for WordPress 5.9.1’s change to the way REST API call preloading works in the block editor, which prevents any fields that use the media library from working correctly in a block. Our workaround for this disables block preloading of blocks in an edit mode, we’ll get that restored as soon as possible.

More Goodness

We often get questions in support from PRO customers asking if they need to keep the free plugin activated on the site after activating the PRO plugin. Although having both plugins activated doesn’t result in errors or warnings, there’s no need to have both running on a site.

As of 5.12, when you activate the PRO plugin it will deactivate the free plugin, and vice-versa. We do this for two of our other plugins: WP Migrate DB Pro and WP Offload Media.

These are just the highlights of all the features, improvements, and bug fixes bundled in this release. To see a full list of all the updates, take a look at the changelog.

What’s Next

We’ve got lots of good stuff planned for the near future, including a whole host of improvements and fixes, as well as improvements to the Field Group editing experience.

Thanks to everyone in the ACF community who helped make this release possible.

Are you excited about the ACF Blocks improvements in ACF 5.12? Are you planning on using ACF Blocks on a Full Site theme? Let us know in the comments below or on Twitter.

The post ACF 5.12 Release – ACF Blocks Compatibility with Full Site Editing and More appeared first on ACF.

ACF PRO 5.12 RC1 ya disponible

¡Estamos emocionados de anunciar que ACF PRO 5.12 RC1 ya está disponible!

Para acceder a esta versión, por favor inicia sesión en tu cuenta, ve a la página de «Licencias» y selecciona la versión «5.12-RC1» de las descargas disponibles.

Restricciones adicionales en el modo de edición de bloques

ACF 5.12 deshabilitará el modo de edición para cualquier Bloque de ACF utilizado dentro del nuevo Editor de Sitios Completo de WordPress 5.9, debido a la imposibilidad de utilizar bibliotecas empaquetadas o de terceros como select2 y el date-picker de jquery-ui dentro de ese iframe.

ACF PRO 5.12 RC1 extiende esta restricción a lugares adicionales donde se utiliza el iframe del editor de bloques, como las vistas previas en móviles y tabletas y el editor de plantillas que se carga dentro del editor de bloques normal.

Aunque la experiencia predeterminada del editor de bloques no cambia, somos conscientes de las limitaciones que esto implica para los bloques de ACF en los nuevos contextos añadidos en WordPress 5.9, especialmente si estás utilizando campos complejos como repetidores en un bloque. Continuaremos trabajando en este problema junto al equipo de Gutenberg para habilitar la carga de bibliotecas de terceros en el iframe del editor de bloques en una futura versión.

Registro completo para ACF 5.12

Cambios en RC1

• Nuevo – Deshabilitar el modo de edición para bloques vistos en los modos de vista previa en móviles y tabletas del editor de bloques
• Corrección – Aplicar correctamente las restricciones de edición de bloques en la vista del editor de plantillas del editor de bloques
• Corrección – Advertencias y avisos de deprecación de PHP 8.1 en la API REST
• Corrección – Mejor soporte para caracteres de doble byte en «acf_get_truncated» (props @cabradb)
• i18n – Enlace roto en la traducción croata
• i18n – Creación automatizada de acf.pot para traductores en cada versión

Cambios desde Beta 2

• Nuevo – Se añadió un sistema de almacenamiento en caché de bloques para reducir el número de llamadas AJAX en el editor de bloques
• Nuevo – Los bloques de ACF en el nuevo Editor de Sitios ahora se fuerzan en modo «vista previa» para una mejor compatibilidad
• Corrección – Se solucionó un problema donde el bloque «$context» no estaba disponible en bloques precargados o en la renderización frontal en 5.12-beta1
• Corrección – Se solucionó un problema donde los anclajes no funcionaban correctamente en WordPress 5.9
• Corrección – Se solucionó un problema donde la capacidad «unfiltered_html» no se estaba utilizando en los bloques de ACF

Cambios desde Beta 1

• Nuevo – Los bloques de ACF ahora tienen soporte preliminar para el Bloque de Bucle de Consulta de WordPress
• Nuevo – Los bloques de ACF ahora tienen soporte preliminar para el nuevo Editor de Sitios incluido en WordPress 5.9
• Mejora – La precarga de bloques ahora se puede desactivar utilizando «acf_update_setting( ‘preload_blocks’, false );» en el gancho de acción «acf/init»
• Mejora – ACF y ACF Pro detectarán si el otro está activo y desactivarán el otro plugin al activar uno
• Corrección – Se solucionó un problema donde era imposible actualizar un bloque de ACF dentro del editor de bloques de widgets
• Corrección – Se solucionó un problema donde los campos de ACF podrían no aparecer en las llamadas a la API REST realizadas a través de funciones internas de WordPress

Descarga y prueba esta versión candidata de ACF PRO 5.12. ¡Agradecemos mucho cualquier comentario!

Gracias a todos los que ayudaron a hacer posible esta versión. ¿Crees que has encontrado un error? Por favor crea un nuevo ticket de soporte detallado o en nuestro repositorio en GitHub.

El artículo ACF PRO 5.12 RC1 apareció primero en ACF.

Lee el artículo original en https://www.advancedcustomfields.com/blog/acf-pro-5-12-rc-1/ para conocer todos los detalles.

Haz que tu web sea más segura y eficiente con Zonsai.

Edición de Datos de Bloques ACF en el Editor del Sitio

La vista del Editor del Sitio de WordPress 5.9 utiliza un iframe para renderizar los bloques dentro de una plantilla de página. Esto aísla el contenido del resto de WordPress para separar los bloques del resto de estilos cargados globalmente, pero también significa que ACF no puede acceder fácilmente a su código JavaScript para campos alimentados por select2 o bibliotecas jquery-ui como selectores de fecha y color.

Lamentablemente, hasta que nosotros o el equipo de Gutenberg podamos desarrollar una solución para que estas bibliotecas de terceros funcionen correctamente dentro del Editor del Sitio, deberás utilizar la barra lateral para modificar cualquier campo específico del bloque en los Bloques ACF en el Editor del Sitio. Esto coincide con el comportamiento de usar un bloque dentro de un bloque de bucle de consulta.

Caché de Carga de Bloques

Cada vez que se renderiza un bloque ACF en el editor de bloques, se requiere una llamada AJAX para cargar tu plantilla. Con la introducción de patrones de bloques que pueden contener Bloques ACF y otras funciones que muestran previsualizaciones en el editor de bloques, esto lleva a una cantidad significativa de carga.

Aunque no podemos evitar esa carga inicial, en el caso de los patrones de bloques a menudo el mismo bloque se carga muchas veces. Para resolver esto, hemos implementado una caché local de estos resultados de llamadas AJAX, lo que significa que solo necesitamos hacer esa llamada una vez, sin importar cuántas veces se muestre.

Esto debería resultar en significativamente menos llamadas AJAX y un rendimiento mejorado, especialmente al usar características como estilos de bloques o bloques ACF dentro de patrones de bloques.

Puedes notar algunos console.log de depuración dejados deliberadamente en esta beta para ayudarnos a depurar cualquier problema que encuentres con este sistema. Estos serán eliminados para la versión final.

Registro de Cambios Completo (desde Beta 1)

• Nuevo – Sistema de caché de bloques añadido para reducir el número de llamadas AJAX en el editor de bloques
• Nuevo – Los bloques ACF en el nuevo Editor del Sitio ahora se fuerzan al modo de «previsualización» para una mejor compatibilidad
• Corrección – Se corrigió un problema donde el $context del bloque no estaba disponible en bloques precargados o renderizados en el frontend en 5.12-beta1
• Corrección – Se corrigió un problema donde los anclajes no funcionaban correctamente en WordPress 5.9
• Corrección – Se corrigió un problema donde la capacidad de «unfiltered_html» no estaba siendo utilizada por los bloques ACF

El artículo ACF PRO 5.12 Beta 2 apareció primero en ACF.

Más información disponible en el artículo original: https://www.advancedcustomfields.com/blog/acf-pro-5-12-beta-2/.

Confía en Zonsai para mejorar tu presencia digital.

ACF PRO v5.12-beta1: Soporte para WordPress 5.9

En conjunto con el lanzamiento de WordPress 5.9 esta semana, ACF PRO v5.12-beta1 ya está disponible con soporte para el Editor de Sitio Completo y Temas de Bloques de WordPress 5.9.

Esta es nuestra primera versión beta desde que asumimos el cuidado de ACF. La actualización contiene cambios significativos en los Bloques de ACF para soportar la estructura del nuevo Editor de Sitio Completo de WordPress. Este nuevo editor funciona de manera diferente a las demás vistas del editor de bloques, cargando bloques dentro de un iframe que está fuera del alcance del resto del DOM. Estamos ansiosos por recibir tus comentarios mientras comienzas a desarrollar Temas de Bloques utilizando ACF.

Las novedades de la actualización son las siguientes:

• Los Bloques de ACF ahora tienen soporte preliminar para el Editor de Sitio Completo
• Los Bloques de ACF ahora funcionan correctamente en el editor de Widgets
• Los Bloques de ACF ahora son compatibles con el bloque de Bucle de Consulta

Para acceder a esta versión, por favor inicia sesión en tu cuenta, navega hasta la página de «Licencias» y selecciona la versión «5.12-beta1» de las descargas disponibles.

También hemos introducido cambios que te permiten utilizar Bloques de ACF dentro de Bloques de Bucle de Consulta para mostrar datos del post actualmente visualizado en el bucle. Esto significa que puedes utilizar Bloques de ACF como puente entre las plantillas PHP para posts y el editor de bloques sin necesidad de utilizar campos en el bloque en sí.

Cambios de ID de Post dentro de un Bloque

En versiones anteriores a ACF 5.12, el uso de $post_id dentro de una plantilla de bloque no era consistente. Sería nulo en el editor de bloques, pero devolvería el $post_id del post contenedor al renderizarse en el frontend. En ACF 5.12, ahora hay un uso consistente de $post_id en las vistas del backend y frontend de bloques, que depende del contexto en el que se utilice el bloque. Una nueva variable $context está disponible dentro de la plantilla de bloque que proporciona más información sobre dónde se está mostrando el bloque.

Si se utiliza dentro de un Bloque de Bucle de Consulta, $post_id será el ID del post actual mostrado dentro del bucle, y una nueva variable, $context[‘hostPostId’], contendrá el ID del post contenedor que contiene el Bloque de Bucle de Consulta. Esto te permite acceder a cualquier campo en ese post contenedor.

Para todos los demás usos de bloques, $post_id será el ID del post contenedor.

Como antes, por defecto, get_field() y the_field() devolverán los valores de campo del bloque. Para acceder a los campos del post, necesitas pasar el ID del post, por ejemplo: get_field(‘nombre_campo’, get_the_ID())

Notas

Editar un campo asignado a un bloque utilizado dentro de un Bloque de Bucle de Consulta aplicará ese cambio a cada post dentro del bucle, ya que el bloque solo existe una vez pero se duplica para cada post en el bucle.

Problemas Conocidos

• Los bloques utilizados dentro del Bloque de Bucle de Consulta actualmente no admiten el modo de edición en bloque, y requieren el uso de las herramientas de edición en la barra lateral para editar cualquier campo específico del bloque. Los bloques utilizados dentro de un Bloque de Bucle de Consulta serán forzados al modo de vista previa independientemente de su configuración definida.
• La precarga de bloques está desactivada para bloques utilizados dentro de un Bloque de Bucle de Consulta.
• Algunos tipos de campo (incluyendo el selector de fecha, selector de color y campos WYSIWYG) pueden no funcionar correctamente en el editor de sitio debido a que el iframe del editor de sitio cambia el alcance de JavaScript. Agregaremos soporte para estos campos en un futuro cercano.
• La nueva variable $context puede que no esté disponible en bloques precargados.

Changelog Completo (En Progreso)

• Nuevo – Los bloques de ACF ahora tienen soporte preliminar para el Bloque de Bucle de Consulta de WordPress
• Nuevo – Los bloques de ACF ahora tienen soporte preliminar para el nuevo Editor de Sitio incluido en WordPress 5.9
• Mejora – La precarga de bloques ahora se puede desactivar usando acf_update_setting( ‘preload_blocks’, false ); en el gancho de acción acf/init
• Mejora – ACF y ACF PRO ahora detectarán si el otro está activo y desactivarán el otro complemento en la activación del complemento. Por lo tanto, activar ACF desactivará ACF PRO y activar ACF PRO desactivará ACF.
• Corrección – Se solucionó un problema donde era imposible actualizar un bloque de ACF dentro del editor de bloque de widgets
• Corrección – Se solucionó un problema donde los campos de ACF podrían no aparecer en las llamadas de la API REST realizadas a través de funciones internas de WordPress

Descarga y prueba la beta de ACF PRO 5.12. ¡Agradeceríamos mucho cualquier comentario!

Accede al artículo original en https://www.advancedcustomfields.com/blog/acf-pro-5-12-beta-1/ para más información.

Con Zonsai, tu web siempre estará a la última.