-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Site Editor - add basic plugin support #34460
Conversation
Size Change: +206 B (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
<ComplementaryAreaMoreMenuItem | ||
// Menu item is marked with unstable prop for backward compatibility. | ||
// @see https://github.com/WordPress/gutenberg/issues/14457 | ||
__unstableExplicitMenuItem |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a note that I looked into the implications of taking __unstableExplicitMenuItem
out, since there won't be a concern with backwards compatibility, as we're just adding this to the Site Editor now.
If this attribute was removed, PluginSidebar
components can't register a companion PluginSidebarMoreMenuItem
when isPinnable={ true }
. The PluginSidebarMoreMenuItem
is generated automatically in that case, and is duplicated if it's also declared manually.
I think it's best to leave __unstableExplicitMenuItem
in place:
- Keeps the API consistent between the Post and Site editors
- If
PluginSidebarMoreMenuItem
is declared, it is used as thePluginSidebar
's menu item whetherisPinnable
is set totrue
orfalse
, which seems less confusing, overall
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This all looks good, seems reasonable, and tests well for me.
✅ PluginMoreMenuItem
works as expected, including href
and onClick
props
✅ PluginSidebar
works as expected
- Shows the topbar when
isPinnable
istrue
(and vise versa) - Auto generates the more menu item when
isPinnable
istrue
and there's noPluginSidebarMoreMenuItem
declared
✅ PluginSidebarMoreMenuItem
activates the plugin sidebar and inherits the plugin icon, if not set
✅ Sidebar actions open and close the plugin sidebar as expected
Also
- The implementation matches the Post Editor
- The inline documentation looks correct (with just one small error, see comment)
packages/edit-site/src/components/header/plugin-more-menu-item/index.js
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/header/plugin-more-menu-item/index.js
Outdated
Show resolved
Hide resolved
TestingRequirementsPluginSidebar
PluginSidebarMoreMenuItem & PluginMoreMenuItem
openGeneralSidebar / closeGeneralSidebar actions
Browsers
Note
|
* | ||
* @yield {Object} Action object. | ||
*/ | ||
export function* openGeneralSidebar( name ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NB:
Does this need to be handled as a control effect because it's dispatching to a separate store?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, we use controls.dispatch to send this over to the interfaceStore as is done with the equivalent actions in the edit-post store. Or were you proposing a different approach here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lgtm 🚢
Note:
Many conventions implemented in this PR (use of ComplementaryArea
, ActionItem
, SlotFill API
etc.) were carried over from the edit-post
package.
* trunk: [RNMobile][Embed block] Add device's locale to preview content (#33858) Update AlignmentMatrixControl docs post merge. (#34662) Chore: Update caniuse package to the latest version (#34685) Chore: Move `react-native-url-polyfill` to dev dependencies (#34687) Site Editor - add basic plugin support (#34460) ESLint Plugin: Use Jest related rules only when the package is installed (#33120) Update `@wordpress/components` package's contributing guidelines (#33960) chore(release): publish Update changelog files [RNMobile] [Embed block] Fix content disappearing on Android when switching light/dark mode (#34207) Scripts: Convert legacy entry point arguments for compatibility with webpack 5 (#34264) Update justication control in `flex` layout (#34651) Block Editor: Rename experimental prop used in `BlockControls` (#34644) Fix social links deprecation (#34639)
Description
Adds basic plugin support to the Site Editor with edit-site specific version of:
How has this been tested?
Tested by registering a plugin with these new components and using them in the Site Editor.
PluginSidebar
Register the plugin and add the sidebar:
isPinnable={ false }
prop to thePluginSidebar
component in the example above. Reload the editor and verify neither of these buttons are present.PluginSidebarMoreMenuItem & PluginMoreMenuItem
Register the plugin, pass the
isPinnalbe={ false }
prop to thePluginSidebar
component, and register the two more menu items.PluginSidebarMoreMenuItem
exists in the more menu (labeled "Sidebar Menu Item" in our example code above) and that clicking on this opens the plugin sidebar.PluginMoreMenuItem
exists in the more menu (labeled "Plugin menu item" in the example code above), although clicking should have no effect as we have not set any link or button action for the plugin.openGeneralSidebar / closeGeneralSidebar actions
With the plugin registered and site editor loaded, open the console window and verify that the following actions open and close the plugin's sidebar as expceted:
wp.data.dispatch( 'core/edit-site' ).openGeneralSidebar( 'plugin-sidebar-test/plugin-sidebar-test' )
wp.data.dispatch( 'core/edit-site' ).closeGeneralSidebar( 'plugin-sidebar-test/plugin-sidebar-test' )
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.js
files for terms that need renaming or removal).