{"id":41465,"date":"2023-08-10T07:00:10","date_gmt":"2023-08-10T14:00:10","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=41465"},"modified":"2025-01-16T14:40:40","modified_gmt":"2025-01-16T22:40:40","slug":"como-usar-bloques-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/","title":{"rendered":"C\u00f3mo Usar Bloques de WordPress (+ \u00a1C\u00f3mo Crear los Tuyos!)"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">\u00bfUstedes creen que este es un espacio extra\u00f1o para mencionar que mi esposa se est\u00e1 aferrando a un kit de Star Wars de Lego, edici\u00f3n limitada, sin abrir, en su caja original de BB-8?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00a1Cuesta al rededor de $500 USD!<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Okay. S\u00ed ser\u00eda raro. Entend\u00ed el mensaje claro y conciso\u2026 Pero les prometo que todo esto tendr\u00e1 sentido en un momento.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En esta publicaci\u00f3n, vamos a cubrir todo lo que necesitas saber sobre los bloques de WordPress. Si eres un usuario veterano de WordPress como yo, entonces probablemente piensas que los bloques son tan \u201cnuevos\u201d como <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/que-es-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress<\/span><\/a><span style=\"font-weight: 400;\">, ya que seguramente comenzaste usando el editor cl\u00e1sico.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ya han pasado 5 a\u00f1os desde que WordPress introdujo los bloques, pero a\u00fan son una de las funciones menos entendidas y poco utilizadas del CMS.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Los b<\/span><span style=\"font-weight: 400;\">loques de WordPress son algo parecido a los Legos \u2014 ven, les dije que iba a tener sentido. Te permiten construir y personalizar tu sitio web en una manera que habr\u00eda requerido contratar un dise\u00f1ador profesional de sitios y un desarrollador hace un par de a\u00f1os.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Y esa es una de las razones por las cuales las personas los aman tanto, una vez que los entienden.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Despu\u00e9s de que explique c\u00f3mo funcionan, no cabe duda de que tambi\u00e9n los amar\u00e1n.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-que-son-los-bloques-de-wordpress\" class=\"wp-block-heading\"><strong><a id=\"definicion\"><\/a>\u00bfQu\u00e9 Son los Bloques de WordPress?<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"592\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Bloques-Wordpress.jpg\" alt=\"Ejemplo bloques disponibles panel de WordPress\" class=\"wp-image-41469 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Bloques-Wordpress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Bloques-Wordpress-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Bloques-Wordpress-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Bloques-Wordpress-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Bloques-Wordpress-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Bloques-Wordpress-784x516.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Bloques-Wordpress-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/592;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Los bloques de WordPress son, como el nombre lo sugiere, bloques de construcci\u00f3n que puedes apilar y a\u00f1adir en p\u00e1ginas y publicaciones de tu sitio WordPress.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Fueron a\u00f1adidos a WordPress 5.0, junto con el lanzamiento del editor de Gutenberg con el que la mayor\u00eda de nosotros estamos familiarizados hoy en d\u00eda. Los bloques ahora son la nueva forma estandarizada de personalizar tu sitio WordPress \u2014 y puedes utilizar bloques a trav\u00e9s de tu sitio completo, no solo en las publicaciones.&nbsp;<\/span><\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg es el nombre del proyecto del Editor de Bloques de WordPress. Muchos desarrolladores y entusiastas de WordPress usan los t\u00e9rminos Editor Gutenberg y Editor de Bloques indistintamente.<\/p>\n    \n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Piensa en ellos como si fueran un creador de sitio o de p\u00e1gina. Puedes hacer clic en el bot\u00f3n \u2018<\/span><b>+<\/b><span style=\"font-weight: 400;\">\u2019 para a\u00f1adir un bloque a una p\u00e1gina o publicaci\u00f3n, y luego seleccionar entre varias opciones de bloques. La versi\u00f3n actual de WordPress viene con 90+ opciones desde el inicio.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Cada bloque es esencialmente un widget. Pueden hacer varias cosas, como incrustar contenido de otro sitio o servicio, a\u00f1adir nuevas funciones como calendarios o formularios de contacto a la p\u00e1gina, o incluso a\u00f1adir contenido espec\u00edfico con formatos predefinidos.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, la mayor\u00eda de los bloques tienen opciones de personalizaci\u00f3n que te permiten ajustar c\u00f3mo se muestra o c\u00f3mo funcionan en tu sitio.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">El editor de Bloque de WordPress es una gran actualizaci\u00f3n del Editor Cl\u00e1sico. En los d\u00edas pre-Gutenberg, los usuarios de WordPress solo pod\u00edan a\u00f1adir texto e im\u00e1genes a una publicaci\u00f3n antes de tener que ahondar en el c\u00f3digo personalizado.&nbsp;<\/span><\/p>\n\n\n\n<p><b>Nota nerd:<\/b><span style=\"font-weight: 400;\"> Si por alguna raz\u00f3n no tienes acceso a los bloques del Editor de WordPress, podr\u00eda ser por una de dos razones. La primera es que tu <\/span><a href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">instalaci\u00f3n de WordPress<\/span><\/a><span style=\"font-weight: 400;\"> podr\u00eda estar terriblemente desactualizada. Segundo, es posible que el Editor en Bloque haya sido desactivado por el plugin del Editor Cl\u00e1sico. Cuando este est\u00e1 activo, este plugin te revierte a la experiencia del Editor Cl\u00e1sico. Revisa tu p\u00e1gina de plugins en tu panel administrativo de WordPress para comprobar si este es el caso.&nbsp;<\/span><\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-que-bloques-tiene-wordpress-ahora-nbsp\" class=\"wp-block-heading\"><b><a id=\"cuales\"><\/a>\u00bfQu\u00e9 Bloques Tiene WordPress Ahora?&nbsp;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Por defecto, el editor en bloque ofrece un gran n\u00famero de <\/span><a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">bloques disponibles<\/span><\/a><span style=\"font-weight: 400;\">. Puedes usarlas para personalizar tu tema de WordPress, y le permite a los escritores y blogueros a\u00f1adir contenido enriquecido a sus publicaciones, incluir contenido de redes sociales y mucho m\u00e1s.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Veamos algunos de los bloques m\u00e1s populares, predeterminados y \u00fatiles de Gutenberg.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bloques-mas-comunes\"><b>Bloques M\u00e1s Comunes<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A\u00f1adir cualquier tipo de texto o imagen se realiza a trav\u00e9s de un bloque. Esto quiere decir que los bloques generalmente son los diferentes estilos y tipos de texto o elementos de im\u00e1genes que puedes a\u00f1adir a una p\u00e1gina.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Cosas como:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Bloque de Texto<\/b><span style=\"font-weight: 400;\"> \u2014 Cada p\u00e1rrafo que escribes en el Editor de Bloque reside en su propio bloque de texto. Sin embargo, los bloques no est\u00e1n limitados solo a p\u00e1rrafos. Puedes escribir tanto como desees.<\/span><\/li>\n\n\n\n<li><b>Bloque de Imagen<\/b><span style=\"font-weight: 400;\"> \u2014 Para cuando desees mostrar y contar, integra una imagen en la mezcla para un valor agregado.&nbsp;<\/span><\/li>\n\n\n\n<li><b>Bloque de Lista<\/b><span style=\"font-weight: 400;\"> \u2014 \u00bfNecesitas un escribir una descripci\u00f3n? Y, \u00bfqu\u00e9 tal una lista? Es posible con este bloque.&nbsp;<\/span><\/li>\n\n\n\n<li><b>Bloque de Galer\u00eda de Imagen<\/b><span style=\"font-weight: 400;\"> \u2014 Compartir fotos de vacaciones o de productos nunca fue tan f\u00e1cil ?<\/span><\/li>\n\n\n\n<li><b>Bloque de Tablas<\/b><span style=\"font-weight: 400;\"> \u2014 Crea una tabla de precios o comparte informaci\u00f3n de un spreadsheet con pocos clics.<\/span><\/li>\n\n\n\n<li><b>Bloque de Citas Textuales<\/b><span style=\"font-weight: 400;\"> \u2014 \u00bfQuieres llamar la atenci\u00f3n a una observaci\u00f3n en particular? O, \u00bfquieres inspirar a los lectores con una cita textual relevante para la publicaci\u00f3n? \u00a1Res\u00e1ltalas f\u00e1cilmente con el bloque de citas textuales!<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Cada uno de estos es un elemento que puedes a\u00f1adir a tu sitio web con el Editor en Bloque. Luego, puedes posicionar y darle el estilo que desees en la secci\u00f3n de contenido de la p\u00e1gina.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bloques-de-contenido-incrustado\"><b>Bloques de Contenido Incrustado<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Los bloques hacen demasiado f\u00e1cil la tarea de incrustar contenido externo y widgets en tu sitio WordPress sin tener que a\u00f1adir un nuevo plugin o un servicio adicional de terceros.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Algunos de los tipos de bloques m\u00e1s populares para traer contenido externo:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Bloque Calendly&nbsp;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de HTML personalizado<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Twitter<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de YouTube<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Testimonios<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">WooCommerce<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Formularios de Contacto<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Preguntas frecuentes<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Al utilizar estos tipos de bloques, puedes ir m\u00e1s all\u00e1 del editor de texto b\u00e1sico y crear contenido interactivo que muestra todo tipo de funciones.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bloques-de-especialidades\"><b>Bloques de Especialidades<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed es donde las cosas se ponen interesantes.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u00e1s all\u00e1 de los conceptos b\u00e1sicos y el contenido incrustado, tambi\u00e9n hay un gran n\u00famero de bloques m\u00e1s avanzados que puedes utilizar para casos de uso especiales. Por ejemplo, si quisieras mejorar la navegaci\u00f3n de tu sitio y el UX, o usar WordPress como un constructor de sitios completamente.&nbsp;<\/span><\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navegaci\u00f3n<\/h3>\n    <p>En la web, el t\u00e9rmino \u2018navegar\u2019 significa moverse de un sitio web o p\u00e1gina a otra. La navegaci\u00f3n tambi\u00e9n es un t\u00e9rmino com\u00fan en el desarrollo y en el dise\u00f1o web. Hay un \u00e9nfasis en facilitar que los usuarios encuentren las p\u00e1ginas que necesitan de manera f\u00e1cil.<\/p>\n    \n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed hay algunos para que eches un vistazo:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Bloque de Botones<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Columnas<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Grupo<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Publicaci\u00f3n de Carrusel<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Publicaci\u00f3n de Contenido<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Bucle de Solicitudes<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque Reusable<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Shortcodes<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Bloque de Tabla de Contenidos<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Con estos bloques, puedes integrar contenido personalizado directamente de la base de datos de WordPress o personalizar el dise\u00f1o por completo, el espaciado y el flujo de cada p\u00e1gina o publicaci\u00f3n en tu sitio web.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Y todo esto es muy bonito. Pero, \u00bfqu\u00e9 pasa si necesitas un bloque que no est\u00e1 incorporado en WordPress por defecto?&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por suerte, los bloques tambi\u00e9n son personalizables. Tal como los widgets, puedes a\u00f1adir nuevos bloques e incluso crear los tuyos propios para que se ajusten a las necesidades de dise\u00f1o de tu sitio y plantilla.&nbsp;<\/span><\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>Los widgets de WordPress te permiten agregar funciones a las barras laterales, pies de p\u00e1gina u otras \u00e1reas de tu sitio web. Algunos widgets predeterminados de WordPress son Categor\u00edas, Nube de etiquetas, B\u00fasqueda, Men\u00fa de navegaci\u00f3n, Calendario y Entradas recientes.<\/p>\n    \n<\/div>\n\n\n\n<h2 id=\"h-como-crear-bloques-personalizados-con-un-plugin-de-wordpress\" class=\"wp-block-heading\"><strong><a id=\"plugin\"><\/a>C\u00f3mo Crear Bloques Personalizados Con un Plugin de WordPress<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Por mucho, la manera m\u00e1s f\u00e1cil de crear un bloque personalizado es utilizar un plugin.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">El <\/span><a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plugin Genesis Custom Blocks<\/span><\/a><span style=\"font-weight: 400;\"> hace que construir y lanzar tus propios bloques sea bastante sencillo. Necesitar\u00e1s tener conocimiento b\u00e1sico de <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprender-html\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">HTML<\/span><\/a><span style=\"font-weight: 400;\"> y <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprende-css\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">CSS<\/span><\/a><span style=\"font-weight: 400;\"> para crear y darle estilo al bloque, y que se ajuste a tus necesidades.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Con esas habilidades b\u00e1sicas, el plugin se encarga de toda la configuraci\u00f3n compleja que se requiere al implementar un nuevo bloque.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-1-instala-el-plugin-genesis-block\"><b>Paso 1: Instala el Plugin Genesis Block<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Primero lo primero: dir\u00edgete al directorio de plugins de WordPress e instala el <\/span><a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plugin Genesis Custom Block<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">(Recuerda activarlo desde la pesta\u00f1a de plugins en tu panel administrativo de WordPress)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-2-anade-un-nuevo-bloque\"><b>Paso 2: A\u00f1ade un Nuevo Bloque<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez que ha sido instalado y activado, deber\u00edas ver una nueva opci\u00f3n en el men\u00fa izquierdo de navegaci\u00f3n en tu panel de WordPress.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Haz clic en B<\/span><span style=\"font-weight: 400;\"><b>loques Personalizados &gt; A\u00f1adir Nuevo&nbsp;<\/b><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-3-personaliza-los-campos-del-editor\"><b>Paso 3: Personaliza Los Campos del Editor<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora, estamos listos para comenzar a construir el bloque personalizado.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">El primer paso ser\u00e1 configurar los campos y opciones de personalizaci\u00f3n que aparecer\u00e1n cuando est\u00e1s utilizando el bloque en tu sitio.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"659\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis.jpg\" alt=\"Creando un nuevo bloque personalizado con el Plugin Genesis\" class=\"wp-image-41470 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-730x535.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Nuevo-bloque-personalizado-WordPress-Plugin-Genesis-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/659;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Puedes pensar en esto como una miniversi\u00f3n del editor de bloque mismo. A\u00f1adir\u00e1s campos personalizados y datos que ser\u00e1n completados previamente por el propio bloque o recopilados por el editor o el usuario que agrega el bloque a una p\u00e1gina o publicaci\u00f3n.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, si est\u00e1s construyendo un bloque personalizado de (CTA), ver\u00e1s campos como:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Texto de T\u00edtulo<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Texto de Subt\u00edtulo<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Texto de bot\u00f3n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">URL de Bot\u00f3n CTA<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Cada campo tendr\u00e1 una etiqueta, nombre y tipo. Puedes incluso personalizar el ancho o a\u00f1adir texto de ayuda, para hacer que sea m\u00e1s f\u00e1cil de usar para los editores o escritores.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-4-personaliza-el-marcado-y-el-css\"><b>Paso 4: Personaliza el Marcado y el CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora que hemos configurado el back end del bloque, necesitamos decirle a WordPress c\u00f3mo mostrar el contenido que est\u00e1 siendo a\u00f1adido.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed es donde ser\u00e1 \u00fatil cualquier conocimiento previo de HTML o CSS.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"659\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Marcado-CSS-Personalizado.jpg\" alt=\"Personalizando el marcado y CSS \" class=\"wp-image-41471 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Marcado-CSS-Personalizado.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Marcado-CSS-Personalizado-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Marcado-CSS-Personalizado-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Marcado-CSS-Personalizado-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Marcado-CSS-Personalizado-730x535.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Marcado-CSS-Personalizado-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Marcado-CSS-Personalizado-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/659;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">En este paso, esencialmente estar\u00e1s escribiendo el bloque de c\u00f3digo que ser\u00e1 generado din\u00e1micamente desde las entradas configuradas para el editor en bloque.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Puedes escribir esto en c\u00f3digo simple HTML y CSS.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes extraer variables en el editor de bloque usando corchetes dobles y el campo del nombre (slug) desde el editor. (eje, \u201c{{button-text}}\u201d)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-5-anade-el-bloque\"><b>Paso 5: A\u00f1ade el Bloque<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez que has configurado el bloque utilizando el plugin Genesis, deber\u00eda aparecer en la lista de bloques disponibles en el Editor de WordPress Gutenberg.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Simplemente, haz clic en el bot\u00f3n \u2018<\/span><strong>+<\/strong><span style=\"font-weight: 400;\"><strong>\u2019<\/strong> y luego encuentra el nuevo bloque por su nombre.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez a\u00f1adido, deber\u00edas ver la pantalla de edici\u00f3n del bloque de Gutenberg con los campos y opciones que configuraste.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00a1Y listo!&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora puedes usar tu bloque personalizado, a\u00f1adirlo a p\u00e1ginas, publicaciones, barras laterales o donde sea que lo necesites.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-como-crear-bloques-personalizados-de-wordpress-sin-un-plugin\" class=\"wp-block-heading\"><strong><a id=\"noplugin\"><\/a>C\u00f3mo Crear Bloques Personalizados de WordPress Sin Un Plugin<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Si quieres adentrarte un poco m\u00e1s y realmente aprender a crear nuevos bloques desde cero, necesitar\u00e1s un poco m\u00e1s de conocimiento.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En este tutorial, te mostraremos los pasos b\u00e1sicos para utilizar la <\/span><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">herramienta Create-Block<\/span><\/a><span style=\"font-weight: 400;\"> que te permitir\u00e1n generar bloques completos y personalizados sin tener que emplear un plugin.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Advertencia justa: Este es un flujo de trabajo avanzado. Esto requerir\u00e1 que interact\u00faes con la l\u00ednea de comandos.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Tendr\u00e1s que entender PHP, JavaScript, HTML y CSS.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00a1No digas que no te lo advertimos!&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-1-configura-node-js-npm-y-una-instalacion-local-de-wordpress\"><strong>Paso #1: Configura Node.js, NPM, y Una Instalaci\u00f3n Local de WordPress<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Antes de que podamos usar create-block, necesitaremos tener la configuraci\u00f3n y el acceso correcto.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed est\u00e1n los prerrequisitos:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Una instalaci\u00f3n local de WordPress<\/span><\/a><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Terminal o un programa de l\u00ednea de comando configurado<\/span><\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Node.js y npm<\/span><\/a><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes usar <\/span><a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">nvm<\/span><\/a><span style=\"font-weight: 400;\"> (Node version manager) para instalar o actualizar una versi\u00f3n compatible de Node.js.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En nuestro caso, usaremos el comando de NPM, \u201cnpx\u201d para ejecutar el paquete \u2018create-block\u2019 directamente del directorio donde se encuentra almacenado en la nube.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-2-ejecuta-el-paquete-create-block\"><b>Paso #2: Ejecuta el Paquete<\/b> <b>Create-block<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora, el paso f\u00e1cil.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Desde el terminal, navega al directorio \u2018<\/span><span style=\"font-weight: 400;\">\/wp-content\/plugins<\/span><span style=\"font-weight: 400;\">\u2019 de tu sitio web en tu m\u00e1quina local.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Luego ejecuta el paquete create-block utilizando NPX:&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"390\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Paquete-create-block.jpg\" alt=\"Ejecutando el paquete de instalaci\u00f3n Create-block\" class=\"wp-image-41473 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Paquete-create-block.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Paquete-create-block-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Paquete-create-block-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Paquete-create-block-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Paquete-create-block-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Paquete-create-block-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Paquete-create-block-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/390;\" \/><\/figure><\/div>\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-family: terminal, monaco, monospace;\"><span style=\"font-weight: 400;\">npx @wordpress\/create-block {{nombre-del-bloque}}<\/span><\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Este paquete se ejecutar\u00e1 a trav\u00e9s del proceso de configuraci\u00f3n que es conocido como el \u201cblock scaffolding\u201d. Registrar\u00e1 todos los elementos relevantes, configurar\u00e1 la estructura correcta de archivos y directorios, y generar\u00e1 el c\u00f3digo predeterminado para que el bloque completo sea utilizable y editable.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-3-activa-el-plugin\"><b>Paso #3: Activa el Plugin<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">El nuevo bloque tomar\u00e1 la forma de un plugin.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez que el paquete create-block est\u00e1 completo, querr\u00e1s regresar al panel de WordPress.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Dir\u00edgete a la p\u00e1gina de Plugins y activa el nuevo plugin que se cre\u00f3, el cual deber\u00eda tener el nombre del bloque que usaste en tu comando npx.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-4-personaliza-el-codigo-de-bloque\"><b>Paso #4: Personaliza el C\u00f3digo de Bloque<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Personalizar\u00e1s el contenido y las funciones del bloque desde la carpeta <\/span><b>\/src\/ <\/b><span style=\"font-weight: 400;\">dentro del directorio de plugins.&nbsp;<\/span><\/p>\n\n\n\n<p><b>Index.js<\/b><span style=\"font-weight: 400;\"> es donde registrar\u00e1s el bloque y programar\u00e1s el resultado principal:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"490\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Personalizando-codigo-de-bloque.jpg\" alt=\"Personalizando el c\u00f3digo del nuevo bloque \" class=\"wp-image-41472 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Personalizando-codigo-de-bloque.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Personalizando-codigo-de-bloque-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Personalizando-codigo-de-bloque-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Personalizando-codigo-de-bloque-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Personalizando-codigo-de-bloque-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Personalizando-codigo-de-bloque-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Personalizando-codigo-de-bloque-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/490;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Ten en cuenta que la funci\u00f3n registerBlockType est\u00e1 configurada para administrar para manejar tanto las entradas del editor de bloques (&#8220;<\/span><span style=\"font-weight: 400;\">editar<\/span><span style=\"font-weight: 400;\">&#8220;) como la pantalla frontal (&#8220;<\/span><span style=\"font-weight: 400;\">guardar<\/span><span style=\"font-weight: 400;\">&#8220;).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Esto solamente es la punta del iceberg de construir un bloque funcional.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Querr\u00e1s investigar m\u00e1s sobre la documentaci\u00f3n completa para escribir bloques funcionales usando el <\/span><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress Block API<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez que tengas a los conceptos b\u00e1sicos, puedes obtener dependencias adicionales, acceder a fuentes de datos externas y casi cualquier otra cosa que desees.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-5-anade-el-bloque-desde-el-editor-de-gutenberg\"><b>Paso #5: A\u00f1ade el Bloque Desde el Editor de Gutenberg<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Con el plugin activado, puedes a\u00f1adir tu bloque a cualquier p\u00e1gina o publicaci\u00f3n desde el editor Gutenberg.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Accede a \u00e9l utilizando el bot\u00f3n \u2018<\/span><b>+<\/b><span style=\"font-weight: 400;\">\u2019 o el comando \u201c\/\u201d, como con cualquier otro bloque.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-el-cielo-es-el-limite\" class=\"wp-block-heading\"><b><a id=\"cierre\"><\/a>El Cielo es el L\u00edmite<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bueno, fuimos de lo b\u00e1sico a lo avanzado con esta gu\u00eda, pero las buenas noticias son que ahora ser\u00e1s imparable.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Entre las opciones predeterminadas de bloque, el plugin Genesis, y la habilidad de construir tus propios bloques desde cero \u2014 \u00a1no hay nada que no puedas lograr!&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Y, ya que los bloques son tan incre\u00edblemente poderosos y flexibles, hay muy pocas cosas que no puedas construir. Tu sitio WordPress ahora tiene funciones casi infinitas, y puedes crear el sitio, aplicaci\u00f3n o proyecto de tus sue\u00f1os.<\/span><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Las actualizaciones autom\u00e1ticas de DreamPress, cach\u00e9 y fuertes defensas de seguridad toman la administraci\u00f3n de WordPress de tus manos para que puedas enfocarte en tu sitio web\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/administrado\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Adquiere Tu Plan Hoy                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>\u00bfUstedes creen que este es un espacio extra\u00f1o para mencionar que mi esposa se est\u00e1 aferrando a un kit de Star Wars de Lego, edici\u00f3n limitada, sin abrir, en su caja original de BB-8? \u00a1Cuesta al rededor de $500 USD! Okay. S\u00ed ser\u00eda raro. Entend\u00ed el mensaje claro y conciso\u2026 Pero les prometo que todo [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Los bloques de WordPress son uno de los cambios m\u00e1s significativos en el CMS. Aprende c\u00f3mo funcionan y c\u00f3mo puedes personalizarlos para ti.","toc_headlines":"[[\"h-que-son-los-bloques-de-wordpress\",\"\u00bfQu\u00e9 Son los Bloques de WordPress?\"],[\"h-que-bloques-tiene-wordpress-ahora-nbsp\",\"\u00bfQu\u00e9 Bloques Tiene WordPress Ahora?\u00a0\"],[\"h-como-crear-bloques-personalizados-con-un-plugin-de-wordpress\",\"C\u00f3mo Crear Bloques Personalizados Con un Plugin de WordPress\"],[\"h-como-crear-bloques-personalizados-de-wordpress-sin-un-plugin\",\"C\u00f3mo Crear Bloques Personalizados de WordPress Sin Un Plugin\"],[\"h-el-cielo-es-el-limite\",\"El Cielo es el L\u00edmite\"]]","hide_toc":false,"footnotes":""},"categories":[12896,11683],"tags":[],"class_list":["post-41465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-wordpress-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo Usar Bloques de WordPress - DreamHost<\/title>\n<meta name=\"description\" content=\"Los bloques de WordPress son uno de los cambios m\u00e1s significativos en el CMS. Aprende c\u00f3mo funcionan y c\u00f3mo puedes personalizarlos para ti.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Everything You Need To Know To Start Using WordPress Blocks\" \/>\n<meta property=\"og:description\" content=\"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T22:40:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Social-Image-1024x536.jpg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Everything You Need To Know To Start Using WordPress Blocks\" \/>\n<meta name=\"twitter:description\" content=\"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Usar Bloques de WordPress - DreamHost","description":"Los bloques de WordPress son uno de los cambios m\u00e1s significativos en el CMS. Aprende c\u00f3mo funcionan y c\u00f3mo puedes personalizarlos para ti.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Everything You Need To Know To Start Using WordPress Blocks","og_description":"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:10+00:00","article_modified_time":"2025-01-16T22:40:40+00:00","og_image":[{"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Social-Image-1024x536.jpg","type":"","width":"","height":""}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_title":"Everything You Need To Know To Start Using WordPress Blocks","twitter_description":"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"C\u00f3mo Usar Bloques de WordPress (+ \u00a1C\u00f3mo Crear los Tuyos!)","datePublished":"2023-08-10T14:00:10+00:00","dateModified":"2025-01-16T22:40:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/"},"wordCount":2379,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Dise\u00f1o Web","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/","name":"C\u00f3mo Usar Bloques de WordPress - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:10+00:00","dateModified":"2025-01-16T22:40:40+00:00","description":"Los bloques de WordPress son uno de los cambios m\u00e1s significativos en el CMS. Aprende c\u00f3mo funcionan y c\u00f3mo puedes personalizarlos para ti.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-usar-bloques-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Usar Bloques de WordPress (+ \u00a1C\u00f3mo Crear los Tuyos!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"es","translations":{"es":41465,"en":41438,"de":52846,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"it":68363,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=41465"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41465\/revisions"}],"predecessor-version":[{"id":63479,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41465\/revisions\/63479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=41465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=41465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=41465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}