Este art\u00edculo te presenta la API Block Bindings, te muestra c\u00f3mo funciona con una sencilla demostraci\u00f3n y explora lo que te depara el futuro a medida que evoluciona la API.<\/p>\n
Por qu\u00e9 la API Block Bindings es una herramienta que cambia las reglas del juego<\/h2>\n
Los campos personalizados<\/a> forman parte del core de WordPress desde hace a\u00f1os. Aportan datos din\u00e1micos a las entradas est\u00e1ticas y ofrecen a los desarrolladores m\u00e1s opciones de personalizaci\u00f3n. Sin embargo, el proceso para utilizarlos es engorroso.<\/p>\n Tienes que utilizar la funci\u00f3n Todos los datos de los campos personalizados de una entrada se guardan como meta de la entrada<\/a>. Sin embargo, no hab\u00eda una forma directa de mostrar los resultados. Hacerlo requer\u00eda un plugin y\/o a\u00f1adir c\u00f3digo<\/a> a tu tema. Esto no s\u00f3lo es m\u00e1s dif\u00edcil para los desarrolladores, sino que tambi\u00e9n supone otra carga t\u00e9cnica que gestionar.<\/p>\n La introducci\u00f3n del Editor de Bloques y de los temas de bloques<\/a> no ayud\u00f3. Los datos de los campos personalizados no pod\u00edan mostrarse en ninguno de los bloques principales incluidos en WordPress, y las mismas limitaciones se aplicaban a los temas de bloques. Esta puede ser una raz\u00f3n importante por la que algunos desarrolladores se han quedado con el Editor cl\u00e1sico y\/o los temas cl\u00e1sicos<\/a>.<\/p>\n La API Block Bindings aporta esta funcionalidad a WordPress. Por fin no necesitas plugins que te ayuden a mostrar datos. Vincula una fuente de datos a bloques espec\u00edficos como Bot\u00f3n<\/a>, Encabezado<\/a>, Imagen<\/a> y P\u00e1rrafo<\/a>, abriendo un nuevo mundo de opciones de personalizaci\u00f3n para los temas de bloques y el Editor de Bloques.<\/p>\n No duplica completamente las capacidades de escribir PHP o utilizar un plugin de campo personalizado. Sin embargo, es un paso en la direcci\u00f3n correcta. Y en algunos casos puede ser lo \u00fanico que necesites.<\/p>\n \u00bfC\u00f3mo funciona la API Block Bindings en el mundo real? Hemos preparado un ejemplo sencillo de c\u00f3mo puede ser \u00fatil.<\/p>\n Antes de entrar en materia, aqu\u00ed tienes un esquema de nuestro proyecto:<\/p>\n Ahora que tenemos nuestro plan, pongamos en acci\u00f3n la API Block Bindings de WordPress.<\/p>\n WordPress oculta los campos personalizados por defecto, as\u00ed que el primer paso es habilitarlos en el Editor de Bloques.<\/p>\n Para activar los campos personalizados, abre el men\u00fa Opciones<\/strong> (icono \u22ee) en el Editor de Bloques. A continuaci\u00f3n, haz clic en Preferencias<\/strong>.<\/p>\n A continuaci\u00f3n, haz clic en el conmutador Campos personalizados<\/strong> para mostrarlos en el editor. Haz clic en el bot\u00f3n Mostrar y volver a cargar la p\u00e1gina<\/strong> para guardar los cambios.<\/p>\n Para registrar nuestros campos personalizados, abre el archivo F\u00edjate en el slug de cada campo, ya que los necesitaremos en el siguiente paso:<\/p>\n Puedes personalizar m\u00e1s estos campos siguiendo la documentaci\u00f3n<\/a> Tambi\u00e9n debemos tener en cuenta que puedes registrar estos campos mediante un plugin personalizado<\/a>. La ventaja es que los campos seguir\u00e1n funcionando \u2014 aunque cambies de tema.<\/p>\n A continuaci\u00f3n, a\u00f1ade valores de campo personalizados a una p\u00e1gina siguiendo estos pasos:<\/p>\n Ahora podemos guardar la p\u00e1gina y repetir este proceso para las dem\u00e1s p\u00e1ginas de nuestro sitio.<\/p>\n Queremos mostrar nuestros datos en las p\u00e1ginas, as\u00ed que tenemos que editar la plantilla de p\u00e1gina de nuestro tema en el Editor de Sitios<\/a>. Para ello<\/p>\n Ve a Apariencia > Editor<\/strong> y haz clic en el enlace Plantillas<\/strong> de la columna izquierda. Busca la plantilla P\u00e1ginas<\/strong> y haz clic para abrirla en el editor.<\/p>\n En primer lugar, tenemos que elegir un lugar para mostrar los datos de nuestro campo personalizado. Vamos a a\u00f1adir un \u00e1rea en la parte inferior de cada p\u00e1gina.<\/p>\n A\u00f1adiremos un bloque Grupo<\/strong> e insertaremos un bloque Columnas<\/strong> dentro de \u00e9l. La columna izquierda contiene un bloque Imagen<\/strong> (para mostrar nuestra foto), mientras que la derecha presenta un bloque P\u00e1rrafo<\/strong> (para mostrar nuestra cita).<\/p>\n Renombramos<\/a> nuestro bloque Grupo a Datos de Campo Personalizados<\/strong> para futuras referencias. As\u00ed ser\u00e1 m\u00e1s f\u00e1cil encontrarlo si queremos volver a editarlo m\u00e1s adelante.<\/p>\n La API Block Bindings a\u00fan no dispone de una interfaz visual para mostrar valores (m\u00e1s informaci\u00f3n al respecto m\u00e1s adelante). As\u00ed que tenemos que editar el c\u00f3digo de nuestros bloques Imagen y P\u00e1rrafo. Esto nos permite vincularles datos personalizados.<\/p>\n Haz clic en el men\u00fa Opciones<\/strong> (icono \u22ee) de la parte superior derecha del Editor de Sitios. Selecciona el enlace Editor de c\u00f3digo<\/strong>. Se abrir\u00e1 el editor de c\u00f3digo.<\/p>\n Busca el bloque Grupo<\/strong> que acabamos de a\u00f1adir. El c\u00f3digo empieza por:<\/p>\n Tambi\u00e9n hemos resaltado el c\u00f3digo correspondiente en la imagen de abajo:<\/p>\n A continuaci\u00f3n, localiza los bloques Imagen y P\u00e1rrafo dentro de este grupo. Su c\u00f3digo por defecto es el siguiente:<\/p>\n Imagen:<\/strong><\/p>\n P\u00e1rrafo:<\/strong><\/p>\n Podemos editar estos bloques para vincularlos a nuestros campos personalizados:<\/p>\n Imagen:<\/strong><\/p>\n Observa que el valor P\u00e1rrafo:<\/strong><\/p>\n En este caso, el valor Guarda los cambios y sal del Editor de C\u00f3digo.<\/strong><\/p>\n Haz clic en los bloques Imagen y P\u00e1rrafo. WordPress contornea cada bloque en morado para indicar que est\u00e1 vinculado a una fuente de datos. Adem\u00e1s, el panel derecho mostrar\u00e1 un \u00e1rea de Atributos con m\u00e1s detalles.<\/p>\n Nota:<\/strong> No ver\u00e1s estos bloques al editar las p\u00e1ginas. Sin embargo, se muestran en la interfaz de tu sitio web.<\/p>\n El \u00faltimo paso es visitar el front-end del sitio web. Deber\u00edamos ver nuestra imagen y nuestra cita en todas las p\u00e1ginas que tengan valores de campo personalizados.<\/p>\n Hemos creado un ejemplo b\u00e1sico de vinculaci\u00f3n de bloques a una fuente de datos. Sin embargo, hay algunas formas adicionales en las que podr\u00edamos mejorar nuestro proyecto, como por ejemplo<\/p>\n La idea es pensar c\u00f3mo quieres incluir datos personalizados en tu sitio. A partir de ah\u00ed, crea un plan para implementarlo de forma que sea f\u00e1cil de mantener. La API Block Bindings ofrece muchas opciones para hacerlo.<\/p>\n La API Block Bindings no es un producto acabado. Sigue evolucionando con cada nueva versi\u00f3n de WordPress.<\/p>\n Por ejemplo, est\u00e1 previsto incluir varias mejoras<\/a> en WordPress 6.7:<\/p>\n Sigue atento a las nuevas funciones que har\u00e1n que la API sea m\u00e1s f\u00e1cil de usar y m\u00e1s potente.<\/p>\n Tambi\u00e9n puedes instalar el plugin Gutenberg<\/a> para obtener acceso anticipado a las funciones antes de que se incorporen al core de WordPress. Te recomendamos que lo utilices en un entorno local o staging.<\/p>\n Todos los clientes de Kinsta tienen acceso a un entorno staging<\/a> para realizar pruebas y tambi\u00e9n pueden a\u00f1adir funcionalidades premium<\/a>.<\/p>\n Y todos pueden utilizar nuestra suite de desarrollo local gratuita DevKinsta<\/a> para WordPress. Crea nuevos sitios con un solo clic y desarrolla desde tu m\u00e1quina local.<\/p>\n La API Block Bindings representa un cambio en la forma de trabajar con datos personalizados en WordPress. En muchos casos sustituye la necesidad de plugins o bloques personalizados. Y aporta m\u00e1s flexibilidad a los bloques de WordPress y a los temas de bloques.<\/p>\n A\u00f1adirla a tu flujo de trabajo puede reducir tu tiempo de desarrollo. Como funci\u00f3n nativa, tambi\u00e9n puede mejorar el rendimiento en comparaci\u00f3n con depender de plugins.<\/p>\n \u00c9sas son algunas de las grandes razones para empezar a utilizarlo hoy mismo. \u00a1Y el futuro se presenta a\u00fan m\u00e1s brillante!<\/p>\n S\u00f3lo hemos empezado a explorar las posibilidades abordadas en este art\u00edculo. Sum\u00e9rgete m\u00e1s en la API Block Bindings explorando m\u00e1s sobre la conexi\u00f3n de campos personalizados<\/a>, trabajar con fuentes de vinculaci\u00f3n personalizadas<\/a> y aprender a obtener y establecer valores de Block Bindings en el editor<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Mostrar datos personalizados en el editor de bloques de WordPress no siempre ha sido un proceso sencillo. Era necesario crear un bloque personalizado para obtener datos …<\/p>\n","protected":false},"author":51,"featured_media":77588,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345],"class_list":["post-77587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress"],"yoast_head":"\nregister_meta()<\/a><\/code> o instalar un plugin para registrar y configurar nuevos campos. Ese es s\u00f3lo el primer paso. Mostrar estos datos en tu sitio web es otro reto.<\/p>\nUn caso sencillo de uso de la API Block Bindings<\/h2>\n
\n
\n
Habilitar los campos personalizados en el editor de bloques<\/h3>\n
![\"Activando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
Registrar los campos personalizados<\/h3>\n
functions.php<\/code> del tema. A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code> de WordPress<\/p>\nA\u00f1adir valores de campo personalizados a una p\u00e1gina<\/h3>\n
\n
kinsta_famous_quote<\/code> en la columna de la izquierda. A continuaci\u00f3n, a\u00f1ade el contenido de nuestra cita a la derecha: El futuro pertenece a quienes creen en la belleza de sus sue\u00f1os. \u2013 Eleanor Roosevelt<\/li>\nkinsta_photo<\/code>. A\u00f1ade a la derecha la URL de la imagen que queremos utilizar.<\/li>\n<\/ol>\n![\"Valores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
Vincular los datos de los campos personalizados a los bloques<\/h3>\n
![\"Las](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"Editar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-page-template.png\" "\\"La")
<!-- wp:group {\"metadata\":{\"name\":\"Custom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n![\"Viendo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-block-code.png\" "\\"Editor")
<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> est\u00e1 fijado a nuestro campo personalizado kinsta_photo<\/code>.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> se establece en nuestro campo personalizado kinsta_famous_quote<\/code>.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Atributos")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Atributos")
![\"Datos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"Datos")
Otras posibilidades para binding blocks<\/h3>\n
\n
kinsta_photo_alt<\/code>, al atributo alt<\/code> de la siguiente manera:\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo\"}},\"alt\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo_alt\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<\/li>\nIr m\u00e1s all\u00e1 con la API Block Bindings<\/h2>\n
\n
Resumen<\/h2>\n