Editor: Introduce PluginPostExcerpt slot (#55200)

* Add Plugin post excerpt component * introduce and expose PluginPostExcerpt * fill post excerpt panel * minor code enhancement * add plugin post excerpt test * prefix plugin with __experimental * Update packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js Co-authored-by: Marin Atanasov <[email protected]> * Update packages/edit-post/src/components/sidebar/post-excerpt/index.js Co-authored-by: Marin Atanasov <[email protected]> * Update packages/edit-post/src/components/sidebar/post-excerpt/index.js Co-authored-by: Marin Atanasov <[email protected]> * Update packages/edit-post/src/components/sidebar/post-excerpt/index.js Co-authored-by: Marin Atanasov <[email protected]> * Update packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js Co-authored-by: Marin Atanasov <[email protected]> * Update packages/edit-post/src/components/sidebar/plugin-post-excerpt/test/index.js Co-authored-by: Marin Atanasov <[email protected]> * ColorPicker: improve UX of dragging the handle when in popover on top of the editor (#55149) * ColorPicker: expose drag start / end handlers via context * ColorPicker: remove overflow hidden rule * Dropdown: add some sort of backdrop to capture pointer events * Add test story * Prevent resizing on color palette's popover, which also triggers overflow: hidden * Improve backdrop position by using react portal * Cleanup * Aria-hidden * Cleanup * Scope querySelector within color picker s container element * Listen for drag events also on hue and alpha sliders * Remove temporary styles * Remove temporary storybook example * CHANGELOG * Move pointer events trap from Dropdown to Popover component * Use state to grab ColorPicker's container element to make sure the component re-renders * Remove overflow:hidden from PaletteEdit component's popover * Update CHANGELOG * Remove dead code * Update snapshot * Move newly added ColorPicker logic to a separate hook * Add inline comment around the resize: false change * Add more comments * remove test snapshots --------- Co-authored-by: Marin Atanasov <[email protected]> Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Oct 12, 2023 · 0c3b9ab · 0c3b9ab
1 parent 235a9da
commit 0c3b9ab
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 1 deletion.
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js b/packages/edit-post/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;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-excerpt/test/index.js b/packages/edit-post/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' );
+	} );
+} );
diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
@@ -13,6 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import PluginPostExcerpt from '../plugin-post-excerpt';
 
 /**
  * Module Constants
@@ -44,7 +45,14 @@ export default function PostExcerpt() {
 				opened={ isOpened }
 				onToggle={ toggleExcerptPanel }
 			>
-				<PostExcerptForm />
+				<PluginPostExcerpt.Slot>
+					{ ( fills ) => (
+						<>
+							<PostExcerptForm />
+							{ fills }
+						</>
+					) }
+				</PluginPostExcerpt.Slot>
 			</PanelBody>
 		</PostExcerptCheck>
 	);

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/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';