From ce83d938739e60c694cab05a64cabd4607ed385d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 2 May 2023 19:04:25 +0300 Subject: [PATCH 1/2] Introduce new PluginTemplateSettingPanel slot --- .../plugin-template-setting-panel/index.js | 33 +++++++++++++++++++ .../src/components/sidebar-edit-mode/index.js | 21 +++++++++--- .../sidebar-edit-mode/template-card/index.js | 10 +----- .../index.js} | 0 packages/edit-site/src/index.js | 1 + 5 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 packages/edit-site/src/components/plugin-template-setting-panel/index.js rename packages/edit-site/src/components/sidebar-edit-mode/{template-card/last-revision.js => template-revisions/index.js} (100%) diff --git a/packages/edit-site/src/components/plugin-template-setting-panel/index.js b/packages/edit-site/src/components/plugin-template-setting-panel/index.js new file mode 100644 index 0000000000000..b979cf0d79335 --- /dev/null +++ b/packages/edit-site/src/components/plugin-template-setting-panel/index.js @@ -0,0 +1,33 @@ +/** + * Defines an extensibility slot for the Template sidebar. + */ + +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +export const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' ); + +const PluginTemplateSettingPanel = Fill; +PluginTemplateSettingPanel.Slot = Slot; + +/** + * Renders items in the Template Sidebar below the main information + * like the Template Card. + * + * @example + * ```jsx + * // Using ESNext syntax + * import { MyTemplateSettingTest } from '@wordpress/edit-site'; + * + * const MyTemplateSettingTest = () => ( + * + *

Hello, World!

+ * + * ); + * ``` + * + * @return {WPComponent} The component to be rendered. + */ +export default PluginTemplateSettingPanel; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js index 48574b783f5a2..b9aeb1a2cdd00 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js @@ -1,10 +1,10 @@ /** * WordPress dependencies */ -import { createSlotFill, PanelBody } from '@wordpress/components'; +import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components'; import { isRTL, __ } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; -import { useEffect, Fragment } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as interfaceStore } from '@wordpress/interface'; import { store as blockEditorStore } from '@wordpress/block-editor'; @@ -16,7 +16,9 @@ import DefaultSidebar from './default-sidebar'; import GlobalStylesSidebar from './global-styles-sidebar'; import { STORE_NAME } from '../../store/constants'; import SettingsHeader from './settings-header'; +import LastRevision from './template-revisions'; import TemplateCard from './template-card'; +import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants'; import { store as editSiteStore } from '../../store'; @@ -74,9 +76,18 @@ export function SidebarComplementaryAreaFills() { headerClassName="edit-site-sidebar-edit-mode__panel-tabs" > { sidebarName === SIDEBAR_TEMPLATE && ( - - - + <> + + + + + + + + ) } { sidebarName === SIDEBAR_BLOCK && ( diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js index da03a769b306c..d43dca3b803f5 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js @@ -1,9 +1,8 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { PanelRow, Icon } from '@wordpress/components'; +import { Icon } from '@wordpress/components'; import { store as editorStore } from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -14,7 +13,6 @@ import { decodeEntities } from '@wordpress/html-entities'; import { store as editSiteStore } from '../../../store'; import TemplateActions from './template-actions'; import TemplateAreas from './template-areas'; -import LastRevision from './last-revision'; export default function TemplateCard() { const { @@ -56,12 +54,6 @@ export default function TemplateCard() { - - - ); } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/last-revision.js b/packages/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js similarity index 100% rename from packages/edit-site/src/components/sidebar-edit-mode/template-card/last-revision.js rename to packages/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 264288b5ec627..e696a441bb10d 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -105,3 +105,4 @@ export function reinitializeEditor() { export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar'; export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item'; export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item'; +export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel'; From 474d7b6a0bdf1df977a77e23e4ad64d679e046f9 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 3 May 2023 09:56:35 +0300 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: George Mamadashvili --- .../src/components/plugin-template-setting-panel/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/plugin-template-setting-panel/index.js b/packages/edit-site/src/components/plugin-template-setting-panel/index.js index b979cf0d79335..6a059dc2520ad 100644 --- a/packages/edit-site/src/components/plugin-template-setting-panel/index.js +++ b/packages/edit-site/src/components/plugin-template-setting-panel/index.js @@ -7,7 +7,7 @@ */ import { createSlotFill } from '@wordpress/components'; -export const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' ); +const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' ); const PluginTemplateSettingPanel = Fill; PluginTemplateSettingPanel.Slot = Slot; @@ -19,7 +19,7 @@ PluginTemplateSettingPanel.Slot = Slot; * @example * ```jsx * // Using ESNext syntax - * import { MyTemplateSettingTest } from '@wordpress/edit-site'; + * import { PluginTemplateSettingPanel } from '@wordpress/edit-site'; * * const MyTemplateSettingTest = () => ( *