Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE

WordPress54 ТЗ React y Next.js10 ТЗ Ingeniería de IA6 ТЗ

Total planos:70 ТЗ

Temas personalizados Gutenberg y FSE WooCommerce DevOps y Velocidad Seguridad y API IA y Agentes

Раздел • Gutenberg y FSE • 11 ТЗ

Gutenberg y FSE

11 especificaciones prácticas: temas FSE, bloques React con block.json v3, render.php, InnerBlocks, Block Bindings API, theme.json v3, PluginSidebar, Pattern Overrides e Interactivity API.

Progreso de sección «Gutenberg y FSE»

0%(0/56 pasos)

+0 XP0 de 11 resueltos

Artículos Fundamentales y Teoría para Aprender desde Cero

7 artículos

Domina estos 7 materiales clave para ejecutar las especificaciones de esta sección sin lagunas de conocimiento.

Фундаментальная базаJunior • База

Структура манифеста block.json v3 и theme.json

Стандарт метаданных блока в WordPress: типизация атрибутов, поддержка стилей (supports), селекторы и привязка к theme.json.

~20 minAbrir lección

Фундаментальная базаJunior • База

React-компоненты Edit и Save в Gutenberg

Разделение интерактивного React-редактора в админке и статической сериализации контента в HTML-комментарии для фронтенда.

~25 minAbrir lección

Архитектурный паттернMiddle • Архитектура

Вложенные блоки InnerBlocks и паттерны макетов

Построение составных карточек и сеток с жесткими шаблонами templateLock и защитой верстки от разрушения контент-менеджером.

~20 minAbrir lección

Архитектурный паттернMiddle • Архитектура

Динамические блоки с серверным рендерингом render.php

Блоки с актуальными данными из БД: серверная генерация PHP-разметки, кеширование transient-ами и гидратация состояния.

~25 minAbrir lección

Практический воркфлоуMiddle • Архитектура

Воркфлоу: Создание кастомного блока Gutenberg на React 19

Полноценный цикл создания React-блока: манифест v3, кастомные инспекторы, RichText и сборка через @wordpress/scripts.

~35 minAbrir lección

Практический воркфлоуMiddle • Архитектура

Воркфлоу: Фильтры блоков ядра WordPress

Модификация разметки, атрибутов и инспекторов стандартных блоков ядра через хуки blocks.registerBlockType.

~30 minAbrir lección

Практический воркфлоуSenior • Production

Воркфлоу: Тонкая настройка theme.json v3 и дизайн-системы

Управление палитрами, Fluid Typography, интервалами и отключением лишних inline-стилей ядра WordPress.

~35 minAbrir lección

Gutenberg y FSE

Middle~10 h

Especificación: Creación de un tema único desde cero (FSE / Bloques y Clásico)

Guía completa para el desarrollo de un tema nativo ultrarrápido para WordPress: edición completa del sitio (FSE), plantillas de bloques, theme.json v3, tipografía fluida, Block Bindings API y alternativas clásicas en PHP.

Necesito un diseño a medida para un blog de tecnología. Quiero que el sitio vuele en dispositivos móviles, cargue en menos de un segundo y me permita modificar visualmente la estructura de bloques, cabeceras y menús en el editor sin tocar código.

PHP 8.3/8.4WordPress 7.0 ReadyGutenberg Block Themestheme.json v3+5

Progreso: 0 de 7 pasos0%

Gutenberg y FSE

Especificación: Desarrollo de bloque Gutenberg personalizado (React y ACF PRO)

Desarrollo de bloques para el editor de WordPress: elección entre React nativo (@wordpress/create-block) y prototipado rápido en PHP con ACF PRO, manifiesto block.json, esquema de atributos, panel InspectorControls y renderizado dinámico.

Necesitamos bloques interactivos personalizados para nuestro portal de medios (tarjetas de precios, fichas de autores, tablas comparativas). Buscamos una arquitectura fácil de mantener, con vista previa adaptativa e integrada en el selector de bloques.

Progreso: 0 de 5 pasos0%

Gutenberg y FSE

Middle~8 h

Especificación: Bloque interactivo con WordPress Interactivity API

Desarrollo de bloques reactivos sin librerías externas en el cliente: integración con la Interactivity API nativa de WordPress, directivas (data-wp-interactive, data-wp-context, data-wp-on), almacenamiento reactivo en view.js y respuesta inmediata en la interfaz.

Necesitamos un cuestionario interactivo y un bloque de filtrado instantáneo. No queremos cargar React ni Alpine.js en el frontend porque perjudica nuestras Core Web Vitals. Necesitamos usar la Interactivity API nativa de WordPress.

WordPress 6.5+ / 7.0Interactivity APIblock.jsonrender.php+3

Progreso: 0 de 4 pasos0%

Gutenberg y FSE

Middle~8 h

Especificación: Bloque dinámico con renderizado en el servidor (render.php)

Desarrollo de bloques dinámicos con consultas en vivo a la base de datos: renderizado con render.php, optimización de WP_Query, caché con Transients API, vista previa en el editor y sincronización de atributos.

Necesitamos un bloque de 'Cuadrícula de cursos recientes / casos de éxito' que muestre siempre el contenido actualizado sin necesidad de volver a guardar la página. Debe generarse en el servidor con PHP y actualizarse al publicar nuevas entradas.

@wordpress/scriptsblock.json v3render.phpServerSideRender+3

Progreso: 0 de 5 pasos0%

Gutenberg y FSE

Middle~9 h

Especificación: Contenedor compuesto con InnerBlocks y bloqueo de diseño (templateLock='contentOnly')

Diseño de bloques contenedores modulares: bloques anidados con InnerBlocks, plantillas predefinidas (atributo template), lista de bloques autorizados (allowedBlocks) y protección frente a roturas con templateLock='contentOnly'.

Nuestra agencia desarrolla sitios para clientes donde los redactores rompen constantemente el diseño al borrar columnas, modificar márgenes o añadir bloques no permitidos. Necesitamos contenedores con bloqueo estricto de estructura.

React & JSX@wordpress/block-editoruseInnerBlocksPropstemplateLock="contentOnly"+2

Progreso: 0 de 5 pasos0%

Gutenberg y FSE

Junior~6 h

Especificación: Conexión de campos personalizados a bloques nativos mediante Block Bindings API

Uso de la API oficial de Block Bindings de WordPress: vinculación directa de bloques de párrafo, encabezado, imagen y botón a campos personalizados de post meta y ACF sin programar bloques específicos.

Queremos mostrar campos personalizados (fechas de eventos, presupuestos, certificados) utilizando los bloques nativos de WordPress como encabezados y párrafos. No queremos programar un bloque nuevo para cada campo.

WordPress 6.7+ / 7.0Block Bindings APIregister_block_bindings_source()register_post_meta()+2

Progreso: 0 de 5 pasos0%

Показано 1–6 из 11 ТЗ