{"id":10908,"date":"2024-05-09T15:10:56","date_gmt":"2024-05-09T15:10:56","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=resources&p=10908"},"modified":"2024-12-17T13:23:58","modified_gmt":"2024-12-17T13:23:58","slug":"campos-editables-en-bloques-acf-editar-campos-directamente-desde-gutenberg","status":"publish","type":"resources","link":"https:\/\/wcanvas.com\/es\/resource\/campos-editables-en-bloques-acf-editar-campos-directamente-desde-gutenberg\/","title":{"rendered":"Campos Editables en Bloques ACF: Editar Campos Directamente desde Gutenberg"},"content":{"rendered":"\n

WordPress y el editor de sitio Gutenberg han allanado el camino para soluciones innovadoras en la creaci\u00f3n de sitios y la gesti\u00f3n de contenido. No obstante, el proceso de edici\u00f3n a\u00fan presenta algunos roces al trabajar con Advanced Custom Fields<\/a> (ACF), ya que generalmente los usuarios deben salir de Gutenberg para editar los campos de ACF.<\/p>\n\n\n\n

Ah\u00ed es donde entra en juego ACF Editable Block Fields. Es un plugin en estado beta que permite a los creadores de contenido y desarrolladores editar los campos de ACF directamente dentro de Gutenberg, ofreciendo una experiencia de edici\u00f3n fluida.<\/p>\n\n\n\n

Aqu\u00ed te contamos c\u00f3mo ACF Editable Block Fields puede simplificar el proceso de edici\u00f3n y mejorar la experiencia general del usuario.<\/p>\n\n\n\n

Este post tiene como objetivo abordar el issue<\/a> de GitHub, que se relaciona con este tema espec\u00edfico.<\/p>\n\n\n\n

Hac\u00e9 la Edici\u00f3n de Campos ACF Simple Dentro de Gutenberg<\/h2>\n\n\n\n

Editar campos de ACF ha sido tradicionalmente un proceso en varios pasos, requiriendo a los usuarios salir de su dise\u00f1o visual. ACF Editable Block Fields elimina esta molestia permitiendo la edici\u00f3n directa de campos de texto, \u00e1rea de texto y enlaces dentro del editor de Gutenberg.<\/p>\n\n\n\n

Como resultado, ACF Editable Block Fields mejora significativamente la eficiencia del flujo de trabajo y mantiene el flujo creativo en la creaci\u00f3n de contenido.<\/p>\n\n\n\n

Caracter\u00edsticas Principales del Plugin ACF Editable Block Fields<\/h2>\n\n\n\n

Hac\u00e9 clic y edit\u00e1 campos de ACF como texto, \u00e1reas de texto y campos de enlace directamente dentro del Editor de Sitios de Gutenberg, eliminando la necesidad de cambiar de contexto.<\/p>\n\n\n\n

Soporte para M\u00faltiples Campos<\/h3>\n\n\n\n

El plugin no se limita a campos simples. Tambi\u00e9n soporta tipos m\u00e1s complejos, como campos clone y repeaters.<\/p>\n\n\n\n

Dise\u00f1ado para el Panel de Administraci\u00f3n de WordPress<\/h3>\n\n\n\n

Con su activaci\u00f3n confinada al \u00e1rea de administraci\u00f3n, ACF Editable Block Fields asegura que la experiencia del usuario en el front-end no se vea afectada, aline\u00e1ndose con las mejores pr\u00e1cticas de WordPress.<\/p>\n\n\n\n

Bloque de Demo<\/h3>\n\n\n\n

El plugin a\u00f1ade un bloque de demostraci\u00f3n llamado DEMO: ACF Editable Block Fields<\/code>, donde pod\u00e9s probar el plugin.<\/p>\n\n\n\n

ACF Editable Block Fields en Acci\u00f3n<\/h2>\n\n\n\n

A continuaci\u00f3n, te mostramos un adelanto de c\u00f3mo funciona el plugin ACF Editable Block Fields.<\/p>\n\n\n\n

L\u00f3gica de Backend en PHP<\/h3>\n\n\n\n

Clases como ACFEditableFieldsKses<\/code> manejan la sanitizaci\u00f3n de entradas, asegurando seguridad y eficiencia. La clase EditableCanvas<\/code> es fundamental en la representaci\u00f3n de campos editables y en el manejo de actualizaciones de datos, mostrando la sofisticada integraci\u00f3n del plugin con WordPress y ACF.<\/p>\n\n\n\n

C\u00f3mo Usar el Plugin ACF Editable Block Fields<\/h2>\n\n\n\n

Paso 1: Instalar el Plugin<\/h3>\n\n\n\n

Primero, descarg\u00e1<\/a> el plugin y activalo a trav\u00e9s del men\u00fa Plugins > A\u00f1adir nuevo plugin<\/strong>. Hac\u00e9 clic en Subir plugin<\/strong> y sub\u00ed el archivo .zip<\/code> que acab\u00e1s de descargar.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Hac\u00e9 clic en Instalar ahora<\/strong>.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Finalmente, hac\u00e9 clic en Activar plugin<\/strong>.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Paso 2: Activar la Licencia<\/h3>\n\n\n\n

And\u00e1 a ACF Editable Block Fields > Licencia<\/strong> en la barra lateral izquierda del panel de administraci\u00f3n. <\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Peg\u00e1 el c\u00f3digo de licencia 36529aa5-6c95-4426-8e11-ad0eb90a93a9<\/code> en el cuadro de texto Clave<\/strong> para recibir actualizaciones y hac\u00e9 clic en Guardar configuraciones<\/strong>.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Paso 3: Habilitar la Edici\u00f3n de Campos<\/h3>\n\n\n\n

And\u00e1 a ACF > Grupos de Campos<\/strong>.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Marc\u00e1 la opci\u00f3n Habilitar Edici\u00f3n en L\u00ednea<\/strong> en cada campo que quieras editar directamente en Gutenberg. Este paso es crucial para activar la funcionalidad de edici\u00f3n en l\u00ednea.<\/p>\n\n\n\n

\"El<\/figure>\n\n\n\n

Despu\u00e9s de este proceso, continu\u00e1 usando la funci\u00f3n get_field()<\/code> como de costumbre para mostrar los datos del campo en tus templates. El plugin maneja inteligentemente la sanitizaci\u00f3n de los campos de texto, eliminando la necesidad de realizar escapes manuales (por ahora).<\/p>\n\n\n\n

Campos Editables<\/h2>\n\n\n\n

Campos de Texto y \u00c1rea de Texto<\/h3>\n\n\n\n

No hace falta a\u00f1adir cosas extra a tu c\u00f3digo\/template. La \u00fanica consideraci\u00f3n que necesitas hacer es no escapar el campo, ya que el plugin lo hace por vos.<\/p>\n\n\n\n

Esto puede cambiar en el futuro dado que WordPress fomenta el escape tard\u00edo de campos.<\/p>\n\n\n\n

<?php\n$description = get_field('description');\n\nif($description) :\n?>\n    <p class=\"paragraph\"><?php echo $description; ?><\/p>\n<?php endif; ?><\/code><\/pre>\n\n\n\n
Campo de Enlace<\/h3>\n\n\n\n
La magia ocurre mediante un nuevo par\u00e1metro en el array con la clave editable<\/code> y ten\u00e9s que imprimirlo dentro de tu dise\u00f1o de bot\u00f3n, esto a\u00f1adir\u00e1 un \u201cPrevent Default\u201d y etiquetas de bot\u00f3n. Cuando el usuario haga clic en el bot\u00f3n, aparecer\u00e1 el modal de ACF para enlaces.<\/p>\n\n\n\n
<?php\n$link = get_field('link');\n\nif($link) :\n?>\n    <a class=\"button\" href=\"<?php echo esc_url($link['url']); ?>\"\n        target=\"<?php echo esc_attr($link['target']); ?>\">\n        <?php echo $link['editable'] . esc_html($link['title']); ?>\n    <\/a>\n<?php endif; ?><\/code><\/pre>\n\n\n\n
Los Beneficios de Usar el Plugin ACF Editable Block Fields<\/h2>\n\n\n\n
Estos son los principales beneficios de usar el Plugin ACF Editable Block Fields:<\/p>\n\n\n\n