Add summary prop to PanelBody and improve semantics.

WordPress · Sep 9, 2020 · 7d5a1a9 · 7d5a1a9
1 parent bd8bfea
commit 7d5a1a9
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 43 deletions.
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -148,7 +148,7 @@ $color-control-label-height: 20px;
 		margin-top: 2px;
 	}
 
-	.components-panel__body-title {
+	.components-panel__body-header {
 		display: none;
 	}
 }

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
@@ -8,7 +8,7 @@ import mergeRefs from 'react-merge-refs';
 /**
  * WordPress dependencies
  */
-import { useReducedMotion } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { forwardRef, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
@@ -20,7 +20,16 @@ import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';
 
 export function PanelBody(
-	{ children, className, icon, initialOpen, onToggle = noop, opened, title },
+	{
+		children,
+		className,
+		icon,
+		initialOpen,
+		onToggle = noop,
+		opened,
+		summary,
+		title,
+	},
 	ref
 ) {
 	const [ isOpened, setIsOpened ] = useControlledState( opened, {
@@ -62,50 +71,64 @@ export function PanelBody(
 	} );
 
 	return (
-		<div className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
-			<PanelBodyTitle
+		<section className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
+			<PanelBodyHeader
 				icon={ icon }
 				isOpened={ isOpened }
 				onClick={ handleOnToggle }
+				summary={ summary }
 				title={ title }
 			/>
 			{ isOpened && children }
-		</div>
+		</section>
 	);
 }
 
-const PanelBodyTitle = forwardRef(
-	( { isOpened, icon, title, ...props }, ref ) => {
+const PanelBodyHeader = forwardRef(
+	( { isOpened, icon, summary, title, ...props }, ref ) => {
+		const summaryClassName = 'components-panel__body-summary';
+		const summaryId = useInstanceId( PanelBodyHeader, summaryClassName );
+
 		if ( ! title ) return null;
 
+		const showSummary = ! isOpened && summary;
+
 		return (
-			<h2 className="components-panel__body-title">
-				<Button
-					className="components-panel__body-toggle"
-					aria-expanded={ isOpened }
-					ref={ ref }
-					{ ...props }
-				>
-					{ /*
+			<header className="components-panel__body-header">
+				<h2 className="components-panel__body-title">
+					<Button
+						className="components-panel__body-toggle"
+						aria-expanded={ isOpened }
+						ref={ ref }
+						{ ...props }
+						aria-describedby={ showSummary ? summaryId : undefined }
+					>
+						{ /*
 					Firefox + NVDA don't announce aria-expanded because the browser
 					repaints the whole element, so this wrapping span hides that.
 				*/ }
-					<span aria-hidden="true">
-						<Icon
-							className="components-panel__arrow"
-							icon={ isOpened ? chevronUp : chevronDown }
-						/>
-					</span>
-					{ title }
-					{ icon && (
-						<Icon
-							icon={ icon }
-							className="components-panel__icon"
-							size={ 20 }
-						/>
-					) }
-				</Button>
-			</h2>
+						<span aria-hidden="true">
+							<Icon
+								className="components-panel__arrow"
+								icon={ isOpened ? chevronUp : chevronDown }
+							/>
+						</span>
+						{ title }
+						{ icon && (
+							<Icon
+								icon={ icon }
+								className="components-panel__icon"
+								size={ 20 }
+							/>
+						) }
+					</Button>
+				</h2>
+				{ showSummary && (
+					<div className={ summaryClassName } id={ summaryId }>
+						{ summary }
+					</div>
+				) }
+			</header>
 		);
 	}
 );

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
@@ -53,27 +53,33 @@
 	margin-top: -1px;
 }
 
-.components-panel__body > .components-panel__body-title {
+.components-panel__body.is-opened > .components-panel__body-header {
+	margin: -1 * $grid-unit-20;
+	margin-bottom: 5px;
+}
+
+.components-panel__body-header > .components-panel__body-title {
 	display: block;
 	padding: 0;
+	transition: 0.1s background ease-in-out;
+	@include reduce-motion("transition");
 	font-size: inherit;
 	margin-top: 0;
 	margin-bottom: 0;
-	transition: 0.1s background ease-in-out;
-	@include reduce-motion("transition");
-}
-.components-panel__body.is-opened > .components-panel__body-title {
-	margin: -1 * $grid-unit-20;
-	margin-bottom: 5px;
 }
 
 // Hover States
-.components-panel__body > .components-panel__body-title:hover {
+.components-panel__body-header > .components-panel__body-title:hover {
 	// Override the default button hover style
 	background: $gray-100;
 	border: none;
 }
 
+.components-panel__body-summary {
+	padding: $grid-unit-20;
+	padding-top: 0;
+}
+
 .components-panel__body-toggle.components-button {
 	position: relative;
 	padding: $grid-unit-20;

diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
@@ -4,4 +4,4 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom
 
 exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
 
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><section class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></section><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
diff --git a/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<section class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><header class=\\"components-panel__body-header\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2></header>My panel content</section>"`;
diff --git a/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,4 +1,4 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<section class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><header class=\\"components-panel__body-header\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2></header>My panel content</section>"`;
 q
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom

		exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;

		exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
		exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><section class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></section><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;