From a064fed53e275c8c99b7cd61e6a321db5304bf5b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 14 Dec 2023 11:07:40 +0100 Subject: [PATCH] Site Editor: Add the featured image panel --- .../sidebar/featured-image/index.js | 64 ------------------- .../sidebar/settings-sidebar/index.js | 4 +- .../sidebar-edit-mode/page-panels/index.js | 2 + .../sidebar-edit-mode/template-panel/index.js | 4 +- packages/editor/src/components/index.js | 1 + .../components/post-featured-image/panel.js | 55 ++++++++++++++++ 6 files changed, 63 insertions(+), 67 deletions(-) delete mode 100644 packages/edit-post/src/components/sidebar/featured-image/index.js create mode 100644 packages/editor/src/components/post-featured-image/panel.js diff --git a/packages/edit-post/src/components/sidebar/featured-image/index.js b/packages/edit-post/src/components/sidebar/featured-image/index.js deleted file mode 100644 index b528a7097231d6..00000000000000 --- a/packages/edit-post/src/components/sidebar/featured-image/index.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; -import { - PostFeaturedImage, - PostFeaturedImageCheck, - store as editorStore, -} from '@wordpress/editor'; -import { compose } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - -/** - * Module Constants - */ -const PANEL_NAME = 'featured-image'; - -function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) { - if ( ! isEnabled ) { - return null; - } - - return ( - - - - - - ); -} - -const applyWithSelect = withSelect( ( select ) => { - const { - getEditedPostAttribute, - isEditorPanelEnabled, - isEditorPanelOpened, - } = select( editorStore ); - const { getPostType } = select( coreStore ); - - return { - postType: getPostType( getEditedPostAttribute( 'type' ) ), - isEnabled: isEditorPanelEnabled( PANEL_NAME ), - isOpened: isEditorPanelOpened( PANEL_NAME ), - }; -} ); - -const applyWithDispatch = withDispatch( ( dispatch ) => { - const { toggleEditorPanelOpened } = dispatch( editorStore ); - - return { - onTogglePanel: ( ...args ) => - toggleEditorPanelOpened( PANEL_NAME, ...args ), - }; -} ); - -export default compose( applyWithSelect, applyWithDispatch )( FeaturedImage ); diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 3aac4d59df23b4..465088b39bf80f 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -13,6 +13,7 @@ import { store as interfaceStore } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { store as editorStore, + PostFeaturedImagePanel, PostLastRevisionPanel, PostTaxonomiesPanel, } from '@wordpress/editor'; @@ -22,7 +23,6 @@ import { */ import SettingsHeader from '../settings-header'; import PostStatus from '../post-status'; -import FeaturedImage from '../featured-image'; import PostExcerpt from '../post-excerpt'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; @@ -83,7 +83,7 @@ const SidebarContent = ( { - + diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js index 28741f4ed6db7c..f6c84d8cfd3adc 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js @@ -13,6 +13,7 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { + PostFeaturedImagePanel, PostLastRevisionPanel, PostTaxonomiesPanel, store as editorStore, @@ -100,6 +101,7 @@ export default function PagePanels() { ) } + ); } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js index 97a8ba4db448e8..66b5991872cf96 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js @@ -4,8 +4,9 @@ import { useSelect } from '@wordpress/data'; import { PanelBody } from '@wordpress/components'; import { - PostTaxonomiesPanel, + PostFeaturedImagePanel, PostLastRevisionPanel, + PostTaxonomiesPanel, store as editorStore, } from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; @@ -64,6 +65,7 @@ export default function TemplatePanel() { + ); } diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 4a0dfac03dd5ac..79a4d90663f669 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -34,6 +34,7 @@ export { default as PostExcerpt } from './post-excerpt'; export { default as PostExcerptCheck } from './post-excerpt/check'; export { default as PostFeaturedImage } from './post-featured-image'; export { default as PostFeaturedImageCheck } from './post-featured-image/check'; +export { default as PostFeaturedImagePanel } from './post-featured-image/panel'; export { default as PostFormat } from './post-format'; export { default as PostFormatCheck } from './post-format/check'; export { default as PostLastRevision } from './post-last-revision'; diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js new file mode 100644 index 00000000000000..c53aa153514611 --- /dev/null +++ b/packages/editor/src/components/post-featured-image/panel.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import PostFeaturedImage from './index'; +import PostFeaturedImageCheck from './check'; + +const PANEL_NAME = 'featured-image'; + +function FeaturedImage() { + const { postType, isEnabled, isOpened } = useSelect( ( select ) => { + const { + getEditedPostAttribute, + isEditorPanelEnabled, + isEditorPanelOpened, + } = select( editorStore ); + const { getPostType } = select( coreStore ); + + return { + postType: getPostType( getEditedPostAttribute( 'type' ) ), + isEnabled: isEditorPanelEnabled( PANEL_NAME ), + isOpened: isEditorPanelOpened( PANEL_NAME ), + }; + }, [] ); + + const { toggleEditorPanelOpened } = useDispatch( editorStore ); + + if ( ! isEnabled ) { + return null; + } + + return ( + + toggleEditorPanelOpened( PANEL_NAME ) } + > + + + + ); +} + +export default FeaturedImage;