isSavingPost() for widgets

Question

isSavingPost() for widgets

KittMedia

2022年5月12日 06:21

I want to get the block ID of my widgets (e.g. #block-1, which is displayed on the frontend after saving a widget) on the widgets screen in the backend. What I try to achieve is to display the ID of the widget in the toolbar so that you can easily copy it.

I currently use a custom API endpoint to receive the ID but it will trigger a request on every render (I already debounced it, but am searching for a better way).

My idea was than to subscribe to the save action of the widgets, since the ID is first available after saving the widgets screen:

const widgetIdToolbar = createHigherOrderComponent( ( BlockEdit ) = {
    if ( select( 'core/editor' ).getCurrentPostType() ) {
        return BlockEdit;
    }
    
    return ( props ) = {
        if ( props.name === 'core/widget-area' || props.name === 'core/legacy-widget' ) {
            return ( BlockEdit { ...props } / );
        }
        
        const [ widgetId, setWidgetId ] = useState( 0 );

        subscribe( () = {
            const isAutosavingPost = select( 'core/editor' ).isAutosavingPost();
            const isSavingPost = select( 'core/editor' ).isSavingPost();
                
            if ( isSavingPost || isAutosavingPost ) {
                // do stuff
            }
        } );
        
        return (
            
                BlockEdit { ...props } /
            /
        );
    }
}, 'widgetIdToolbar' );

addFilter( 'editor.BlockEdit', 'rh-widget-toolbar/add-toolbar', widgetIdToolbar );

Unfortunately, both isAutosavingPost and isSavingPost always return false. It seems they don’t apply to widgets. How to get the similar functionality for “on widgets save”?

Topic block-editor autosave widgets Wordpress

Category Web

Tom J Nowell · Accepted Answer · 2022年5月11日 15:23

If the goal is to display the block ID so that the user can get it easily, instead try using a block editor filter to add a panel in the sidebar:

From: https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor-blockedit

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
 
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>My custom control</PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withInspectorControl' );
 
wp.hooks.addFilter(
    'editor.BlockEdit',
    'my-plugin/with-inspector-controls',
    withInspectorControls
);

Then inside the panel, use props to retrieve the blocks ID and display it, perhaps in an input with the disabled property. Specifically clientId.

It might look like this (untested):

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
 
const withWidgetIDPanel = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const widgetID = props.__internalWidgetId ? props.__internalWidgetId : 0;
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>
                        <input
                            class="components-text-control__input"
                            type="text"
                            disabled
                            value={ props.widgetID }
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withWidgetIDPanel' );
 
wp.hooks.addFilter(
    'editor.BlockEdit',
    'tomjn/display-widget-id',
    withWidgetIDPanel
);

This will give you the widget ID if it's available in the sidebar for every legacy widget if enqueued on the widgets page, and provides a useful debug panel for non-widget editors too. It also gives you a place to use react hooks and other WordPress APIs in the context of a specific block, without needing to figure out which widget belongs to which block ID.

Note that when the widget ID changes, React will re-render the component automatically, no subscription is necessary. Note that no local state is in use.

Frontend Block ID

If however you want the ID that gets used on the frontend, there's an attribute named __internalWidgetId. When this changes React will re-render the edit component because its props have changed, so no subscription to the store is necessary.

Before the widget is saved, this __internalWidgetId attribute does not exist, and will be null if accessed, and when it comes into existence again the edit component will re-render because changed props are how React knows to re-render a DOM element.

Storing the widget ID in local state is not necessary and could lead to problems. Just pass the raw attribute down if it's not null to any child components that need it or use the internal widget ID directly.

As a bonus, you can select on the core/edit-widgets store to grab the widget data directly.

isSavingPost() for widgets

Frontend Block ID

About