block editor - How to filter or remove default panels in Gutenberg PrePublish Panel

admin管理员组

文章数量:1124559

I would like to edit the text or remove and re-create the Publish panel of Gutenberg's PrePublish Panel in the editor sidebar.

I know I can use wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'example-panel' ); but it doesn't seem to work for any panels in editor-post-publish-panel. Any ideas?

The background is that I used the slotfill API to insert a timezone select field so authors can use their local times when selecting their publish date time. That all works great, except when they click Schedule and get the publish time in GMT without any context.

I would like to edit the text or remove and re-create the Publish panel of Gutenberg's PrePublish Panel in the editor sidebar.

I know I can use wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'example-panel' ); but it doesn't seem to work for any panels in editor-post-publish-panel. Any ideas?

The background is that I used the slotfill API to insert a timezone select field so authors can use their local times when selecting their publish date time. That all works great, except when they click Schedule and get the publish time in GMT without any context.

• block-editor
• wp-editor

Share Improve this question asked Aug 16, 2019 at 20:56 spnzrspnzr 24111 silver badge88 bronze badges 9

• 1 I guess you're going to need to use something like jQuery's .remove() or .hide() for the time being. But, can you show the code for "I used the slotfill API to insert a timezone select field"? – Sally CJ Commented Aug 21, 2019 at 7:49
• Might work. I'd attach a listener to wp.data.select('core/edit-post').isPublishSidebarOpened() and then use a pseudo css class to select the 2nd div in jQuery. Very hacky though and will cause React to redraw everything... – spnzr Commented Aug 21, 2019 at 16:34
• Here's a gist of the timezone select: gist.github.com/spencerm/1005327871474b5cecccb1fb9109dda8 (I'm not super familiar with react.js however) – spnzr Commented Aug 21, 2019 at 16:35
• 1 Or actually I can just do a hack-y CSS fix – .editor-post-publish-panel__prepublish :nth-child(4){ visibility:hidden; } ... but it is definitely hack-y haha – spnzr Commented Aug 21, 2019 at 16:57
• 1 Problem with using JS outside of React is it will force React to do a total redraw. – spnzr Commented Aug 21, 2019 at 19:45

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default -1

To modify the behavior of the Publish panel in Gutenberg's PrePublish Panel, especially for a custom implementation like the timezone select field you've added, you will need to use a combination of JavaScript and WordPress's editor hooks. The wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'example-panel' ); command is useful for removing panels, but it may not work directly for core panels like the publish panel.

To achieve your goal, you have a few options:

Modify the PrePublish Panel Directly: Instead of removing and recreating the panel, you could try to directly manipulate the existing panel. This can be tricky, as it involves working with the existing DOM structure and hooks provided by Gutenberg. You might need to use JavaScript to modify the panel after it has been created.

Custom PrePublish Panel: You could create a custom PrePublish Panel that includes your timezone field and the standard publish options. This would be a more complex solution but would give you full control over the panel's contents and behavior.

Add Context to the Publish Time: Instead of modifying the panel, consider adding a text element near the publish time that indicates it is in GMT. This could be a simpler way to provide the context authors need without altering the core functionality of the panel.

For the first two options, you can use the SlotFill API which you are already familiar with. It allows you to extend or replace parts of the Gutenberg UI. To create a custom PrePublish Panel, you would use a combination of SlotFill and React components to build your interface.

本文标签： block editorHow to filter or remove default panels in Gutenberg PrePublish Panel