¿Cómo puedo agregar un control personalizado a una página?

3 minutos de lectura

Necesito agregar una casilla de verificación al formulario de edición de páginas en Gutenberg sin complementos de terceros como ACF. Hice algunos tutoriales, incluido el de la página oficial de WordPress, pero no se comporta como necesito.

Ya tengo el agregado a la barra lateral (reemplacé la casilla de verificación con un toogle pero sería lo mismo), el elemento no funciona solo, si hago clic no cambia su estado, ni puedo almacenar el valor al guardar la página .

Antiguamente lo hubiera solucionado con metabox, pero ya no es compatible con esta versión de WordPress.

¿Qué debo modificar en el código para que el componente cambie su estado y luego lo almacene en la base de datos al guardar una página?

Probé con esto y funciona, pero no es lo que necesito: https://developer.wordpress.org/block-editor/tutorials/plugin-sidebar-0/plugin-sidebar-1-up-and-running/

Probé con esto: https://www.codeinwp.com/blog/make-plugin-compatible-with-gutenberg-sidebar-api/

export class MyPluginSidebar{
  constructor(wp){
    const { __ } = wp.i18n;

    const {
      PluginSidebar,
      PluginSidebarMoreMenuItem
    } = wp.editPost;

    const {
      PanelBody,
      TextControl,
      ToggleControl
    } = wp.components;

    const {
      Component,
      Fragment
    } = wp.element;

    const { withSelect } = wp.data;

    const { registerPlugin } = wp.plugins;

    const { withState } = wp.compose;
    class Hello_Gutenberg extends Component {
      constructor() {
        super( ...arguments );

        this.state = {
          key: '_hello_gutenberg_field',
          value: '',
        }

        wp.apiFetch( { path: `/wp/v2/posts/${this.props.postId}`, method: 'GET' } ).then(
          ( data ) => {
            console.log('apiFetch data', data.meta);
            this.setState( { 
              value: data.meta._hello_gutenberg_field
            } );
            return data;
          },
          ( err ) => {
            console.log('wp api fetch error', err);
            return err;
          }
        );
      }

      static getDerivedStateFromProps( nextProps, state ) {
        if ( ( nextProps.isPublishing || nextProps.isSaving ) && !nextProps.isAutoSaving ) {
          wp.apiRequest( { path: `/hello-gutenberg/v1/update-meta?id=${nextProps.postId}`, method: 'POST', data: state } ).then(
            ( data ) => {
              return data;
            },
            ( err ) => {
              return err;
            }
          );
        }
      }

      render() {
        var hasFixedBackground = true;
        return (
          <Fragment>
          <PluginSidebarMoreMenuItem
            target="hello-gutenberg-sidebar"
          >
            { __( 'Sidebar title' ) }
          </PluginSidebarMoreMenuItem>
          <PluginSidebar
            name="hello-gutenberg-sidebar"
            title={ __( 'Sidebar title' ) }
          >
            <PanelBody>
              <ToggleControl
                label="Control label"
                //help={ hasFixedBackground ? 'Has fixed background.' : 'No fixed background.' }
                checked={ hasFixedBackground }
                //onChange={ () => this.setState( ( state ) => ( { hasFixedBackground: ! state.hasFixedBackground } ) ) }
              />

            </PanelBody>
          </PluginSidebar>
        </Fragment>
        )
      }
    }

    // Pass post ID to plugin class
    // Prevent to save on each state change, just save on post save
    const HOC = withSelect( ( select, { forceIsSaving } ) => {
      const {
        getCurrentPostId,
        isSavingPost,
        isPublishingPost,
        isAutosavingPost,
      } = select( 'core/editor' );
      return {
        postId: getCurrentPostId(),
        isSaving: forceIsSaving || isSavingPost(),
        isAutoSaving: isAutosavingPost(),
        isPublishing: isPublishingPost(),
      };
    } )( Hello_Gutenberg );

    registerPlugin( 'hello-gutenberg', {
      icon: 'admin-site',
      render: HOC,
    } );
  }
}

Este código registra la barra lateral, agrega el control pero no cambia su estado ni lo guarda en la base de datos.

Cualquier ayuda es bienvenida.

¡Saludos!

  • Posible duplicado de Cómo agregar un nuevo panel en “documento” en Gutenberg

    – Nicolás

    16 de junio de 2019 a las 14:20

Si desea guardar los datos que ha agregado más tarde en su bloque de gutenberg, debe usar addFilter. Puedo mostrarte un ejemplo que estoy usando:

wp.hooks.addFilter('blocks.registerBlockType', 'custom/filter', function(x,y) {
    if(x.hasOwnProperty('attributes')){
        x.attributes.background_image = {
            type: 'string',
            default: ''
        };
    }
    return x;
});

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad