Gutenberg compatibility for dynamic metaboxes

[elliotcondon]

Description

One of our favorite, simple and intuitive features is the ability to update metaboxes dynamically whilst editing a post. For example, metaboxes will hide or show depending on their location rules when changing the post template, format, parent and other post attributes.

To do this, we use JS to detect "changes" to the post attributes. Once a change is detected, we send an AJAX request with the current "post" information and use the returned JSON to hide, show or update the metaboxes. We also update the "Show on Screen" checkbox elements to match the visible metaboxes.

Issues

• Existing jQuery event listeners are not compatible with Gutenberg

Questions

• How do we listen for changes to the following post attributes?
  page_template
  page_parent
  post_format
  post_terms
• How do we get these values on initial page load?
• How do we get these values on change?
• How can we hide and show metaboxes? Is CSS ok for this?
• How can we update the "Show on Screen" check boxes to match the visible metaboxes?

[noisysocks]

Copying some answers over from WordPress/gutenberg#12692 (comment).

• How do we listen for changes to the following post attributes?
  • page_template
  • page_parent
  • post_format
  • post_terms

If we have a React component then we can make it update when there are changes by wrapping it with withSelect(). Otherwise, we'll need to do this manually using subscribe(). I suspect that ACF will need to use the latter approach as it's built using jQuery.

let pageTemplate;
wp.data.subscribe( () => {
	const newPageTemplate = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'template' );
	if ( pageTemplate !== newPageTemplate ) {
		console.log( 'Page template has changed!' );
		pageTemplate = newPageTemplate;
	}
} );

• How do we get these values via the JS api?

select() and getEditedPostAttribute() is what we'll need here to access this data. The REST API reference is useful here for figuring out what post attributes are available.

const { getEditedPostAttribute } = wp.data.select( 'core/editor' );
const pageTemplate = getEditedPostAttribute( 'template' );
const pageParent = getEditedPostAttribute( 'parent' );
const postFormat = getEditedPostAttribute( 'format' );
const postTerms = getEditedPostAttribute( 'taxonomy_name' ); // e.g. 'tags', 'categories'

• How can we hide and show metaboxes? Is CSS ok for this?

Dispatching removeEditorPanel() is likely the most resilient thing to use here. Meta box panel IDs are meta-box- followed by the ID of the meta box.

// Hides the 'postcustom' meta box
wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'meta-box-postcustom' );

• How can we update the "Show on Screen" check boxes to match?

By this do you mean the checkboxes that appear in the Options modal?

If so, then those can be toggled by using toggleEditorPanelEnabled().

// Toggles the 'my-box' meta box
wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( 'meta-box-my-box' );