Estilos de tema de Gutenberg: ¿Agregar configuraciones personalizadas?

Sí, puede agregar configuraciones de tema personalizadas al lienzo «Estilos» del Editor del sitio en Gutenberg usando el Tema JSON archivo (theme.json) y la API de filtros de Gutenberg. Mientras que el theme.json El archivo se utiliza principalmente para configurar estilos y configuraciones globales, puede ampliarlo con configuraciones personalizadas que interactúan con el editor.

Si, puedes usar filtros del editor de bloques proporcionado por WordPress para agregar configuraciones de temas personalizados al lienzo «Estilos» del Editor del sitio. Específicamente, puedes utilizar el __experimentalThemeJson filtrar para ampliar la funcionalidad de estilos globales. Esto le permite agregar configuraciones o controles personalizados que los usuarios pueden configurar directamente dentro del Editor del sitio.

Pasos para agregar configuraciones de tema personalizadas

1. Definir configuraciones de tema personalizadas en theme.json
   Agregue su configuración personalizada en el settings.custom sección de la theme.json
{ "version": 2, "settings": { "custom": { "mobileBreakpoints": { "default": "768px", "label": "Mobile Breakpoint" } } } }
2. Utilice el __experimentalThemeJson Filtrar
   Utilice este filtro para ampliar o modificar mediante programación el theme.json estructura.
   add_filter( '__experimentalThemeJson', function( $theme_json ) { // Add custom settings to theme.json structure $theme_json['settings']['custom'] = [ 'mobileBreakpoints' => [ 'default' => '768px', 'label' => 'Mobile Breakpoint' ], ]; return $theme_json; } );
3. Exponer la configuración al editor del sitio
   Utilice el registerBlockStyle o API de JavaScript similares para garantizar que estas configuraciones se reflejen en la interfaz de usuario de «Estilos».
4. Agregar controles de interfaz de usuario en el editor del sitio
   Para agregar controles personalizados para estas configuraciones en el Editor del sitio:
   • Utilice el wp.data y wp.components bibliotecas en su JavaScript.
   • Extender el core/edit-site o core/edit-widgets interfaces creando paneles de barra lateral personalizados o controles que se vinculan con la configuración de su tema.
5. Ejemplo de ampliación de configuraciones con JavaScript:
   import { registerPlugin } from '@wordpress/plugins'; import { PluginSidebar } from '@wordpress/edit-post'; import { PanelBody, TextControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; const MobileBreakpointSettings = () => { const breakpoint = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'meta' )?.mobile_breakpoint || '768px' ); const { editPost } = useDispatch( 'core/editor' ); return ( editPost( { meta: { mobile_breakpoint: newBreakpoint } } ) } /> ); }; registerPlugin( 'mobile-breakpoint-settings', { render: MobileBreakpointSettings } );
6. Guarde la configuración
   Asegúrese de que la configuración esté guardada en la base de datos, ya sea en la configuración global del tema o como una opción personalizada a la que pueda acceder la interfaz.
7. Utilice la configuración personalizada en estilos de interfaz
   Extraiga el valor del punto de interrupción personalizado usando PHP o JavaScript para aplicarlo en la lógica de su interfaz.