Extensibility: Add publish panels support for plugins #6798

gziolo · 2018-05-17T11:36:36Z

Description

To support the current Publicize integration strategy per Jetpack PR Automattic/jetpack#9144, I'm proposing Gutenberg provide extensibility in a couple areas:

Provide extendable pre and publish panels (see strategy in Jetpack Publicize missing from side panels #3264)

Added PluginPrePublishPanel and PluginPostPublishPanel to for plugins to add content to pre-publish sidebar or post-publish sidebar respectively.

Continues work started by @c-shultz in #5795. To make it easier to proceed I moved those changes to the upstream repository. Sorry, for losing commits history @c-shultz and thanks for your initial work which made this change very easy.

How has this been tested?

Code to paste into your browser: https://gist.github.com/gziolo/fd8141f2cde7fcb1b513c09eea45d27f.

Screenshots

Pre-publish

Post-publish

Desktop:

Mobile:

Types of changes

New feature (non-breaking change which adds functionality).

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

jorgefilipecosta · 2018-05-17T15:50:42Z

edit-post/components/layout/index.js

@@ -84,6 +86,8 @@ function Layout( {
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
+					renderPrePublishExtension={ () => <PluginPrePublishPanel.Slot /> }


Maybe here we can just have a renderPublishExtension prop, and leave it up to the component to query state and check if we are in pre-publish or post-publish and just render when we are in the desired state ( or both ).
Later we could even change for a more generic sidebar extension mechanism where we just extend all sidebars the component is responsible to query the state to discover if it should render something in a given state or not (e.g: if it is pre-publish) if it is the block sidebar etc...
This would even allow a plugin to extend the sidebars of other plugins :)

Those two are mutually exclusive. You are either in pre-publish screen or post-publish screen. They are passed down to two different subcomponents. This is limited to publish sidebar only. Can you elaborate on your idea with some code examples? I must admit that I don't quite see how this part could relate to the plugin sidebar.

Hi @gziolo here is a sample of the generic API for extending sidebars that I was referring: #6899.
Unfortunately, it ended up not being possible to use it in this case, because pre and post-publish state are not available globally for plugins to query. It uses local state.
But the initial idea was to render <SidebarExtender.Slot /> both pre and post-publish panels.

Right, this component has its own internal state which controls the logic for rendering individual panels. I will check your PR. Thanks for opening 👍

jorgefilipecosta · 2018-05-17T16:23:50Z

I tested the PrePublish with the follwing code block and it worked well:

var el = wp.element.createElement;
var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
var sidebarContent = el( wp.components.PanelBody, {}, el( 'h3', {}, 'Hello world!' ) ); 
var mySidebar = el( PluginPostPublishPanel, { initialOpen: true, title: 'test' }, sidebarContent );
wp.plugins.registerPlugin('wordcamp', { render: function(){ return mySidebar } } );

Regarding post publish it also worked well but only when post publish panel appears e.g.: scheduled posts. I think we may need to add a mechanism that allows plugins to change the rules of when post publish appears so they can make the post publish appear even in more common publishing situations.

gziolo · 2018-05-18T08:50:02Z

Regarding post publish it also worked well but only when post publish panel appears e.g.: scheduled posts. I think we may need to add a mechanism that allows plugins to change the rules of when post publish appears so they can make the post publish appear even in more common publishing situations.

Yes, this was confusing also for me. I don't know the details why it works how it works, but it would be nice to be able to change it.

gziolo · 2018-05-18T09:55:26Z

It's a regression. You should always see the post publish panel. It gets immediately closed when publish a post in here:
https://github.com/WordPress/gutenberg/blob/master/editor/components/post-publish-panel/index.js#L48-L50

karmatosed

Leaving a design review 👍

gziolo · 2018-05-21T09:15:18Z

It's a regression. You should always see the post publish panel. It gets immediately closed when publish a post in here:
https://github.com/WordPress/gutenberg/blob/master/editor/components/post-publish-panel/index.js#L48-L50

@jorgefilipecosta it was fixed with #6822. You should always see both panels when publishing posts.

mtias · 2018-05-21T10:05:54Z

edit-post/README.md

+
+```jsx
+const { __ } = wp.i18n;
+const { PluginPrePublishPanel } = wp.editPost;


Shouldn't these APIs just be EditorPrePublishPanel instead of Plugin...?

We prefixed all other occurrences with Plugin in the past, this just keeps the convention.

See the list of components in https://github.com/WordPress/gutenberg/blob/efa8098979a45127d7ac74ec0df600496c19bdac/edit-post/README.md

Yes, but I'm not sure it makes a lot of sense for every piece. :) PluginSidebar and the plugin menu item make sense because their entire purpose is plugin based.

I'm not attached to this, we can update.
What about PluginPostStatustInfo, should we also rename to EditorPostStatusInfo?

I did some more research. We already have PostPublishPanel. See:
https://github.com/WordPress/gutenberg/blob/master/editor/components/post-publish-panel/index.js#L66
which uses editor-post-publish-panel class name. It might be a bit confusing. Maybe we should keep this Plugin prefix to make it clear that this is meant to be used by plugins.

Yes, that's fine, was just a comment because it felt a bit weird to go with Plugin as a generic prefix across the board.

mtias · 2018-05-21T18:30:49Z

CONTRIBUTORS.md

@@ -94,3 +94,4 @@ This list is manually curated to include valuable contributions by volunteers th
 | @Cloud887 |
 | @hblackett |
 | @vishalkakadiya |
+| @c-shultz |


does this belong here?

Yes. See:

Continues work started by @c-shultz in #5795.

mtias · 2018-05-22T11:13:04Z

All good here?

gziolo · 2018-05-22T11:14:31Z

Yes, let's proceed 👍

aduth · 2018-05-23T20:02:13Z

edit-post/components/layout/index.js

@@ -84,6 +86,8 @@ function Layout( {
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
+					renderPrePublishExtension={ () => <PluginPrePublishPanel.Slot /> }


This will cause render reconciliation more than necessary because it's creating a new function each render.

Why not hoist to a top-level variable? Or could renderPrePublishExtension be interpreted as a component, so we could pass the PluginPrePublishPanel.Slot reference directly instead of a function?

Interesting, I would also think we would cause render reconciliation more than necessary because we are passing new props on each rerender, but the react samples for the Render Props pattern use something similar https://reactjs.org/docs/render-props.html, they are also creating inline functions and passing them as props. I see this practice being used widely. I'm curious if react has some an optimization for the inline functions rendering React components.

We probably can pass those slots as components in this case. Opening PR soon.

Done: #6938.

gziolo added [Type] Enhancement A suggestion for improvement. [Feature] Extensibility The ability to extend blocks or the editing experience [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels May 17, 2018

gziolo added this to the 3.0 milestone May 17, 2018

gziolo self-assigned this May 17, 2018

gziolo requested a review from a team May 17, 2018 11:36

gziolo added the Needs Design Feedback Needs general design feedback. label May 17, 2018

gziolo mentioned this pull request May 17, 2018

Publicize: Adding to Gutenberg Extensibility for Publicize Support #5795

Closed

3 tasks

jorgefilipecosta reviewed May 17, 2018

View reviewed changes

karmatosed removed the Needs Design Feedback Needs general design feedback. label May 20, 2018

karmatosed self-requested a review May 20, 2018 16:56

karmatosed approved these changes May 20, 2018

View reviewed changes

gziolo added 2 commits May 21, 2018 11:13

Extensibility: Add publish panels support for plugins

82eaceb

Edit Post: Add unit tests to the publish panels fills

efa8098

gziolo force-pushed the add/plugin-publish-panels branch from 18bc41e to efa8098 Compare May 21, 2018 09:13

mtias reviewed May 21, 2018

View reviewed changes

gziolo merged commit 79611cc into master May 22, 2018

gziolo deleted the add/plugin-publish-panels branch May 22, 2018 11:14

gziolo mentioned this pull request May 22, 2018

Jetpack Publicize missing from side panels #3264

Closed

jorgefilipecosta mentioned this pull request May 22, 2018

[Try] Add ability to extend content of other sidebars. #6899

Closed

aduth reviewed May 23, 2018

View reviewed changes

gziolo mentioned this pull request May 24, 2018

Edit Post: Improve perf for PublishPanel and extenstions #6938

Merged

4 tasks

adamsilverstein mentioned this pull request May 24, 2018

Move warning messages to pre-publish panel 10up/insecure-content-warning#14

Closed

kraftbj mentioned this pull request Jun 18, 2018

Publicize: Gutenberg integration missing Automattic/jetpack#9039

Closed

gziolo mentioned this pull request Jul 16, 2018

Block settings extensibility #7895

Merged

2 tasks

tyxla mentioned this pull request Jul 30, 2018

SDK: Add Jetpack publicize extension Automattic/wp-calypso#26389

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extensibility: Add publish panels support for plugins #6798

Extensibility: Add publish panels support for plugins #6798

gziolo commented May 17, 2018 •

edited

Loading

jorgefilipecosta May 17, 2018 •

edited

Loading

gziolo May 18, 2018

jorgefilipecosta May 22, 2018 •

edited

Loading

gziolo May 23, 2018

jorgefilipecosta commented May 17, 2018 •

edited

Loading

gziolo commented May 18, 2018

gziolo commented May 18, 2018

karmatosed left a comment

gziolo commented May 21, 2018

mtias May 21, 2018

gziolo May 21, 2018

gziolo May 21, 2018

mtias May 21, 2018

gziolo May 21, 2018

gziolo May 21, 2018

mtias May 21, 2018

mtias May 21, 2018

gziolo May 22, 2018

mtias May 22, 2018

mtias commented May 22, 2018

gziolo commented May 22, 2018

aduth May 23, 2018

jorgefilipecosta May 23, 2018

gziolo May 24, 2018

gziolo May 24, 2018

Extensibility: Add publish panels support for plugins #6798

Extensibility: Add publish panels support for plugins #6798

Conversation

gziolo commented May 17, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Pre-publish

Post-publish

Types of changes

Checklist:

jorgefilipecosta May 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta May 22, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented May 17, 2018 • edited Loading

gziolo commented May 18, 2018

gziolo commented May 18, 2018

karmatosed left a comment

Choose a reason for hiding this comment

gziolo commented May 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented May 22, 2018

gziolo commented May 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented May 17, 2018 •

edited

Loading

jorgefilipecosta May 17, 2018 •

edited

Loading

jorgefilipecosta May 22, 2018 •

edited

Loading

jorgefilipecosta commented May 17, 2018 •

edited

Loading