javascript - Custom block update rendering when reused

admin管理员组

文章数量:1420213

First question here! I'm an experienced WP developer, but pretty new to React so my vocabulary might be a little off... I developed a custom (Gutenberg) block that have to update is content on almost every block manipulation on the block editor.

It works great, mostly: i "listen" to changes with a wp.data.subscribe function and update the block attributes with wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes.

The problem is that the blocks stop updating when converted to a reusable block or put in one (like a reusable group). It's fine in the reusable block manager, but the feature that let you edit a reusable block inside the post it is used on is like a frame that don't fire my wp.data.subscribe function.

How do i check for modifications in this "window" and update blocks inside it?

It's just a backend problem. The client side rendering is dynamic so it works fine.

Thank you,

Nicolas

Here is the code related to my block :

//Process step bloc. The step number is added and refreshed automaticaly after any change to any blocs
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
registerBlockType( 'blocs-aide-brio/bloc-etape', {
    title: 'Étape de procédure',
    icon: 'editor-ol',
    category: 'aide-brio',
    attributes: {
      etape: {
        type: 'number',
        default: 1,
      },
      content: {
          type: 'array',
          source: 'children',
          selector: 'p',
      },
    },
    edit: ( props ) => {
        const { attributes: { content, etape }, setAttributes } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
          <div>
            <div class="etape-numero">
              <span>{ etape }.</span>
            </div>
            <RichText
              tagName="p"
              onChange={ onChangeContent }
              value={ content }
            />
          </div>
        );
    },
    save: ( props ) => {
      return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
} );

//Steps reordering after content change
wp.data.subscribe( function() {
  var blocs = wp.data.select( 'core/block-editor' ).getBlocks(); //Create an array of the current posts blocs
  var numero = 0;
  for ( const bloc of blocs ) { //Loop in the blocs array
    for ( const sousBloc of bloc.innerBlocks ) { //Loop in the innerblocs
      if ( sousBloc.name === 'blocs-aide-brio/bloc-etape' ) { //If the bloc is a step
        numero += 1;
        wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( sousBloc.clientId, { etape: numero } ); //Update the step number
      } else if ( sousBloc.name === 'core/heading' && sousBloc.attributes.level === 2 ) { //Restart the step numbers every h2
        numero = 0;
      }
    }
    if ( bloc.name === 'blocs-aide-brio/bloc-etape' ) { //If the bloc is a step
      numero += 1;
      wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( bloc.clientId, { etape: numero } ); //Update the step number
    } else if ( bloc.name === 'core/heading' && bloc.attributes.level === 2 ) { //Restart the step numbers every h2
      numero = 0;
    }
  }
} );

本文标签： javascriptCustom block update rendering when reused