{"id":1875,"date":"2024-08-19T07:56:15","date_gmt":"2024-08-19T05:56:15","guid":{"rendered":"https:\/\/asgru.com\/?p=1875"},"modified":"2026-09-14T03:20:25","modified_gmt":"2026-09-14T01:20:25","slug":"creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1","status":"publish","type":"post","link":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/","title":{"rendered":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1"},"content":{"rendered":"\n

Con esta serie de materiales pr\u00e1cticos, quiero mostrarte hasta d\u00f3nde ha llegado el desarrollo con WordPress. En 2024, un desarrollador de WordPress es principalmente un desarrollador frontend que debe tener un s\u00f3lido conocimiento de HTML\/CSS, React, las particularidades de WordPress, as\u00ed como de PHP para escribir de forma independiente el backend de los bloques que crea. Adm\u00edtelo, pensabas que solo consist\u00eda en hacer clic en botones en Elementor, \u00bfverdad? \ud83d\ude42<\/p>\n\n\n\n

El editor de bloques de WordPress (Gutenberg) ha transformado significativamente el proceso de creaci\u00f3n y edici\u00f3n de contenido en sitios de WordPress, proporcionando a los desarrolladores potentes herramientas para crear bloques personalizables y funcionales. En esta gu\u00eda, crearemos nuestro propio componente de \u00ablista de tareas\u00bb que permite a los usuarios crear listas de tareas y enviar datos al servidor cuando cambia el estado de las tareas.<\/p>\n\n\n\n

Elementos b\u00e1sicos del bloque<\/h3>\n\n\n\n

El bloque que crearemos constar\u00e1 de varios elementos clave:<\/p>\n\n\n\n

    \n
  1. RichText<\/strong>: Un componente que permite a los usuarios introducir y editar texto dentro del bloque.<\/li>\n\n\n\n
  2. InspectorControls<\/strong>: Un panel que proporciona ajustes y controles para el bloque en el editor.<\/li>\n\n\n\n
  3. CheckboxControl<\/strong>: Un elemento de control utilizado para marcar tareas como completadas.<\/li>\n\n\n\n
  4. useState<\/strong>: Un hook que gestiona el estado de las tareas dentro del bloque.<\/li>\n\n\n\n
  5. fetch API<\/strong>: Se utiliza para enviar datos de las tareas al servidor.<\/li>\n<\/ol>\n\n\n\n

    Cada bloque se crea como un plugin independiente, que puede reutilizarse en otros proyectos de WordPress. Esto permite integrar f\u00e1cilmente el bloque creado en cualquier otro sitio que funcione con WordPress.<\/p>\n\n\n\n

    Configuraci\u00f3n del entorno de desarrollo<\/h3>\n\n\n\n

    Antes de empezar a crear el componente, es importante asegurarse de que el entorno de desarrollo est\u00e9 correctamente configurado. Necesitar\u00e1s las siguientes herramientas para desarrollar el bloque:<\/p>\n\n\n\n

      \n
    1. WordPress<\/strong>: Aseg\u00farate de que tu versi\u00f3n de WordPress sea 5.0 o superior, ya que el editor de bloques se introdujo en esta versi\u00f3n.<\/li>\n\n\n\n
    2. Node.js y npm<\/strong>: Necesarios para trabajar con JavaScript y gestionar dependencias.<\/li>\n\n\n\n
    3. WP-CLI<\/strong> (opcional): Una herramienta de l\u00ednea de comandos para trabajar con WordPress que puede simplificar el desarrollo.<\/li>\n<\/ol>\n\n\n\n

      Instalaci\u00f3n de Node.js y npm<\/h3>\n\n\n\n

      Si Node.js y npm a\u00fan no est\u00e1n instalados en tu ordenador, desc\u00e1rgalos e inst\u00e1lalos desde el sitio web oficial de Node.js.<\/p>\n\n\n\n

      Despu\u00e9s de la instalaci\u00f3n, ejecuta los siguientes comandos para comprobar que todo est\u00e9 instalado correctamente:<\/p>\n\n\n\n

      node -v\nnpm -v<\/code><\/pre>\n\n\n\n
      Si los comandos devuelven versiones, todo funciona correctamente.<\/p>\n\n\n\n
      Creaci\u00f3n del bloque de lista de tareas<\/h3>\n\n\n\n
      Para acelerar el proceso de creaci\u00f3n del bloque, puedes utilizar un comando que generar\u00e1 autom\u00e1ticamente toda la estructura del proyecto, incluidas las configuraciones y los archivos.<\/p>\n\n\n\n
      Paso 1: Creaci\u00f3n del bloque mediante un comando<\/h3>\n\n\n\n
      Abre tu terminal y ejecuta el siguiente comando para crear autom\u00e1ticamente el bloque de \u00ablista de tareas\u00bb:<\/p>\n\n\n\n
      npx @wordpress\/create-block@latest todo-list<\/code><\/pre>\n\n\n\n
      Este comando realizar\u00e1 los siguientes pasos por ti:<\/p>\n\n\n\n
        \n
      1. Inicializaci\u00f3n del proyecto:<\/strong> El comando crear\u00e1 un nuevo directorio llamado\u00a0todo-list, que contendr\u00e1 todos los archivos y la estructura necesarios para el bloque.<\/li>\n\n\n\n
      2. Instalaci\u00f3n de dependencias:<\/strong> Todos los paquetes necesarios, como\u00a0@wordpress\/scripts, se instalar\u00e1n autom\u00e1ticamente.<\/li>\n\n\n\n
      3. Creaci\u00f3n de la estructura de archivos:<\/strong> La estructura incluir\u00e1 las carpetas\u00a0src\u00a0y\u00a0build, as\u00ed como un archivo\u00a0index.js\u00a0con el c\u00f3digo b\u00e1sico del bloque.<\/li>\n\n\n\n
      4. Configuraci\u00f3n de <\/strong>block.json:\u00a0Este archivo se crear\u00e1 con la configuraci\u00f3n b\u00e1sica que define el bloque de \u00ablista de tareas\u00bb.<\/li>\n<\/ol>\n\n\n\n
        Estructura y descripci\u00f3n de los archivos<\/h3>\n\n\n\n
        Despu\u00e9s de ejecutar el comando, se crear\u00e1 la siguiente estructura de proyecto:<\/p>\n\n\n\n
        todo-list\/\n\u2502\n\u251c\u2500\u2500 src\/\n\u2502   \u2514\u2500\u2500 index.js\n\u2502\n\u251c\u2500\u2500 build\/\n\u2502\n\u251c\u2500\u2500 block.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n\n\n
        1. src\/index.js<\/h3>\n\n\n\n
        El archivo index.js de la carpeta src contiene todo el c\u00f3digo fuente de tu bloque. Aqu\u00ed se implementa la l\u00f3gica del bloque, incluido su aspecto y su interacci\u00f3n con el usuario. Las partes principales del c\u00f3digo incluyen el registro del bloque mediante la funci\u00f3n registerBlockType, la configuraci\u00f3n de atributos y la definici\u00f3n de las funciones para editar y guardar el bloque.<\/p>\n\n\n\n
        Contenido de ejemplo de index.js:<\/p>\n\n\n\n
        import { registerBlockType } from '@wordpress\/blocks';\nimport { useState } from '@wordpress\/element';\nimport { RichText, InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, CheckboxControl } from '@wordpress\/components';\n\nregisterBlockType('todo-plugin\/todo-list', {\n    title: 'Todo List',\n    icon: 'list-view',\n    category: 'widgets',\n    attributes: {\n        tasks: {\n            type: 'array',\n            default: [],\n        },\n    },\n    edit({ attributes, setAttributes }) {\n        const { tasks } = attributes;\n        const [taskText, setTaskText] = useState('');\n\n        const addTask = () => {\n            if (taskText) {\n                const newTasks = [...tasks, { text: taskText, done: false }];\n                setAttributes({ tasks: newTasks });\n                setTaskText('');\n                sendTasksToServer(newTasks);\n            }\n        };\n\n        const toggleTaskDone = (index) => {\n            const newTasks = tasks.map((task, i) =>\n                i === index ? { ...task, done: !task.done } : task\n            );\n            setAttributes({ tasks: newTasks });\n            sendTasksToServer(newTasks);\n        };\n\n        const sendTasksToServer = (tasks) => {\n            \/\/ Example of sending data to the server\n            fetch('\/wp-json\/todo\/v1\/update', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                },\n                body: JSON.stringify({ tasks }),\n            });\n        };\n\n        return (\n            <div>\n                <InspectorControls>\n                    <PanelBody title=\"Tasks\">\n                        {tasks.map((task, index) => (\n                            <CheckboxControl\n                                key={index}\n                                label={task.text}\n                                checked={task.done}\n                                onChange={() => toggleTaskDone(index)}\n                            \/>\n                        ))}\n                    <\/PanelBody>\n                <\/InspectorControls>\n                <div>\n                    <RichText\n                        tagName=\"p\"\n                        value={taskText}\n                        onChange={(text) => setTaskText(text)}\n                        placeholder=\"Enter new task\"\n                    \/>\n                    <button onClick={addTask}>Add Task<\/button>\n                <\/div>\n                <ul>\n                    {tasks.map((task, index) => (\n                        <li key={index}>\n                            <CheckboxControl\n                                label={task.text}\n                                checked={task.done}\n                                onChange={() => toggleTaskDone(index)}\n                            \/>\n                        <\/li>\n                    ))}\n                <\/ul>\n            <\/div>\n        );\n    },\n    save({ attributes }) {\n        const { tasks } = attributes;\n\n        return (\n            <ul>\n                {tasks.map((task, index) => (\n                    <li key={index}>\n                        <RichText.Content\n                            tagName=\"span\"\n                            value={task.text}\n                            style={{ textDecoration: task.done ? 'line-through' : 'none' }}\n                        \/>\n                    <\/li>\n                ))}\n            <\/ul>\n        );\n    },\n});<\/code><\/pre>\n\n\n\n
        2.\u00a0build<\/h3>\n\n\n\n
        La carpeta build est\u00e1 destinada a almacenar archivos compilados. Despu\u00e9s de compilar el proyecto mediante el comando npm run build, el archivo index.js listo para usar se colocar\u00e1 en esta carpeta, y WordPress lo utilizar\u00e1 para mostrar y operar el bloque.<\/p>\n\n\n\n
        3. block.json<\/h3>\n\n\n\n
        El archivo block.json contiene los metadatos de tu bloque. Define el nombre, la categor\u00eda, el icono, los scripts y los estilos necesarios para su funcionamiento. Este archivo es esencial para registrar el bloque en WordPress.<\/p>\n\n\n\n
        Contenido de ejemplo de block.json:<\/p>\n\n\n\n
        {\n  \"apiVersion\": 2,\n  \"name\": \"todo-plugin\/todo-list\",\n  \"title\": \"Todo List\",\n  \"category\": \"widgets\",\n  \"icon\": \"list-view\",\n  \"description\": \"A customizable todo list block.\",\n  \"keywords\": [ \"todo\", \"tasks\", \"list\" ],\n  \"version\": \"1.0.0\",\n  \"textdomain\": \"todo-list\",\n  \"editorScript\": \"file:.\/build\/index.js\"\n}<\/code><\/pre>\n\n\n\n
        4. package.json<\/h3>\n\n\n\n
        El archivo package.json contiene informaci\u00f3n sobre el proyecto y sus dependencias. Gestiona la instalaci\u00f3n y el uso de los paquetes necesarios para desarrollar y compilar el bloque. Este archivo se crea autom\u00e1ticamente durante la inicializaci\u00f3n del proyecto y se actualiza a medida que se a\u00f1aden nuevas dependencias.<\/p>\n\n\n\n
        Contenido de ejemplo de package.json:<\/p>\n\n\n\n
        {\n  \"name\": \"todo-list\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A custom block for todo list\",\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n  },\n  \"devDependencies\": {\n    \"@wordpress\/scripts\": \"^24.0.0\"\n  }\n}<\/code><\/pre>\n\n\n\n
        5. README.md<\/h3>\n\n\n\n
        El archivo README.md contiene una descripci\u00f3n del proyecto, instrucciones de instalaci\u00f3n y uso, y otra informaci\u00f3n importante que puedan necesitar los desarrolladores o los usuarios. Este archivo es \u00fatil para documentar el proyecto.<\/p>\n\n\n\n
        Compilaci\u00f3n del proyecto<\/h3>\n\n\n\n
        Despu\u00e9s de realizar cambios en el c\u00f3digo, compila el proyecto para obtener un archivo listo para usar en WordPress:<\/p>\n\n\n\n
        npm run build<\/pre>\n\n\n\n
        El comando build compilar\u00e1 tu c\u00f3digo y lo colocar\u00e1 en la carpeta build.<\/p>\n\n\n\n
        Registro del bloque en WordPress<\/h3>\n\n\n\n
        Ahora que el bloque est\u00e1 listo, debe registrarse en WordPress. Para ello, a\u00f1ade el siguiente c\u00f3digo a tu archivo de plugin o tema:<\/p>\n\n\n\n
        function todo_plugin_register_block() {\n    wp_register_script(\n        'todo-list-editor-script',\n        plugins_url( 'build\/index.js', __FILE__ ),\n        array( 'wp-blocks', 'wp-element', 'wp-editor' ),\n        filemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n    );\n\n    register_block_type( 'todo-plugin\/todo-list', array(\n        'editor_script' => 'todo-list-editor-script',\n    ) );\n}\nadd_action( 'init', 'todo_plugin_register_block' );<\/code><\/pre>\n\n\n\n
        Este c\u00f3digo registrar\u00e1 tu bloque en WordPress y pondr\u00e1 en cola el archivo JavaScript compilado.<\/p>\n\n\n\n
        Conclusi\u00f3n<\/h3>\n\n\n\n
        El uso del comando npx @wordpress\/create-block@latest acelera significativamente el proceso de creaci\u00f3n de un nuevo bloque para el editor de bloques de WordPress. En esta gu\u00eda, hemos visto c\u00f3mo crear un bloque de \u00ablista de tareas\u00bb que permite a los usuarios crear listas de tareas y gestionar su finalizaci\u00f3n, enviando los datos al servidor. Este componente puede ampliarse a\u00f1adiendo nuevas funciones y mejorando la interacci\u00f3n del usuario, lo que abre amplias posibilidades para personalizar tu sitio de WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Con esta serie de materiales pr\u00e1cticos, quiero mostrarte hasta d\u00f3nde ha llegado el desarrollo con WordPress. En 2024, un desarrollador de WordPress es principalmente un desarrollador frontend que debe tener un s\u00f3lido conocimiento de HTML\/CSS, React, las particularidades de WordPress, as\u00ed como de PHP para escribir de forma independiente el backend de los bloques que […]<\/p>\n","protected":false},"author":1,"featured_media":911,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\nCreaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru\" \/>\n<meta property=\"og:description\" content=\"Con esta serie de materiales pr\u00e1cticos, quiero mostrarte hasta d\u00f3nde ha llegado el desarrollo con WordPress. En 2024, un desarrollador de WordPress es principalmente un desarrollador frontend que debe tener un s\u00f3lido conocimiento de HTML\/CSS, React, las particularidades de WordPress, as\u00ed como de PHP para escribir de forma independiente el backend de los bloques que […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/\" \/>\n<meta property=\"og:site_name\" content=\"asgru\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/asgru.wp\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-19T05:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T01:20:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"asgru\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:site\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"asgru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/\"},\"author\":{\"name\":\"asgru\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\"},\"headline\":\"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:20:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/\"},\"wordCount\":1070,\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/\",\"name\":\"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:20:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"width\":2560,\"height\":1186},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/asgru.com\\\/es\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/asgru.com\\\/es\\\/\",\"name\":\"asgru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asgru.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#organization\",\"name\":\"asgru\",\"url\":\"https:\\\/\\\/asgru.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"caption\":\"asgru\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/asgru.wp\\\/\",\"https:\\\/\\\/x.com\\\/ArtemKondranin\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/asgru\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/asgru.com\\\/es\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\",\"name\":\"asgru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"caption\":\"asgru\"},\"sameAs\":[\"http:\\\/\\\/asgru.loc\"],\"url\":\"https:\\\/\\\/asgru.com\\\/es\\\/author\\\/asgru\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru","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:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/","og_locale":"es_ES","og_type":"article","og_title":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru","og_description":"Con esta serie de materiales pr\u00e1cticos, quiero mostrarte hasta d\u00f3nde ha llegado el desarrollo con WordPress. En 2024, un desarrollador de WordPress es principalmente un desarrollador frontend que debe tener un s\u00f3lido conocimiento de HTML\/CSS, React, las particularidades de WordPress, as\u00ed como de PHP para escribir de forma independiente el backend de los bloques que […]","og_url":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/","og_site_name":"asgru","article_publisher":"https:\/\/www.facebook.com\/asgru.wp\/","article_published_time":"2024-08-19T05:56:15+00:00","article_modified_time":"2026-09-14T01:20:25+00:00","og_image":[{"width":2560,"height":1186,"url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","type":"image\/png"}],"author":"asgru","twitter_card":"summary_large_image","twitter_creator":"@ArtemKondranin","twitter_site":"@ArtemKondranin","twitter_misc":{"Escrito por":"asgru","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#article","isPartOf":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/"},"author":{"name":"asgru","@id":"https:\/\/asgru.com\/es\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576"},"headline":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:20:25+00:00","mainEntityOfPage":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/"},"wordCount":1070,"publisher":{"@id":"https:\/\/asgru.com\/es\/#organization"},"image":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","articleSection":["Uncategorized"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/","url":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/","name":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1 - asgru","isPartOf":{"@id":"https:\/\/asgru.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#primaryimage"},"image":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:20:25+00:00","breadcrumb":{"@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#primaryimage","url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","width":2560,"height":1186},{"@type":"BreadcrumbList","@id":"https:\/\/asgru.com\/es\/creacion-de-un-componente-de-lista-de-tareas-para-el-editor-de-bloques-de-wordpress-parte-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asgru.com\/es\/home\/"},{"@type":"ListItem","position":2,"name":"Creaci\u00f3n de un componente de lista de tareas para el editor de bloques de WordPress: parte 1"}]},{"@type":"WebSite","@id":"https:\/\/asgru.com\/es\/#website","url":"https:\/\/asgru.com\/es\/","name":"asgru","description":"","publisher":{"@id":"https:\/\/asgru.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asgru.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/asgru.com\/es\/#organization","name":"asgru","url":"https:\/\/asgru.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/asgru.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","caption":"asgru"},"image":{"@id":"https:\/\/asgru.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/asgru.wp\/","https:\/\/x.com\/ArtemKondranin","https:\/\/www.linkedin.com\/in\/asgru\/"]},{"@type":"Person","@id":"https:\/\/asgru.com\/es\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576","name":"asgru","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","caption":"asgru"},"sameAs":["http:\/\/asgru.loc"],"url":"https:\/\/asgru.com\/es\/author\/asgru\/"}]}},"_links":{"self":[{"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/posts\/1875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/comments?post=1875"}],"version-history":[{"count":1,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/posts\/1875\/revisions"}],"predecessor-version":[{"id":1876,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/posts\/1875\/revisions\/1876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/media\/911"}],"wp:attachment":[{"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/media?parent=1875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/categories?post=1875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgru.com\/es\/wp-json\/wp\/v2\/tags?post=1875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}