div {
- -webkit-animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
- animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
- background: currentColor;
- border-radius: 50px;
- height: 16%;
- left: 49%;
- opacity: 0;
- position: absolute;
- top: 43%;
- width: 6%;
-}
-
-.emotion-4 .InnerBar1 {
- -webkit-animation-delay: 0s;
- animation-delay: 0s;
- -webkit-transform: rotate( 0deg ) translate( 0, -130% );
- -moz-transform: rotate( 0deg ) translate( 0, -130% );
- -ms-transform: rotate( 0deg ) translate( 0, -130% );
- transform: rotate( 0deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar2 {
- -webkit-animation-delay: -0.9167s;
- animation-delay: -0.9167s;
- -webkit-transform: rotate( 30deg ) translate( 0, -130% );
- -moz-transform: rotate( 30deg ) translate( 0, -130% );
- -ms-transform: rotate( 30deg ) translate( 0, -130% );
- transform: rotate( 30deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar3 {
- -webkit-animation-delay: -0.833s;
- animation-delay: -0.833s;
- -webkit-transform: rotate( 60deg ) translate( 0, -130% );
- -moz-transform: rotate( 60deg ) translate( 0, -130% );
- -ms-transform: rotate( 60deg ) translate( 0, -130% );
- transform: rotate( 60deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar4 {
- -webkit-animation-delay: -0.7497s;
- animation-delay: -0.7497s;
- -webkit-transform: rotate( 90deg ) translate( 0, -130% );
- -moz-transform: rotate( 90deg ) translate( 0, -130% );
- -ms-transform: rotate( 90deg ) translate( 0, -130% );
- transform: rotate( 90deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar5 {
- -webkit-animation-delay: -0.667s;
- animation-delay: -0.667s;
- -webkit-transform: rotate( 120deg ) translate( 0, -130% );
- -moz-transform: rotate( 120deg ) translate( 0, -130% );
- -ms-transform: rotate( 120deg ) translate( 0, -130% );
- transform: rotate( 120deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar6 {
- -webkit-animation-delay: -0.5837s;
- animation-delay: -0.5837s;
- -webkit-transform: rotate( 150deg ) translate( 0, -130% );
- -moz-transform: rotate( 150deg ) translate( 0, -130% );
- -ms-transform: rotate( 150deg ) translate( 0, -130% );
- transform: rotate( 150deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar7 {
- -webkit-animation-delay: -0.5s;
- animation-delay: -0.5s;
- -webkit-transform: rotate( 180deg ) translate( 0, -130% );
- -moz-transform: rotate( 180deg ) translate( 0, -130% );
- -ms-transform: rotate( 180deg ) translate( 0, -130% );
- transform: rotate( 180deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar8 {
- -webkit-animation-delay: -0.4167s;
- animation-delay: -0.4167s;
- -webkit-transform: rotate( 210deg ) translate( 0, -130% );
- -moz-transform: rotate( 210deg ) translate( 0, -130% );
- -ms-transform: rotate( 210deg ) translate( 0, -130% );
- transform: rotate( 210deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar9 {
- -webkit-animation-delay: -0.333s;
- animation-delay: -0.333s;
- -webkit-transform: rotate( 240deg ) translate( 0, -130% );
- -moz-transform: rotate( 240deg ) translate( 0, -130% );
- -ms-transform: rotate( 240deg ) translate( 0, -130% );
- transform: rotate( 240deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar10 {
- -webkit-animation-delay: -0.2497s;
- animation-delay: -0.2497s;
- -webkit-transform: rotate( 270deg ) translate( 0, -130% );
- -moz-transform: rotate( 270deg ) translate( 0, -130% );
- -ms-transform: rotate( 270deg ) translate( 0, -130% );
- transform: rotate( 270deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar11 {
- -webkit-animation-delay: -0.167s;
- animation-delay: -0.167s;
- -webkit-transform: rotate( 300deg ) translate( 0, -130% );
- -moz-transform: rotate( 300deg ) translate( 0, -130% );
- -ms-transform: rotate( 300deg ) translate( 0, -130% );
- transform: rotate( 300deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar12 {
- -webkit-animation-delay: -0.0833s;
- animation-delay: -0.0833s;
- -webkit-transform: rotate( 330deg ) translate( 0, -130% );
- -moz-transform: rotate( 330deg ) translate( 0, -130% );
- -ms-transform: rotate( 330deg ) translate( 0, -130% );
- transform: rotate( 330deg ) translate( 0, -130% );
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`props should render size 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -2,16 +2,16 @@
-
-
-
-`;
diff --git a/packages/components/src/ui/spinner/test/index.js b/packages/components/src/ui/spinner/test/index.js
deleted file mode 100644
index aa9a4360fedff..0000000000000
--- a/packages/components/src/ui/spinner/test/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Spinner } from '..';
-
-describe( 'props', () => {
- test( 'should render correctly', () => {
- const { container } = render(
);
- expect( container ).toMatchSnapshot();
- } );
-
- test( 'should render color', () => {
- const { container } = render(
);
- const { container: secondRenderContainer } = render(
-
- );
- expect( secondRenderContainer ).toMatchDiffSnapshot( container );
- } );
-
- test( 'should render size', () => {
- const { container } = render(
);
- const { container: secondRenderContainer } = render(
-
- );
- expect( secondRenderContainer ).toMatchDiffSnapshot( container );
- } );
-} );
diff --git a/packages/components/src/ui/spinner/utils.js b/packages/components/src/ui/spinner/utils.js
deleted file mode 100644
index 843ec1133b953..0000000000000
--- a/packages/components/src/ui/spinner/utils.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const BASE_SIZE = 16;
-export const WRAPPER_SIZE = 36;
From 60670d77c03a34414ac46ad555c232c3e9c5ff5f Mon Sep 17 00:00:00 2001
From: JuanMa
Date: Fri, 4 Aug 2023 18:12:33 +0100
Subject: [PATCH 06/12] Add code requirements to Interactivity API Docs
(#53342)
* added code requirements and TOC
* Apply suggestions from code review
---------
Co-authored-by: Luis Herranz
---
.../interactivity/docs/1-getting-started.md | 46 +++++++++++++++++--
1 file changed, 41 insertions(+), 5 deletions(-)
diff --git a/packages/interactivity/docs/1-getting-started.md b/packages/interactivity/docs/1-getting-started.md
index 9570f6c09c56e..4171968f461c8 100644
--- a/packages/interactivity/docs/1-getting-started.md
+++ b/packages/interactivity/docs/1-getting-started.md
@@ -2,6 +2,21 @@
To get started with the Interactivity API, you can follow this [**Quick Start Guide**](#quick-start-guide) by taking into account the [current requirements of the Interactivity API](#requirements-of-the-interactivity-api) (especially the need for Gutenberg 16.2 or later).
+## Table of Contents
+
+- [Quick Start Guide](#quick-start-guide)
+ [1. Scaffold an interactive block](#1-scaffold-an-interactive-block)
+ [2. Generate the build](#2-generate-the-build)
+ [3. Use it in your WordPress installation ](#3-use-it-in-your-wordpress-installation)
+- [Requirements of the Interactivity API](#requirements-of-the-interactivity-aPI)
+ - [A local WordPress installation](#a-local-wordpress-installation)
+ - [Latest vesion of Gutenberg](#latest-vesion-of-gutenberg)
+ - [Node.js](#nodejs)
+ - [Code requirements](#code-requirements)
+ - [Add `interactivity` support to `block.json`](#add-interactivity-support-to-blockjson)
+
+
+
## Quick Start Guide
#### 1. Scaffold an interactive block
@@ -34,9 +49,7 @@ At this point you should be able to insert the "My First Interactive Block" bloc
To start working with the Interactivity API you'll need to have a [proper WordPress development environment for blocks](https://developer.wordpress.org/block-editor/getting-started/devenv/) which should include:
-- A local WordPress installation
-- Gutenberg 16.2 or later
-- Node.js
+
#### A local WordPress installation
@@ -48,6 +61,29 @@ To get quickly started, [`wp-now`](https://www.npmjs.com/package/@wp-now/wp-now)
The Interactivity API is currently only available as an experimental feature from Gutenberg 16.2, so you'll need to have Gutenberg 16.2 or higher version installed and activated in your WordPress installation.
-#### Node
+#### Node.js
+
+Block development requires [Node](https://nodejs.org/en), so you'll need to have Node installed and running on your machine. Any version modern should work, but please check the minimum version requirements if you run into any issues with any of the Node.js tools used in WordPress development.
+
+#### Code requirements
+
+##### Add `interactivity` support to `block.json`
+
+To indicate that our block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Inteactivity API features, we do so by adding `"interactivity": true` to the `supports` attribute of our block's `block.json`
+
+```
+"supports": {
+ "interactivity": true
+},
+```
+
+##### Add `wp-interactive` directive to a DOM element
+
+To "activate" the Interactivity API in a DOM elements and its children we add the [`wp-interactive` directive](./2-api-reference.md#wp-interactive) in our `render.php` or `save.js`
+
-Block development requires [Node](https://nodejs.org/en), so you'll need to have Node installed and running on your machine. Any version should work, but please check the minimum version requirements if you run into any issues with any of the Node.js tools used in WordPress development.
\ No newline at end of file
+```html
+
+
+
+```
\ No newline at end of file
From 904fd2400245914b00923d05f21de3335ab69a32 Mon Sep 17 00:00:00 2001
From: BaNgan
Date: Sat, 5 Aug 2023 01:27:41 +0700
Subject: [PATCH 07/12] MenuGroup: Add Storybook stories (#53090)
---
.../src/menu-group/stories/index.tsx | 83 +++++++++++++++++++
1 file changed, 83 insertions(+)
create mode 100644 packages/components/src/menu-group/stories/index.tsx
diff --git a/packages/components/src/menu-group/stories/index.tsx b/packages/components/src/menu-group/stories/index.tsx
new file mode 100644
index 0000000000000..1370642258743
--- /dev/null
+++ b/packages/components/src/menu-group/stories/index.tsx
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '..';
+import MenuItem from '../../menu-item';
+import MenuItemsChoice from '../../menu-items-choice';
+
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+const meta: ComponentMeta< typeof MenuGroup > = {
+ title: 'Components/MenuGroup',
+ component: MenuGroup,
+ argTypes: {
+ children: { control: { type: null } },
+ },
+ parameters: {
+ controls: { expanded: true },
+ docs: { source: { state: 'open' } },
+ },
+};
+export default meta;
+
+const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
+ return (
+
+
+
+
+ );
+};
+
+export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );
+
+const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
+ const [ mode, setMode ] = useState( 'visual' );
+ const choices = [
+ {
+ value: 'visual',
+ label: 'Visual editor',
+ },
+ {
+ value: 'text',
+ label: 'Code editor',
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+ setMode( newMode ) }
+ onHover={ () => {} }
+ />
+
+
+ );
+};
+
+/**
+ * When other menu items exist above or below a MenuGroup, the group
+ * should have a divider line between it and the adjacent item.
+ */
+export const WithSeperator = MultiGroupsTemplate.bind( {} );
+WithSeperator.args = {
+ ...Default.args,
+ hideSeparator: false,
+ label: 'Editor',
+};
From 003a7118a0609b5025f89bfafce57291c65d6b67 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Fri, 4 Aug 2023 21:32:20 +0200
Subject: [PATCH 08/12] Safari: fix ArrowUp on empty paragraph (#53341)
---
packages/rich-text/src/to-tree.js | 4 +---
...d-navigate-empty-paragraphs-1-chromium.txt | 11 ----------
.../specs/editor/various/writing-flow.spec.js | 20 +++++++++++++++++--
3 files changed, 19 insertions(+), 16 deletions(-)
delete mode 100644 test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index 8a1c3ff074a55..4db974aaad714 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -378,9 +378,7 @@ export function toTree( {
attributes: {
'data-rich-text-placeholder': placeholder,
// Necessary to prevent the placeholder from catching
- // selection. The placeholder is also not editable after
- // all.
- contenteditable: 'false',
+ // selection and being editable.
style: 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;',
},
} );
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt
deleted file mode 100644
index 0e4af197a8815..0000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-
-1
-
-
-
-
-
-
-
-3
-
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 99de69819d9f3..0c56fe9de0b21 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -427,7 +427,10 @@ test.describe( 'Writing Flow', () => {
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
- test( 'should navigate empty paragraphs', async ( { editor, page } ) => {
+ test( 'should navigate empty paragraphs (@firefox, @webkit)', async ( {
+ editor,
+ page,
+ } ) => {
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );
await page.keyboard.press( 'Enter' );
@@ -438,7 +441,20 @@ test.describe( 'Writing Flow', () => {
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.type( '3' );
- expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: { content: '1' },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: { content: '' },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: { content: '3' },
+ },
+ ] );
} );
test( 'should navigate contenteditable with padding', async ( {
From ef8a9e07b31e1a77c5f5b856bd66e47b219939bf Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sat, 5 Aug 2023 04:40:43 +0900
Subject: [PATCH 09/12] Image Block: Don't render `DimensionsTool` if it is not
resizable (#53181)
---
packages/block-library/src/image/image.js | 38 ++++++++++++-----------
1 file changed, 20 insertions(+), 18 deletions(-)
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index a880c20ed59ab..fe8f8e7f6aeb1 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -477,24 +477,26 @@ export default function Image( {
/>
) }
- {
- // Rebuilding the object forces setting `undefined`
- // for values that are removed since setAttributes
- // doesn't do anything with keys that aren't set.
- setAttributes( {
- width: newValue.width,
- height: newValue.height,
- scale: newValue.scale,
- aspectRatio: newValue.aspectRatio,
- } );
- } }
- defaultScale="cover"
- defaultAspectRatio="auto"
- scaleOptions={ scaleOptions }
- unitsOptions={ dimensionsUnitsOptions }
- />
+ { isResizable && (
+ {
+ // Rebuilding the object forces setting `undefined`
+ // for values that are removed since setAttributes
+ // doesn't do anything with keys that aren't set.
+ setAttributes( {
+ width: newValue.width,
+ height: newValue.height,
+ scale: newValue.scale,
+ aspectRatio: newValue.aspectRatio,
+ } );
+ } }
+ defaultScale="cover"
+ defaultAspectRatio="auto"
+ scaleOptions={ scaleOptions }
+ unitsOptions={ dimensionsUnitsOptions }
+ />
+ ) }
Date: Sat, 5 Aug 2023 08:34:35 +0400
Subject: [PATCH 10/12] Edit Post: Use hooks instead of HoC in
'PluginDocumentSettingPanel' (#53290)
---
packages/edit-post/README.md | 3 +-
.../plugin-document-setting-panel/index.js | 112 ++++++++----------
2 files changed, 54 insertions(+), 61 deletions(-)
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index c9686fb8610ee..8e448405aea78 100644
--- a/packages/edit-post/README.md
+++ b/packages/edit-post/README.md
@@ -146,10 +146,11 @@ registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
_Parameters_
- _props_ `Object`: Component properties.
-- _props.name_ `[string]`: The machine-friendly name for the panel.
+- _props.name_ `string`: The machine-friendly name for the panel.
- _props.className_ `[string]`: An optional class name added to the row.
- _props.title_ `[string]`: The title of the panel
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+- _props.children_ `WPElement`: Children to be rendered
_Returns_
diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
index d83c206194672..ace9f9bec2663 100644
--- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
@@ -6,9 +6,8 @@
* WordPress dependencies
*/
import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
+import { useDispatch, useSelect } from '@wordpress/data';
import warning from '@wordpress/warning';
/**
@@ -19,47 +18,15 @@ import { store as editPostStore } from '../../../store';
const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
-const PluginDocumentSettingFill = ( {
- isEnabled,
- panelName,
- opened,
- onToggle,
- className,
- title,
- icon,
- children,
-} ) => {
- return (
- <>
-
-
- { isEnabled && (
-
- { children }
-
- ) }
-
-
- );
-};
-
/**
* Renders items below the Status & Availability panel in the Document Sidebar.
*
* @param {Object} props Component properties.
- * @param {string} [props.name] The machine-friendly name for the panel.
+ * @param {string} props.name The machine-friendly name for the panel.
* @param {string} [props.className] An optional class name added to the row.
* @param {string} [props.title] The title of the panel
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {WPElement} props.children Children to be rendered
*
* @example
* ```js
@@ -102,30 +69,55 @@ const PluginDocumentSettingFill = ( {
*
* @return {WPComponent} The component to be rendered.
*/
-const PluginDocumentSettingPanel = compose(
- withPluginContext( ( context, ownProps ) => {
- if ( undefined === ownProps.name ) {
- warning( 'PluginDocumentSettingPanel requires a name property.' );
- }
- return {
- panelName: `${ context.name }/${ ownProps.name }`,
- };
- } ),
- withSelect( ( select, { panelName } ) => {
- return {
- opened: select( editPostStore ).isEditorPanelOpened( panelName ),
- isEnabled:
- select( editPostStore ).isEditorPanelEnabled( panelName ),
- };
- } ),
- withDispatch( ( dispatch, { panelName } ) => ( {
- onToggle() {
- return dispatch( editPostStore ).toggleEditorPanelOpened(
- panelName
- );
+const PluginDocumentSettingPanel = ( {
+ name,
+ className,
+ title,
+ icon,
+ children,
+} ) => {
+ const { name: pluginName } = usePluginContext();
+ const panelName = `${ pluginName }/${ name }`;
+ const { opened, isEnabled } = useSelect(
+ ( select ) => {
+ const { isEditorPanelOpened, isEditorPanelEnabled } =
+ select( editPostStore );
+
+ return {
+ opened: isEditorPanelOpened( panelName ),
+ isEnabled: isEditorPanelEnabled( panelName ),
+ };
},
- } ) )
-)( PluginDocumentSettingFill );
+ [ panelName ]
+ );
+ const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+ if ( undefined === name ) {
+ warning( 'PluginDocumentSettingPanel requires a name property.' );
+ }
+
+ return (
+ <>
+
+
+ { isEnabled && (
+ toggleEditorPanelOpened( panelName ) }
+ >
+ { children }
+
+ ) }
+
+
+ );
+};
PluginDocumentSettingPanel.Slot = Slot;
From b4d1a769f3b67a1008383ead727dc34049aa0820 Mon Sep 17 00:00:00 2001
From: George Mamadashvili
Date: Sat, 5 Aug 2023 09:29:05 +0400
Subject: [PATCH 11/12] Edit Post: Replace 'withPluginContext' in the
'PluginPostPublishPanel' (#53302)
* Edit Post: Replace 'withPluginContext' in the 'PluginPostPublishPanel'
* Update packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
* Update packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---------
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---
packages/edit-post/README.md | 1 +
.../plugin-post-publish-panel/index.js | 50 +++++++++----------
2 files changed, 24 insertions(+), 27 deletions(-)
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index 8e448405aea78..d6ad06e8e8999 100644
--- a/packages/edit-post/README.md
+++ b/packages/edit-post/README.md
@@ -260,6 +260,7 @@ _Parameters_
- _props.title_ `[string]`: Title displayed at the top of the panel.
- _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+- _props.children_ `WPElement`: Children to be rendered
_Returns_
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
index aa697e32cf96e..f355cacd76308 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
@@ -1,30 +1,11 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
import { createSlotFill, PanelBody } from '@wordpress/components';
const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
-const PluginPostPublishPanelFill = ( {
- children,
- className,
- title,
- initialOpen = false,
- icon,
-} ) => (
-
-
- { children }
-
-
-);
/**
* Renders provided content to the post-publish panel in the publish flow
* (side panel that opens after a user publishes the post).
@@ -34,6 +15,7 @@ const PluginPostPublishPanelFill = ( {
* @param {string} [props.title] Title displayed at the top of the panel.
* @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {WPElement} props.children Children to be rendered
*
* @example
* ```js
@@ -73,14 +55,28 @@ const PluginPostPublishPanelFill = ( {
*
* @return {WPComponent} The component to be rendered.
*/
+const PluginPostPublishPanel = ( {
+ children,
+ className,
+ title,
+ initialOpen = false,
+ icon,
+} ) => {
+ const { icon: pluginIcon } = usePluginContext();
-const PluginPostPublishPanel = compose(
- withPluginContext( ( context, ownProps ) => {
- return {
- icon: ownProps.icon || context.icon,
- };
- } )
-)( PluginPostPublishPanelFill );
+ return (
+
+
+ { children }
+
+
+ );
+};
PluginPostPublishPanel.Slot = Slot;
From 25215a997e23b8b4b05b122ccb1c2778dcd4cfa7 Mon Sep 17 00:00:00 2001
From: George Mamadashvili
Date: Sat, 5 Aug 2023 10:17:43 +0400
Subject: [PATCH 12/12] Edit Post: Replace 'withPluginContext' in the
'PluginPrePublishPanel' (#53304)
* Edit Post: Replace 'withPluginContext' in the 'PluginPrePublishPanel'
* Update packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
* Update packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---------
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---
packages/edit-post/README.md | 1 +
.../sidebar/plugin-pre-publish-panel/index.js | 53 +++++++++----------
2 files changed, 26 insertions(+), 28 deletions(-)
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index d6ad06e8e8999..e6a652975aa28 100644
--- a/packages/edit-post/README.md
+++ b/packages/edit-post/README.md
@@ -357,6 +357,7 @@ _Parameters_
- _props.title_ `[string]`: Title displayed at the top of the panel.
- _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+- _props.children_ `WPElement`: Children to be rendered
_Returns_
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
index b5912df3d498c..91392ab7883ed 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
@@ -2,28 +2,9 @@
* WordPress dependencies
*/
import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+import { usePluginContext } from '@wordpress/plugins';
-const PluginPrePublishPanelFill = ( {
- children,
- className,
- title,
- initialOpen = false,
- icon,
-} ) => (
-
-
- { children }
-
-
-);
+const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
/**
* Renders provided content to the pre-publish side panel in the publish flow
@@ -37,6 +18,7 @@ const PluginPrePublishPanelFill = ( {
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/)
* icon slug string, or an SVG WP element, to be rendered when
* the sidebar is pinned to toolbar.
+ * @param {WPElement} props.children Children to be rendered
*
* @example
* ```js
@@ -76,13 +58,28 @@ const PluginPrePublishPanelFill = ( {
*
* @return {WPComponent} The component to be rendered.
*/
-const PluginPrePublishPanel = compose(
- withPluginContext( ( context, ownProps ) => {
- return {
- icon: ownProps.icon || context.icon,
- };
- } )
-)( PluginPrePublishPanelFill );
+const PluginPrePublishPanel = ( {
+ children,
+ className,
+ title,
+ initialOpen = false,
+ icon,
+} ) => {
+ const { icon: pluginIcon } = usePluginContext();
+
+ return (
+
+
+ { children }
+
+
+ );
+};
PluginPrePublishPanel.Slot = Slot;
+