@wordpress/edit-post 7.20.1 → 7.21.1-next.f8d8eceb.0

package/src/components/sidebar/plugin-post-excerpt/index.js

@@ -0,0 +1,61 @@
+/**
+ * Defines as extensibility slot for the Excerpt panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
+
+/**
+ * Renders a post excerpt panel in the post sidebar.
+ *
+ * @param {Object}  props             Component properties.
+ * @param {string}  [props.className] An optional class name added to the row.
+ * @param {Element} props.children    Children to be rendered.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginPostExcerpt = wp.editPost.PluginPostExcerpt;
+ *
+ * function MyPluginPostExcerpt() {
+ * 	return React.createElement(
+ * 		PluginPostExcerpt,
+ * 		{
+ * 			className: 'my-plugin-post-excerpt',
+ * 		},
+ * 		__( 'Post excerpt custom content' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostExcerpt } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostExcerpt = () => (
+ * 	<PluginPostExcerpt className="my-plugin-post-excerpt">
+ * 		{ __( 'Post excerpt custom content' ) }
+ * 	</PluginPostExcerpt>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPostExcerpt = ( { children, className } ) => {
+	return (
+		<Fill>
+			<PanelRow className={ className }>{ children }</PanelRow>
+		</Fill>
+	);
+};
+
+PluginPostExcerpt.Slot = Slot;
+
+export default PluginPostExcerpt;

package/src/components/sidebar/plugin-post-excerpt/test/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostExcerptPanel from '../';
+
+describe( 'PluginPostExcerptPanel', () => {
+	test( 'renders fill properly', () => {
+		render(
+			<SlotFillProvider>
+				<PluginPostExcerptPanel className="my-plugin-post-excerpt-custom-content">
+					Post Excerpt - Custom content
+				</PluginPostExcerptPanel>
+				<div role="tabpanel">
+					<PluginPostExcerptPanel.Slot />
+				</div>
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Post Excerpt - Custom content'
+		);
+		expect(
+			screen.getByText( 'Post Excerpt - Custom content' )
+		).toHaveClass( 'my-plugin-post-excerpt-custom-content' );
+	} );
+} );

package/src/components/sidebar/post-excerpt/index.js

@@ -7,20 +7,33 @@ import {
 	PostExcerpt as PostExcerptForm,
 	PostExcerptCheck,
 } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import PluginPostExcerpt from '../plugin-post-excerpt';
 
 /**
  * Module Constants
  */
 const PANEL_NAME = 'post-excerpt';
 
-function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
+export default function PostExcerpt() {
+	const { isOpened, isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelOpened, isEditorPanelEnabled } =
+			select( editPostStore );
+
+		return {
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+	const toggleExcerptPanel = () => toggleEditorPanelOpened( PANEL_NAME );
+
 	if ( ! isEnabled ) {
 		return null;
 	}
@@ -30,27 +43,17 @@ function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
 			<PanelBody
 				title={ __( 'Excerpt' ) }
 				opened={ isOpened }
-				onToggle={ onTogglePanel }
+				onToggle={ toggleExcerptPanel }
 			>
-				<PostExcerptForm />
+				<PluginPostExcerpt.Slot>
+					{ ( fills ) => (
+						<>
+							<PostExcerptForm />
+							{ fills }
+						</>
+					) }
+				</PluginPostExcerpt.Slot>
 			</PanelBody>
 		</PostExcerptCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostExcerpt );

package/src/components/visual-editor/index.js

@@ -14,7 +14,7 @@ import {
 	__unstableUseTypewriter as useTypewriter,
 	__unstableUseTypingObserver as useTypingObserver,
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	useSetting,
+	useSettings,
 	__experimentalRecursionProvider as RecursionProvider,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -171,7 +171,7 @@ export default function VisualEditor( { styles } ) {
 		borderBottom: 0,
 	};
 	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
-	const globalLayoutSettings = useSetting( 'layout' );
+	const [ globalLayoutSettings ] = useSettings( 'layout' );
 	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
 
 	let animatedStyles = isTemplateMode

package/src/editor.js

@@ -14,7 +14,6 @@ import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -23,14 +22,10 @@ import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
 import { unlock } from './lock-unlock';
-import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
-	useCommands();
-	useCommonCommands();
 	const {
 		hasFixedToolbar,
 		focusMode,

package/src/index.js

@@ -206,4 +206,5 @@ export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
 export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
+export { default as __experimentalPluginPostExcerpt } from './components/sidebar/plugin-post-excerpt';
 export { store } from './store';

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
 		'@wordpress/edit-post'
 	);