Gutenberg: How to replace the Document Settings panels or controls?

[themenow]

Issue Overview

I can replace the Featured Image control in current WP version by PHP:

add_filter( 'admin_post_thumbnail_html', 'my_admin_post_thumbnail_html', 10, 2 );

How do I do the same thing with Gutenberg?

[gziolo]

It's not supported yet. We have just agreed how to add controls in the Document Settings sidebar in #6300. We didn't discuss removing or replacing the existing panels and control. @mtias @adamsilverstein and @ryanwelcher any thoughts?

[mtias]

Making the FeaturedImage component a slot seems alright to me. We have many plans for the featured image, but they won't happen until after 5.0, most likely.

[adamsilverstein]

A slot here to match the existing functionality makes sense to me, any suggestions for naming that best aligns with describing the purpose of the slot?

[ryanwelcher]

Something along the lines of PluginFeaturedImageHTML perhaps?

One thing I was wondering was, and this may just be my level of knowledge of how slotFill works, how would it be used to completely replace the slot as opposed to adding to it?

[gziolo]

@ryanwelcher, technically it appends items, but we can always look for alternative solutions. @aduth should have the best overview what would be the way to go here.

[adamsilverstein]

Wrapping the FeaturedImage component in withFiltered would enable replacing it entirely, right?

[gziolo]

@adamsilverstein yes, withFilters would do the job.

What is the most common use case? To replace this part entirely, to prepend or append your own logic?

[adamsilverstein]

In my experience the most common use case is appending additional information/UI below the featured image. @themenow - what was your use case when you opened the ticket, how do you use admin_post_thumbnail_html now, to replace the image selector entirely, or to append additional information below it?

[themenow]

@adamsilverstein I use the filter to replace the image selector entirely with multiple featured images and also adds extra options like image link, lightbox, image filter, etc.

[adamsilverstein]

What is the most common use case? To replace this part entirely, to prepend or append your own logic?

@gziolo Perhaps withFiltered is best here vs a slot since replacement is clearly a use case. With the filtering a approach appending would also be an option.

[gziolo]

Yes, withFilters works for me. You can open PR or I will do it on Monday. :)

[adamsilverstein]

@gziolo opened a PR here https://github.com/WordPress/gutenberg/pull/6940

Please see my notes about testing, we may want to add a slot as well, appending via the filter is problematic in my testing although I may be missing something.

[ecobux]

I am the original author of the request of #6225 - which sent me here. As the title states, the solution will hopefully work not only for the featured image panel, but universally. I need it for the "tags" panel.

[gziolo]

6940 offers a solution to replace or wrap featured image contents. We still need to find a way to offer more control over which panels should be displayed.

[mtias]

What's the status of this one?

[gziolo]

I can replace the Featured Image control in current WP version by PHP:

This one is possible in Gutenberg with editor.PostFeaturedImage filter. In addition, we allow the filtering of all taxonomy types by using editor.PostTaxonomyType filter which addressed also comment shared in the issue:

As the title states, the solution will hopefully work not only for the featured image panel, but universally. I need it for the "tags" panel.

Let's close this one and tackle each panel separately when there is a use case we can discuss in details.

I'm also linking this PR where we plan to update documentation related to editor hooks: https://github.com/WordPress/gutenberg/pull/11099.

[Kevinlearynet]

This doesn't seem to support removal of the "Authors" panel, similar to:

remove_meta_box( 'authordiv', 'post', 'normal' );

I'd expect this to be possible with something like:

wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'author' );

It looks like this isn't possible based on what I see in the pull request commits, documentation and tests.

[gziolo]

@noisysocks, do you happen to know how it would have to be structured for meta boxes?

[noisysocks]

@gziolo: Sorry, I'm not sure what you mean. How would _what_ have to be structured?

A third party meta box can be disabled by unregistering it in PHP with remove_meta_box().

To my knowledge, this _Author_ field in Gutenberg can't be disabled:

It appears when the current post type has supports.author, the logged in user has permission to change an author, and there are two or more users in the current WordPress site.

[jonathanstegall]

@noisysocks if I'm understanding your comment above, does that mean there is no way for a plugin (even a VIP plugin) like Co-Authors-Plus (for example) to remove/hide the Author field (it currently uses remove_meta_box to achieve this) when it uses other functionality to indicate authorship?

[Kevinlearynet]

@jonathanstegall

The removeEditorPanel() method only supports the removal of 5 built-in meta boxes:

const { removeEditorPanel } = wp.data.dispatch('core/edit-post');

removeEditorPanel( 'taxonomy-panel-category' );
removeEditorPanel( 'taxonomy-panel-post_tag' );
removeEditorPanel( 'featured-image' );
removeEditorPanel( 'post-excerpt' );
removeEditorPanel( 'discussion-panel' );

Whileremove_meta_box supports 16:

• authordiv – Author metabox
• categorydiv – Categories metabox.
• commentstatusdiv – Comments status metabox (discussion)
• commentsdiv – Comments metabox
• formatdiv – Formats metabox
• pageparentdiv – Attributes metabox
• postcustom – Custom fields metabox
• postexcerpt – Excerpt metabox
• postimagediv – Featured image metabox
• revisionsdiv – Revisions metabox
• slugdiv – Slug metabox
• submitdiv – Date, status, and update/save metabox
• tagsdiv-post_tag – Tags metabox
• tagsdiv-{$tax-name} - Custom taxonomies metabox
• {$tax-name}div - Hierarchical custom taxonomies metabox
• trackbacksdiv – Trackbacks metabox

These are not all relevant to Gutenberg, but more than 5 certainly are.

[mertafor]

@Kevinlearynet

Kevin you're definitely a life saver! RemoveEditorPanel function works perfectly to remove panels. I'm using custom Featured Image and Page Attributes meta boxes in my themes and needed to remove both core components. Remove "featured-image" helped to remove Featured Image panel but I wasn't able to remove Page Attributes.

Then I realized Featured Image panel can be removed by calling "postimagediv" with PHP remove_meta_box() function. Yet "featured-image" must be used with Gutenberg. That being said apparently core element names have been changed.

I simply tried using "page-attributes" instead of "pageparentdiv" and surprisingly Page Attributes component removed :

const { removeEditorPanel } = wp.data.dispatch('core/edit-post'); removeEditorPanel( 'page-attributes' );

I haven't tried to remove other components but it seems using component names in lowercase might be a good start (until WordPress releases official documentation!)

I've just wanted to thank you and post this solution in case it helps someone.

[gziolo]

@chrisvanpatten - it would be nice to include the information about how to remove those panels in Gutenberg docs. We should also clarify the support for remove_meta_box and removeEditorPanel.

We also added support for removeEditorPanel( 'post-link' ); which removes Permalink panel.

[gziolo]

It'a also worth clarifing that

removeEditorPanel( `taxonomy-panel-${ taxonomySlug }` );

should be equivalent to:

• tagsdiv-{$tax-name} - Custom taxonomies metabox
• {$tax-name}div - Hierarchical custom taxonomies metabox

[nuno46]

I also need to remove the Page Attributes panel on Gutenberg editor.
I am newbie, and I tried to add on functions.php and shows an error...
In which file and file path do I have to add this code on wordpress to work properly ?

const { removeEditorPanel } = wp.data.dispatch('core/edit-post'); removeEditorPanel( 'page-attributes' );

Thanks.

[ecobux]

@nuno46 In a plugin I simply execute after the document has loaded (JavaScript added inline into the page)
wp.data.dispatch('core/edit-post').removeEditorPanel('page-attributes');

(In my plugin I actually remove the panel 'taxonomy-panel-post_tag'.)

[nuno46]

@nuno46 In a plugin I simply execute after the document has loaded (JavaScript added inline into the page)
wp.data.dispatch('core/edit-post').removeEditorPanel('page-attributes');

(In my plugin I actually remove the panel 'taxonomy-panel-post_tag'.)

Thanks Christoph (ecobux), I don't know how to do that, I added a plugin to add JS code, and added the code, but nothing changes. I am sure is my fault...
Would you do that for me via TeamViewer? my wtp [phone]
Thanks a lot, is really important :)

[ecobux]

@nuno46 Please contact me per email at christoph (at sign) chattymango (dot) com