19

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? enter image description here

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.

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

1 Answer 1

-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.