Adding slot to the page attributes panel

packages/editor/README.md

@@ -515,6 +515,50 @@ _Returns_
 
 -   `Component`: The component to be rendered.
 
+### PluginPageAttributesPanel
+
+Renders a row in the Summary panel of the Document sidebar. It should be noted that this is named and implemented around the function it serves and not its location, which may change in future iterations.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var PluginPageAttributesPanel = wp.editPost.PluginPageAttributesPanel;
+
+function MyPluginPageAttributes() {
+	return React.createElement(
+		PluginPageAttributesPanel,
+		{
+			className: 'my-plugin-page-attributes',
+		},
+		__( 'My page attributes' )
+	);
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginPageAttributesPanel } from '@wordpress/edit-post';
+
+const MyPluginPageAttributes = () => (
+	<PluginPageAttributesPanel className="my-plugin-page-attributes">
+		{ __( 'My page attributes' ) }
+	</PluginPageAttributesPanel>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.className_ `[string]`: An optional class name added to the row.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
+
 ### PluginPostPublishPanel
 
 Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post).

packages/editor/src/components/index.js

@@ -25,6 +25,7 @@ export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesPanel } from './page-attributes/panel';
 export { default as PageAttributesParent } from './page-attributes/parent';
+export { default as PluginPageAttributesPanel } from './plugin-page-attributes-panel';
 export { default as PageTemplate } from './post-template/classic-theme';
 export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
 export { default as PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item';

packages/editor/src/components/page-attributes/panel.js

@@ -14,6 +14,7 @@ import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
 import PageAttributesOrder from './order';
 import PageAttributesParent from './parent';
+import PluginPageAttributesPanel from '../plugin-page-attributes-panel';
 
 const PANEL_NAME = 'page-attributes';
 
@@ -54,6 +55,7 @@ export function PageAttributesPanel() {
 				<PanelRow>
 					<PageAttributesOrder />
 				</PanelRow>
+				<PluginPageAttributesPanel.Slot />
 			</PanelBody>
 		</PageAttributesCheck>
 	);

packages/editor/src/components/plugin-page-attributes-panel/index.js

@@ -0,0 +1,63 @@
+/**
+ * Defines as extensibility slot for the Summary panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPageAttributesPanel' );
+
+/**
+ * Renders a row in the Summary panel of the Document sidebar.
+ * It should be noted that this is named and implemented around the function it serves
+ * and not its location, which may change in future iterations.
+ *
+ * @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 PluginPageAttributesPanel = wp.editPost.PluginPageAttributesPanel;
+ *
+ * function MyPluginPageAttributes() {
+ * 	return React.createElement(
+ * 		PluginPageAttributesPanel,
+ * 		{
+ * 			className: 'my-plugin-page-attributes',
+ * 		},
+ * 		__( 'My page attributes' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPageAttributesPanel } from '@wordpress/edit-post';
+ *
+ * const MyPluginPageAttributes = () => (
+ * 	<PluginPageAttributesPanel
+ * 		className="my-plugin-page-attributes"
+ * 	>
+ * 		{ __( 'My page attributes' ) }
+ * 	</PluginPageAttributesPanel>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPageAttributesPanel = ( { children, className } ) => (
+	<Fill>
+		<PanelRow className={ className }>{ children }</PanelRow>
+	</Fill>
+);
+
+PluginPageAttributesPanel.Slot = Slot;
+
+export default PluginPageAttributesPanel;

packages/editor/src/components/plugin-page-attributes-panel/test/index.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPageAttributesPanel from '../';
+
+describe( 'PluginPageAttributesPanel', () => {
+	test( 'renders fill properly', () => {
+		render(
+			<SlotFillProvider>
+				<PluginPageAttributesPanel className="my-plugin-page-attributes-panel">
+					My panel content
+				</PluginPageAttributesPanel>
+				<PluginPageAttributesPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByText( 'My panel content' ) ).toBeVisible();
+	} );
+} );