{"id":233449,"date":"2023-02-14T12:26:00","date_gmt":"2023-02-14T09:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233449"},"modified":"2022-11-10T23:45:18","modified_gmt":"2022-11-10T20:45:18","slug":"como-hacer-bloques-de-gutenberg-personalizados-con-advanced-custom-fields-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-hacer-bloques-de-gutenberg-personalizados-con-advanced-custom-fields-pro\/","title":{"rendered":"C\u00f3mo hacer bloques de Gutenberg personalizados con Advanced Custom Fields Pro"},"content":{"rendered":"\n

Desde la versi\u00f3n 5.8<\/a> de Advanced Custom Fields (ACF) Pro, puede usar ACF para crear bloques de Gutenberg personalizados. Todo lo que necesita manejar son las plantillas de PHP. Esto hace que sea muy f\u00e1cil para los desarrolladores que a\u00fan no tienen experiencia en el Javascript moderno requerido para crear bloques personalizados para Gutenberg con cualquiera de los tipos de campo que ACF tiene para ofrecer. Tenga en cuenta que esta funcionalidad solo est\u00e1 disponible en la versi\u00f3n paga (Pro<\/a>) de Advanced Custom Fields. No est\u00e1 disponible en la versi\u00f3n gratuita, por lo que deber\u00e1 comprar una licencia.<\/p>\n

Si eres un editor de WordPress o un webmaster que no quiere profundizar en la codificaci\u00f3n, esta publicaci\u00f3n es definitivamente para ti. Sin embargo, si quieres ser un desarrollador de temas o complementos de WordPress, te recomiendo dar el paso para aprender a crear tus propios bloques personalizados. Sin embargo, el uso de campos personalizados avanzados para crear bloques puede proporcionar una buena introducci\u00f3n al manejo de bloques personalizados en Gutenberg.<\/p>\n

Crear un bloque de Gutenberg con ACF<\/h2>\n

B\u00e1sicamente, hay tres pasos simples para crear un bloque de Gutenberg personalizado con campos personalizados avanzados. El primero es f\u00e1cil y probablemente familiar; configurando los campos (settings) que deseas tener en tu bloque. El segundo paso es usar la funci\u00f3n de ACF para registrar un bloque de Gutenberg. Y el tercer paso es escribir la plantilla PHP para el bloque. Simplemente escriba el HTML y maneje la configuraci\u00f3n como lo har\u00eda con los campos ACF de otra manera. \u00a1Y eso es! (Est\u00e1 bien, tal vez haya un cuarto paso: dise\u00f1ar tu bloque. Pero no entrar\u00e9 en eso en esta publicaci\u00f3n).<\/p>\n

Crea tus configuraciones\/campos<\/h3>\n

Si ha utilizado campos personalizados avanzados antes, probablemente sepa c\u00f3mo configurar campos. Puede usar la interfaz de usuario de administraci\u00f3n de Advanced Custom Field para hacer esto. O si desea que la configuraci\u00f3n del bloque se incruste en su complemento o tema, escriba la configuraci\u00f3n con PHP. Tengo una publicaci\u00f3n de referencia completa sobre c\u00f3mo agregar la configuraci\u00f3n de ACF con PHP<\/a>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Lo m\u00e1s importante que debe hacer con su grupo es establecer la ubicaci\u00f3n en "Bloquear". Pero debido a que a\u00fan no hemos registrado nuestro bloque, se establecer\u00e1 de forma predeterminada en "Todos". D\u00e9jelo as\u00ed, guarde sus campos y procedamos a registrando nuestro bloque.<\/p>\n

Registrar un bloque de Gutenberg<\/h3>\n

En el c\u00f3digo de su tema functions.php<\/code>o complemento, debe escribir una funci\u00f3n vinculada acf\/init<\/code>y llamar [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>para registrar un bloque. Como esta funci\u00f3n es bastante nueva en ACF y depende de que se active un complemento, le recomiendo que envuelva su c\u00f3digo dentro de una verificaci\u00f3n if para asegurarse de que su tema o complemento no bloquee su WordPress.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
Registrar un bloque con ACF es similar a c\u00f3mo registrar\u00edamos manualmente un bloque de Gutenberg personalizado. Con ACF, debe proporcionar un nombre slugified \u00fanico para su bloqueo name<\/code>. Recomiendo usar un nombre que se explique por s\u00ed mismo, por ejemplo, cta<\/code>para un bloque de llamada a la acci\u00f3n, o author-card<\/code>para un bloque que muestre autores o similar. Si est\u00e1 algo familiarizado con Gutenberg, es posible que sepa que todos los bloques deben registrarse con un espacio de nombres, un \/<\/code>y luego su nombre de slug. Por ejemplo, el espacio de nombres de WordPress es core<\/code>, por lo que, por ejemplo, el bloque de p\u00e1rrafo en WordPress se llama core\/paragraph<\/code>. Con ACF, el espacio de nombres ser\u00e1 acf, por lo que, por ejemplo, el bloque anterior se registrar\u00e1 en Gutenberg como acf\/yourblock<\/code>. Si est\u00e1 registrando sus campos con PHP, como ver\u00e1 m\u00e1s adelante, debemos recordar esto.<\/p>\n
En category<\/code>defines en qu\u00e9 categor\u00eda de Gutenberg quieres que aparezca tu bloque. Por el momento los valores posibles son common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>o embed<\/code>. Si crea categor\u00edas personalizadas de Gutenberg, puede agregarlas si lo desea. En cuanto a icon<\/code>proporcionar cualquier nombre de icono de WordPress Dashicons<\/a> (menos los).<\/p>\n
Para informar a ACF c\u00f3mo renderizar este bloque, tiene dos opciones: proporcionar un nombre de funci\u00f3n a la clave render_callback<\/code>(como arriba), o proporcionar un nombre de plantilla en su tema a la clave render_template<\/code>. Entonces, si prefiere referirse directamente a una plantilla, por ejemplo, template-parts\/block-yourblock.php<\/code>en su tema, simplemente h\u00e1galo as\u00ed y elimine render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Conecte su grupo de campo a su bloque registrado<\/h2>\n
Cuando est\u00e9 satisfecho con su c\u00f3digo de registro de bloque, es hora de conectar su bloque a la configuraci\u00f3n que realiz\u00f3 anteriormente. Si cre\u00f3 los campos en admin, simplemente regrese y elija su bloque en Ubicaci\u00f3n. Y si agreg\u00f3 el grupo de campo con PHP, en la ubicaci\u00f3n proporcione el valor ‘ acf\/yourblock<\/code>‘ donde yourblock<\/code>est\u00e1 lo que proporcion\u00f3 como se indic\u00f3 name<\/code>anteriormente.<\/p>\n
escribir la plantilla<\/h2>\n
\u00a1El paso final, y el m\u00e1s divertido, es escribir la plantilla para la salida del bloque!<\/p>\n
La ubicaci\u00f3n de la salida de representaci\u00f3n de su bloque depende de lo que haya decidido usar en el registro de su bloque, render_callback<\/code>o render_template<\/code>.<\/p>\n
Si proporcion\u00f3 un nombre de funci\u00f3n render_callback<\/code>, debe definir esta funci\u00f3n en el functions.php<\/code>c\u00f3digo de su tema o complemento. Obtiene cuatro par\u00e1metros para su funci\u00f3n, como ver\u00e1 a continuaci\u00f3n:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
El primer par\u00e1metro, $block<\/code>contiene cierta informaci\u00f3n de Gutenberg. Por ejemplo, cada bloque de Gutenberg casi siempre tendr\u00e1 className<\/code>, que debe establecer como clase en su contenedor m\u00e1s externo. $block['align']<\/code>para la alineaci\u00f3n tambi\u00e9n se puede configurar y algo que desee agregar tambi\u00e9n. El segundo par\u00e1metro, $content<\/code>siempre estar\u00e1 vac\u00edo con ACF (esto se completar\u00eda si agregara bloques anidados, pero eso no es posible con ACF). El valor booleano $is_preview<\/code>ser\u00e1 verdadero si actualmente estamos mirando el procesamiento de bloques en modo de vista previa en el editor de Gutenberg. Y finalmente $post_id<\/code>est\u00e1 la publicaci\u00f3n en la que se agrega este bloque.<\/p>\n
En cuanto a los campos, obtiene campos como lo har\u00eda normalmente, con get_field()<\/code>. La salida HTML depende completamente de usted y de c\u00f3mo desea generar sus campos.<\/p>\n
Si proporcion\u00f3 un archivo de plantilla en render_template<\/code>su lugar, simplemente cree el archivo en la ubicaci\u00f3n especificada en su tema. En su interior tiene acceso a las mismas variables globales exactas que con la funci\u00f3n anterior (por ejemplo $block<\/code>). Por ejemplo:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
Y eso es todo lo que hay que hacer. As\u00ed de sencillo es crear tus bloques de Gutenberg personalizados con ACF.<\/p>\n
Conclusi\u00f3n<\/h2>\n
As\u00ed de f\u00e1cil fue, depender de un complemento, particularmente uno pagado, no es una buena soluci\u00f3n final si desea desarrollar temas o complementos. Tenga en cuenta que sus bloques dejar\u00e1n de funcionar si mueve el c\u00f3digo de su tema a otro WordPress sin ACF Pro. O donde la configuraci\u00f3n de su campo no se haya configurado (a menos que los incruste en su c\u00f3digo con PHP o se asegure de exportarlos e importarlos). Como desarrollador de temas (o complementos) que distribuye c\u00f3digo, no puede esperar que todos los usuarios compren su propia licencia de ACF Pro para que su tema funcione. Pero esta es una buena soluci\u00f3n temporal para aquellos que no pueden o no necesitan codificar.<\/p>\n
Si est\u00e1 convencido de que necesita dar el paso y aprender Javascript y Gutenberg, consulte mi introducci\u00f3n a la publicaci\u00f3n de Gutenberg<\/a> o la categor\u00eda<\/a> de Gutenberg en este sitio para obtener m\u00e1s informaci\u00f3n.<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Esta publicaci\u00f3n explica c\u00f3mo puede usar ACF para crear bloques de Gutenberg personalizados donde todo lo que necesita manejar son las plantillas de PHP. \u00a1No es necesario Javascript!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,716,716,831,914,1110,914,810,831,840,840,861,861],"tags":[1172],"class_list":{"0":"post-233449","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codigo","9":"category-complementos","10":"category-desarrollador","12":"category-guia-para-principiantes","13":"category-otro","14":"category-n-a","18":"category-tutoriales","20":"category-wordpress-2","22":"tag-affiai-es"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233449"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}