{"id":4646,"date":"2026-09-30T07:04:00","date_gmt":"2026-09-30T12:04:00","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=4646"},"modified":"2026-09-29T22:06:24","modified_gmt":"2026-09-30T03:06:24","slug":"como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/","title":{"rendered":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg"},"content":{"rendered":"\n

Hace varios a\u00f1os desarroll\u00e9 dos plugins para WordPress: JS Archive List<\/a> y JS Categories List<\/a>. Ambos nacieron cuando los widgets de WordPress se desarrollaban pr\u00e1cticamente por completo en PHP: creabas una clase, extend\u00edas WP_Widget<\/em>, generabas el formulario de configuraci\u00f3n y, finalmente, renderizabas el HTML. Funcionaba bastante bien, pero WordPress ha cambiado mucho desde la llegada de Gutenberg. As\u00ed que decid\u00ed migrar ambos plugins para que pudieran utilizarse como un bloque de Gutenberg. En el caso de JS Categories List, ocurri\u00f3 desde la versi\u00f3n 4.0 y en JS Archive List desde la versi\u00f3n 5<\/a>.0<\/a>, manteniendo adem\u00e1s el widget anterior en PHP por compatibilidad con instalaciones existentes.<\/p>\n\n\n\n

Lo interesante de esta migraci\u00f3n no fue solo aprender a crear un bloque. Tambi\u00e9n me hizo ver, de una forma diferente, c\u00f3mo ha evolucionado WordPress.<\/p>\n\n\n\n

\"Se
Se acabaron los tiempos de plugins 100% hechos en PHP, ahora es bloque de Gutenberg en JS (React) + PHP<\/figcaption><\/figure>\n\n\n\n

De widgets en PHP a una interfaz en React<\/h2>\n\n\n\n

Un widget cl\u00e1sico de WordPress normalmente hac\u00eda casi todo en PHP. Por ejemplo, ten\u00edamos algo parecido a esto:<\/p>\n\n\n\n

class My_Widget extends WP_Widget {\n\n    public function widget( $args, $instance ) {\n        \/\/ Obtener datos.\n        \/\/ Generar HTML.\n        \/\/ Mostrar el widget.\n    }\n\n    public function form( $instance ) {\n        \/\/ Formulario de configuraci\u00f3n.\n    }\n}\n<\/code><\/pre>\n\n\n\n
El formulario que ve\u00eda el administrador, la configuraci\u00f3n y el HTML final estaban muy ligados entre s\u00ed. Con Gutenberg la separaci\u00f3n es diferente. Ahora puedes tener PHP encarg\u00e1ndose de los datos y del renderizado mientras que el editor utiliza JavaScript y React para construir la interfaz de configuraci\u00f3n.<\/p>\n\n\n\n
Por esta raz\u00f3n, siento que WordPress cada vez se siente m\u00e1s como un CMS que ofrece servicios y APIs en PHP<\/strong>, mientras que diferentes interfaces consumen esos servicios.<\/p>\n\n\n\n
Gutenberg es probablemente el mejor ejemplo, porque el editor trabaja con entidades como posts, p\u00e1ginas, usuarios o t\u00e9rminos mediante @wordpress\/core-data<\/code>Que internamente puede procesar los datos mediante las APIs de WordPress.<\/p>\n\n\n\n
PHP no desapareci\u00f3. Simplemente ya no tiene que encargarse de toda la interfaz.<\/p>\n\n\n\n
\u00bfC\u00f3mo comenzar un bloque de Gutenberg?<\/h2>\n\n\n\n
WordPress posee una herramienta oficial llamada @wordpress\/create-block<\/code> que genera la estructura inicial de un plugin con un bloque, incluyendo JavaScript, PHP, CSS y la configuraci\u00f3n necesaria para compilar todo. Puedes crear uno ejecutando:<\/p>\n\n\n\n
npx @wordpress\/create-block@latest my-block --namespace=my-plugin\n<\/code><\/pre>\n\n\n\n
Luego:<\/p>\n\n\n\n
cd my-block\nnpm start\n<\/code><\/pre>\n\n\n\n
Aunque est\u00e9s migrando un plugin existente, te recomiendo ejecutar este comando al menos una vez. Es una forma sencilla de entender cu\u00e1l es la estructura recomendada actualmente por WordPress.<\/p>\n\n\n\n
Entre los archivos encontrar\u00e1s uno particularmente importante:<\/p>\n\n\n\n
block.json\n<\/code><\/pre>\n\n\n\n
Este archivo contiene la definici\u00f3n del bloque: nombre, atributos, scripts, estilos y dem\u00e1s metadatos. Por ejemplo:<\/p>\n\n\n\n
{\n    \"apiVersion\": 3,\n    \"name\": \"my-plugin\/archive-list\",\n    \"title\": \"Archive List\",\n    \"category\": \"widgets\",\n    \"attributes\": {\n        \"showCount\": {\n            \"type\": \"boolean\",\n            \"default\": false\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
WordPress actualmente recomienda registrar los bloques utilizando esta metadata y register_block_type()<\/code> Desde PHP se hace asi:<\/p>\n\n\n\n
add_action( 'init', function() {\n    register_block_type( __DIR__ . '\/build' );\n} );\n<\/code><\/pre>\n\n\n\n
Con eso PHP conoce nuestro bloque y WordPress puede cargar los scripts y estilos necesarios.<\/p>\n\n\n\n
La configuraci\u00f3n del bloque de Gutenberg ahora vive en React<\/h2>\n\n\n\n
En un widget cl\u00e1sico, las opciones se constru\u00edan con inputs HTML generados en PHP. En un bloque de Gutenberg puedes crear esa interfaz con los componentes que ya ofrece WordPress. Por ejemplo:<\/p>\n\n\n\n
import { InspectorControls } from '@wordpress\/block-editor';\nimport {\n    PanelBody,\n    ToggleControl\n} from '@wordpress\/components';\n\nexport default function Edit({ attributes, setAttributes }) {\n    return (\n        <InspectorControls>\n            <PanelBody title=\"Options\">\n                <ToggleControl\n                    label=\"Show post count\"\n                    checked={ attributes.showCount }\n                    onChange={ ( value ) =>\n                        setAttributes({ showCount: value })\n                    }\n                \/>\n            <\/PanelBody>\n        <\/InspectorControls>\n    );\n}\n<\/code><\/pre>\n\n\n\n
De esta forma, Gutenberg se encarga de gran parte de la experiencia del editor y nosotros solo debemos definir qu\u00e9 opciones necesita nuestro bloque.<\/p>\n\n\n\n
En mis plugins esto reemplaz\u00f3 buena parte de los formularios que antes ten\u00eda que generar manualmente desde PHP.<\/p>\n\n\n\n
Consumir los datos de WordPress desde el bloque de Gutenberg<\/h2>\n\n\n\n
Otra parte interesante es que no necesariamente tienes que crear tus propios endpoints para obtener informaci\u00f3n que WordPress ya conoce. Desde el editor puedes consultar entidades utilizando core-data<\/code>. Por ejemplo, para obtener p\u00e1ginas puedes utilizar:<\/p>\n\n\n\n
import { useEntityRecords } from '@wordpress\/core-data';\n\nconst { records, isResolving } = useEntityRecords(\n    'postType',\n    'page'\n);\n<\/code><\/pre>\n\n\n\n
WordPress se encarga de resolver la petici\u00f3n, de mantener los datos en su store y de entregarlos al componente. En un plugin como JS Categories List, el mismo concepto permite trabajar con taxonom\u00edas y categor\u00edas desde la interfaz del bloque, sin tener que imprimir previamente toda esa informaci\u00f3n en el HTML generado por PHP.<\/p>\n\n\n\n
Eso tambi\u00e9n tiene otra ventaja, la nueva versi\u00f3n de mis plugins puede leer la informaci\u00f3n din\u00e1micamente y cargar JavaScript y CSS solamente cuando realmente existe un bloque o widget en la p\u00e1gina, en lugar de cargar recursos innecesariamente en todo el sitio.<\/p>\n\n\n\n
No tienes que reescribir todo tu PHP<\/h2>\n\n\n\n
Esta fue una de las cosas que pens\u00e9 inicialmente que ser\u00edan m\u00e1s complicadas.<\/p>\n\n\n\n
Migrar a un bloque de Gutenberg no significa necesariamente convertir todo el plugin a JavaScript<\/strong>. Puedes crear un bloque din\u00e1mico y continuar renderizando su contenido desde PHP, por ejemplo, block.json<\/code> puede indicar:<\/p>\n\n\n\n
{\n    \"render\": \"file:.\/render.php\"\n}\n<\/code><\/pre>\n\n\n\n
Y dentro de render.php<\/code> Puedes reutilizar buena parte de la l\u00f3gica que ya ten\u00eda tu antiguo widget, permitiendo tener una migraci\u00f3n m\u00e1s progresiva:<\/p>\n\n\n\n
<?php\n\n$show_count = $attributes['showCount'] ?? false;\n\necho my_old_archive_render_function(\n    $show_count\n);\n<\/code><\/pre>\n\n\n\n
La interfaz del editor puede estar hecha con React, mientras que el frontend todav\u00eda utiliza funciones PHP que llevan a\u00f1os funcionando. Los bloques din\u00e1micos est\u00e1n dise\u00f1ados precisamente para casos donde el contenido debe calcularse al momento de renderizar la p\u00e1gina, y WordPress permite hacerlo mediante un archivo render.php<\/code> o un render_callback<\/code>.<\/p>\n\n\n\n
En mi caso, esto fue bastante \u00fatil porque no ten\u00eda sentido reescribir c\u00f3digo estable solamente por utilizar Gutenberg.<\/p>\n\n\n\n
Mantener el antiguo widget  por retrocompatibilidad<\/h2>\n\n\n\n
Tambi\u00e9n decid\u00ed no eliminar de inmediato los widgets anteriores. Tanto JS Archive List como JS Categories List mantienen una versi\u00f3n legacy en PHP para instalaciones que todav\u00eda la utilizan, mientras que el desarrollo nuevo est\u00e1 enfocado en el bloque Gutenberg.<\/p>\n\n\n\n
Creo que esta es una buena estrategia para plugins que llevan muchos a\u00f1os publicados. Puedes modernizar el c\u00f3digo sin afectar las instalaciones de los usuarios que configuraron el widget hace m\u00e1s de cinco a\u00f1os. Ya con el tiempo puedes dejar la implementaci\u00f3n antigua \u00fanicamente en modo de mantenimiento.<\/p>\n\n\n\n
WordPress es bastante diferente ahora<\/h2>\n\n\n\n
Despu\u00e9s de hacer esta migraci\u00f3n, creo que desarrollar para WordPress actualmente se parece bastante menos al WordPress con el que comenc\u00e9 hace a\u00f1os.<\/p>\n\n\n\n
PHP contin\u00faa siendo una parte fundamental, pero ahora tenemos una capa de APIs, bases de datos, componentes y una interfaz escrita en React.<\/p>\n\n\n\n
En lugar de pensar:<\/p>\n\n\n\n
\u201cTengo que crear una p\u00e1gina PHP para configurar esto.\u201d<\/strong><\/p>\n\n\n\n
Cada vez pienso m\u00e1s:<\/p>\n\n\n\n
\u201c\u00bfQu\u00e9 datos o servicios debe proporcionar WordPress y c\u00f3mo los va a consumir la interfaz?\u201d<\/strong><\/p>\n\n\n\n
Ese cambio de mentalidad hace que Gutenberg tenga mucho m\u00e1s sentido. As\u00ed que si tienes un plugin antiguo basado en WP_Widget<\/code>, no necesitas reescribirlo por completo de una vez. Puedes comenzar creando un bloque, mover las opciones del formulario a React y reutilizar tu c\u00f3digo PHP para el renderizado. Luego moderniza el resto poco a poco. <\/p>\n\n\n\n
Para empezar y entender c\u00f3mo funciona todo, crea primero un bloque vac\u00edo con @wordpress\/create-block<\/code>, ejecuta npm start<\/code> Y comienza a modificarlo. Es probablemente la forma m\u00e1s r\u00e1pida de dejar de ver Gutenberg como algo extra\u00f1o y comenzar a verlo simplemente como la nueva interfaz de desarrollo de WordPress.<\/p>\n\n\n\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hace varios a\u00f1os desarroll\u00e9 dos plugins para WordPress: JS Archive List y JS Categories List. Ambos nacieron cuando los widgets de WordPress se desarrollaban pr\u00e1cticamente…<\/p>\n
Seguir leyendoC\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":7679,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[549,716,892,1256,582,1017],"tags":[1225,220,87,599,479],"class_list":["post-4646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-todo-lo-relacionado-al-desarrollo-de-software","category-javascript-todo-lo-relacionado-al-desarrollo-de-software","category-php","category-planetas-linux","category-wordpress","tag-gutenberg","tag-php","tag-plugin","tag-widget","tag-wordpress","entry"],"yoast_head":"\nC\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg<\/title>\n<meta name=\"description\" content=\"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress\" \/>\n<meta property=\"og:url\" content=\"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Skatox\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-30T12:04:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1717\" \/>\n\t<meta property=\"og:image:height\" content=\"916\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Miguel Useche\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@skatox\" \/>\n<meta name=\"twitter:site\" content=\"@skatox\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Miguel Useche\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/\"},\"author\":{\"name\":\"Miguel Useche\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\"},\"headline\":\"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg\",\"datePublished\":\"2026-09-30T12:04:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/\"},\"wordCount\":1150,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2026\\\/09\\\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif\",\"keywords\":[\"gutenberg\",\"php\",\"plugin\",\"widget\",\"wordpress\"],\"articleSection\":[\"Desarrollo web\",\"Desarrollo y Programaci\u00f3n\",\"Javascript\",\"PHP\",\"Planetas\",\"WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/\",\"name\":\"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2026\\\/09\\\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif\",\"datePublished\":\"2026-09-30T12:04:00+00:00\",\"description\":\"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2026\\\/09\\\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2026\\\/09\\\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif\",\"width\":1717,\"height\":916,\"caption\":\"Ilustraci\u00f3n de desarrollo de software con c\u00f3digo, engranajes, flujos de datos y una interfaz de dise\u00f1o conectados\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2026\\\/09\\\/30\\\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"name\":\"El blog de Skatox\",\"description\":\"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres\",\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/skatox.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\",\"name\":\"El blog de Skatox\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"width\":218,\"height\":218,\"caption\":\"El blog de Skatox\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ElWeblogdeSkatox\\\/\",\"https:\\\/\\\/x.com\\\/skatox\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/skatox\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/MiguelAngelUsecheCastro\",\"https:\\\/\\\/x.com\\\/skatox\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\",\"name\":\"Miguel Useche\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945\",\"caption\":\"Miguel Useche\"},\"sameAs\":[\"https:\\\/\\\/skatox.com\",\"https:\\\/\\\/x.com\\\/skatox\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg","description":"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress","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:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg","og_description":"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress","og_url":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/","og_site_name":"El blog de Skatox","article_publisher":"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","article_published_time":"2026-09-30T12:04:00+00:00","og_image":[{"width":1717,"height":916,"url":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","type":"image\/png"}],"author":"Miguel Useche","twitter_card":"summary_large_image","twitter_creator":"@skatox","twitter_site":"@skatox","twitter_misc":{"Escrito por":"Miguel Useche","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#article","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/"},"author":{"name":"Miguel Useche","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba"},"headline":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg","datePublished":"2026-09-30T12:04:00+00:00","mainEntityOfPage":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/"},"wordCount":1150,"commentCount":0,"publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"image":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","keywords":["gutenberg","php","plugin","widget","wordpress"],"articleSection":["Desarrollo web","Desarrollo y Programaci\u00f3n","Javascript","PHP","Planetas","WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/","url":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/","name":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","datePublished":"2026-09-30T12:04:00+00:00","description":"Aprende como puedes migrar un widget o shortcode existente a un bloque del editor Gutenberg que viene inclu\u00eddo en WordPress","breadcrumb":{"@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#primaryimage","url":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","contentUrl":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","width":1717,"height":916,"caption":"Ilustraci\u00f3n de desarrollo de software con c\u00f3digo, engranajes, flujos de datos y una interfaz de dise\u00f1o conectados"},{"@type":"BreadcrumbList","@id":"https:\/\/skatox.com\/blog\/2026\/09\/30\/como-migrar-un-widget-de-wordpress-a-un-bloque-de-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/skatox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo migrar un widget de WordPress a un bloque de Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/skatox.com\/blog\/#website","url":"https:\/\/skatox.com\/blog\/","name":"El blog de Skatox","description":"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres","publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/skatox.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/skatox.com\/blog\/#organization","name":"El blog de Skatox","url":"https:\/\/skatox.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","contentUrl":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","width":218,"height":218,"caption":"El blog de Skatox"},"image":{"@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","https:\/\/x.com\/skatox","https:\/\/www.linkedin.com\/in\/skatox\/","https:\/\/www.youtube.com\/c\/MiguelAngelUsecheCastro","https:\/\/x.com\/skatox\/"]},{"@type":"Person","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba","name":"Miguel Useche","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945","url":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945","contentUrl":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1790302945","caption":"Miguel Useche"},"sameAs":["https:\/\/skatox.com","https:\/\/x.com\/skatox"]}]}},"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4651,"url":"https:\/\/skatox.com\/blog\/2023\/06\/05\/js-categories-list-4-0\/","url_meta":{"origin":4646,"position":0},"title":"JS Categories List 4.0","author":"Miguel Useche","date":"5 de junio de 2023","format":false,"excerpt":"Luego de 7 a\u00f1os tuve la oportunidad de dedicarle tiempo a mi plugin JS Categories List y poder actualizarlo para que est\u00e9 al d\u00eda respecto a los est\u00e1ndares de WordPress y de la web en general. El plugin muestra un listado de categor\u00edas expandibles Durante este tiempo WordPress a\u00f1adi\u00f3 Gutenberg,\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2023\/06\/screenshot-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4460,"url":"https:\/\/skatox.com\/blog\/2022\/06\/07\/js-archive-list-5-0\/","url_meta":{"origin":4646,"position":1},"title":"JS Archive List 5.0","author":"Miguel Useche","date":"7 de junio de 2022","format":false,"excerpt":"Luego de mas de 3 a\u00f1os sin poder dedicar tiempo a mi primer plugin de WordPress: JS Archive List. Finalmente he conseguido trabajar en \u00e9l y lanzar una nueva versi\u00f3n. La idea era actualizarlo a las \u00faltimas tecnolog\u00edas, realizar mantenimiento y correcci\u00f3n de errores. Nuevo nombre: JS Archive List Widget\u2026","rel":"","context":"En \u00abPlanetas\u00bb","block_context":{"text":"Planetas","link":"https:\/\/skatox.com\/blog\/category\/planetas-linux\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6173,"url":"https:\/\/skatox.com\/blog\/2026\/02\/23\/js-archive-li-actualizacion-seguridad\/","url_meta":{"origin":4646,"position":2},"title":"JS Archive List 6.2.0: actualizaci\u00f3n de seguridad, limpieza de i18n y m\u00e1s pruebas automatizadas","author":"Miguel Useche","date":"23 de febrero de 2026","format":false,"excerpt":"Hay actualizaciones \u201ccosm\u00e9ticas\u201d y otras de urgencia, con un enfoque en la calidad, porque resuelven problemas que surgen en producci\u00f3n. La versi\u00f3n 6.2.0 de JS Archive List se clasifica en la segunda categor\u00eda. En la secci\u00f3n de changelog de WordPress, el foco est\u00e1 clar\u00edsimo: es una actualizaci\u00f3n de seguridad y\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif","width":350,"height":200,"srcset":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1.5x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 2x"},"classes":[]},{"id":5318,"url":"https:\/\/skatox.com\/blog\/2025\/11\/28\/como-corregi-una-vulnerabilidad-en-mi-plugin-js-archive-list-tras-un-reporte-de-wordfence\/","url_meta":{"origin":4646,"position":3},"title":"C\u00f3mo correg\u00ed una vulnerabilidad en mi plugin JS Archive List tras un reporte de WordFence","author":"Miguel Useche","date":"28 de noviembre de 2025","format":false,"excerpt":"JS Archive List es un plugin que cre\u00e9 hace m\u00e1s de una d\u00e9cada para mostrar archivos de entradas de WordPress en un formato m\u00e1s limpio y din\u00e1mico usando JavaScript (inicialmente era con JQuery). Pues hace unas semanas recib\u00ed un correo de un grupo de hackers y del equipo de Wordfence\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif","width":350,"height":200,"srcset":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1.5x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 2x"},"classes":[]},{"id":2056,"url":"https:\/\/skatox.com\/blog\/2010\/12\/07\/jquery-categories-list\/","url_meta":{"origin":4646,"position":4},"title":"jQuery Categories List","author":"Miguel Useche","date":"7 de diciembre de 2010","format":false,"excerpt":"Este es mi segundo plugin para Wordpress, creado por solicitud de varios usuarios quienes pidieron tener un plugin similar a jQuery Archive List pero para mostrar las categor\u00edas de un blog. B\u00e1sicamente es el mismo plugin a diferencia que muestra las categor\u00edas y la configuraci\u00f3n es un poco distinta. Entre\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2053,"url":"https:\/\/skatox.com\/blog\/2010\/11\/26\/actualizacion-de-mi-plugin-jquery-archive-list-widget-para-wordpress\/","url_meta":{"origin":4646,"position":5},"title":"Actualizaci\u00f3n de mi plugin jQuery Archive List Widget para WordPress","author":"Miguel Useche","date":"26 de noviembre de 2010","format":false,"excerpt":"Luego de 11 meses sin prestarle atenci\u00f3n, esta semana decid\u00ed dedicarle un tiempo a mejorar este plugin de Wordpress. Me d\u00ed cuenta que ten\u00eda sugerencia por parte de algunos usuarios para agregar caracter\u00edsticas, mejorar unas existentes y otras cosas que ten\u00eda en mente. Al revisar me di cuenta de la\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_featured_media_url":"https:\/\/skatox.com\/blog\/images\/2026\/09\/ilustracion-de-desarrollo-de-software-con-codigo-engranajes-flujos-de.avif","_links":{"self":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/4646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/comments?post=4646"}],"version-history":[{"count":0,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/4646\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/media\/7679"}],"wp:attachment":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/media?parent=4646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/categories?post=4646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/tags?post=4646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}