@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -0,0 +1,219 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = `
+.emotion-0 {
+  display: grid;
+  gap: calc( 4px * 3 );
+  grid-template-columns: repeat( 2, 1fr );
+  -webkit-column-gap: calc(4px * 4);
+  column-gap: calc(4px * 4);
+  row-gap: calc(4px * 6);
+  border-top: 1px solid #ddd;
+  margin-top: -1px;
+  padding: calc(4px * 4);
+}
+
+.emotion-0>div:not( :first-of-type ) {
+  display: grid;
+  grid-template-columns: repeat( 2, 1fr );
+  -webkit-column-gap: calc(4px * 4);
+  column-gap: calc(4px * 4);
+  row-gap: calc(4px * 6);
+  grid-column: 1/-1;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+  grid-column: 1/-1;
+  gap: calc(4px * 2);
+}
+
+.emotion-2>*+*:not( marquee ) {
+  margin-left: calc(4px * 2);
+}
+
+.emotion-2>* {
+  min-width: 0;
+}
+
+.emotion-2 .components-dropdown-menu {
+  margin: calc(4px * -1) 0;
+  line-height: 0;
+}
+
+.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle {
+  padding: 0;
+  min-width: calc(4px * 6);
+}
+
+.emotion-4 {
+  color: #1e1e1e;
+  line-height: 1.2;
+  margin: 0;
+  color: #050505;
+  font-size: calc(1.95 * 13px);
+  font-weight: 600;
+  display: block;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.emotion-4.emotion-4 {
+  margin: 0;
+}
+
+.emotion-6 {
+  grid-column: 1/-1;
+  display: none;
+}
+
+.emotion-6>div,
+.emotion-6>fieldset {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  max-width: 100%;
+}
+
+.emotion-6.emotion-6 .e1puf3u4 {
+  margin-bottom: 0;
+}
+
+.emotion-6.emotion-6 .e1puf3u4 .e1puf3u3:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-6 .e1puf3u1 {
+  margin-bottom: 0;
+}
+
+.emotion-6.emotion-6 .em5sgkm3 label {
+  line-height: 1.4em;
+}
+
+.emotion-6 .components-custom-select-control__label,
+.emotion-6 .e1puf3u2 {
+  line-height: 1.4em;
+}
+
+.emotion-8 {
+  grid-column: 1/-1;
+}
+
+.emotion-8>div,
+.emotion-8>fieldset {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  max-width: 100%;
+}
+
+.emotion-8.emotion-8 .e1puf3u4 {
+  margin-bottom: 0;
+}
+
+.emotion-8.emotion-8 .e1puf3u4 .e1puf3u3:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-8 .e1puf3u1 {
+  margin-bottom: 0;
+}
+
+.emotion-8.emotion-8 .em5sgkm3 label {
+  line-height: 1.4em;
+}
+
+.emotion-8 .components-custom-select-control__label,
+.emotion-8 .e1puf3u2 {
+  line-height: 1.4em;
+}
+
+<div>
+  <div
+    class="components-grid components-tools-panel emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ToolsPanel"
+  >
+    <div
+      class="components-flex components-h-stack components-tools-panel-header emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelHeader"
+    >
+      <h2
+        class="components-truncate components-text components-heading emotion-4 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Heading"
+      >
+        Panel header
+      </h2>
+      <div
+        class="components-dropdown components-dropdown-menu"
+        tabindex="-1"
+      >
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="View options"
+          class="components-button components-dropdown-menu__toggle is-small has-icon"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item emotion-6 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    />
+    <div
+      class="components-tools-panel-item first emotion-8 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    >
+      <div>
+        Item 2
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item last emotion-8 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    >
+      <div>
+        Item 3
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item emotion-6 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    />
+  </div>
+</div>
+`;

package/src/tools-panel/test/index.js

@@ -11,6 +11,7 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const resetAll = jest.fn();
+const noop = () => undefined;
 
 // Default props for the tools panel.
 const defaultProps = {
@@ -86,6 +87,23 @@ const GroupedItems = ( {
 	);
 };
 
+// This context object is used to help simulate different scenarios in which
+// `ToolsPanelItem` registration or deregistration requires testing.
+const panelContext = {
+	panelId: '1234',
+	menuItems: {
+		default: {},
+		optional: { [ altControlProps.label ]: true },
+	},
+	hasMenuItems: false,
+	isResetting: false,
+	shouldRenderPlaceholderItems: false,
+	registerPanelItem: jest.fn(),
+	deregisterPanelItem: jest.fn(),
+	flagItemCustomization: noop,
+	areAllOptionalControlsHidden: true,
+};
+
 // Renders a tools panel including panel items that have been grouped within
 // a custom component.
 const renderGroupedItemsInPanel = () => {
@@ -499,6 +517,10 @@ describe( 'ToolsPanel', () => {
 	} );
 
 	describe( 'registration of panel items', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+		} );
+
 		it( 'should register and deregister items when panelId changes', () => {
 			// This test simulates switching block selection, which causes the
 			// `ToolsPanel` to rerender with a new panelId, necessitating the
@@ -509,23 +531,7 @@ describe( 'ToolsPanel', () => {
 			// themselves, while those for the old panelId deregister.
 			//
 			// See: https://github.com/WordPress/gutenberg/pull/36588
-
-			const noop = () => undefined;
-			const context = {
-				panelId: '1234',
-				menuItems: {
-					default: {},
-					optional: { [ altControlProps.label ]: true },
-				},
-				hasMenuItems: false,
-				isResetting: false,
-				shouldRenderPlaceholderItems: false,
-				registerPanelItem: jest.fn(),
-				deregisterPanelItem: jest.fn(),
-				flagItemCustomization: noop,
-				areAllOptionalControlsHidden: true,
-			};
-
+			const context = { ...panelContext };
 			const TestPanel = () => (
 				<ToolsPanelContext.Provider value={ context }>
 					<ToolsPanelItem { ...altControlProps } panelId="1234">
@@ -581,6 +587,67 @@ describe( 'ToolsPanel', () => {
 			// deregisterPanelItem has still only been called once.
 			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
 		} );
+
+		it( 'should register items when ToolsPanel panelId is null', () => {
+			// This test simulates when a panel spans multiple block selections.
+			// Multi-selection means a panel can't have a single id to match
+			// against the item's. Instead the panel gets an id of `null` and
+			// individual items should still render themselves in this case.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/37216
+			const context = { ...panelContext, panelId: null };
+			const TestPanel = () => (
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			// On the initial render of the panel, the ToolsPanelItem should
+			// be registered.
+			const { rerender, unmount } = render( <TestPanel /> );
+
+			expect( context.registerPanelItem ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					label: altControlProps.label,
+					panelId: '1234',
+				} )
+			);
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a further block selection being added to the
+			// multi-selection. The panelId will remain `null` in this case.
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a change in panel back to single block selection for
+			// which the item matches panelId.
+			context.panelId = '1234';
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate another multi-selection where the panelId is `null`.
+			// Item should re-register itself after it deregistered as the
+			// multi-selection occurred.
+			context.panelId = null;
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
+
+			// Simulate a change in panel e.g. back to a single block selection
+			// Where the item's panelId is not a match.
+			context.panelId = '4321';
+			rerender( <TestPanel /> );
+
+			// As the item no longer matches the panelId it should not have
+			// registered again but instead deregistered.
+			unmount();
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 2 );
+		} );
 	} );
 
 	describe( 'callbacks on menu item selection', () => {
@@ -775,8 +842,6 @@ describe( 'ToolsPanel', () => {
 			// This test simulates this issue by rendering an item within a
 			// contrived `ToolsPanelContext` to reflect the changes the panel
 			// item needs to protect against.
-
-			const noop = () => undefined;
 			const context = {
 				panelId: '1234',
 				menuItems: {
@@ -821,9 +886,73 @@ describe( 'ToolsPanel', () => {
 
 			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
 		} );
+
+		it( 'should not contain orphaned menu items when panelId changes', async () => {
+			// As fills and the panel can update independently this aims to
+			// test that no orphaned items appear registered in the panel menu.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/34085
+			const TestSlotFillPanel = ( { panelId } ) => (
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps } panelId="1234">
+							<div>Item 1</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...controlProps } panelId="9999">
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps } panelId={ panelId }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			const { rerender } = render( <TestSlotFillPanel panelId="1234" /> );
+			await openDropdownMenu();
+
+			// Only the item matching the panelId should have been registered
+			// and appear in the panel menu.
+			let altMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Show Alt',
+			} );
+			let exampleMenuItem = screen.queryByRole( 'menuitemcheckbox', {
+				name: 'Hide and reset Example',
+			} );
+
+			expect( altMenuItem ).toBeInTheDocument();
+			expect( exampleMenuItem ).not.toBeInTheDocument();
+
+			// Re-render the panel with different panelID simulating a block
+			// selection change.
+			rerender( <TestSlotFillPanel panelId="9999" /> );
+
+			altMenuItem = screen.queryByRole( 'menuitemcheckbox', {
+				name: 'Show Alt',
+			} );
+			exampleMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Hide and reset Example',
+			} );
+
+			expect( altMenuItem ).not.toBeInTheDocument();
+			expect( exampleMenuItem ).toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'panel header icon toggle', () => {
+		const defaultControls = {
+			attributes: { value: false },
+			hasValue: jest.fn().mockImplementation( () => {
+				return !! defaultControls.attributes.value;
+			} ),
+			label: 'Default',
+			onDeselect: jest.fn(),
+			onSelect: jest.fn(),
+			isShownByDefault: true,
+		};
+
 		const optionalControls = {
 			attributes: { value: false },
 			hasValue: jest.fn().mockImplementation( () => {
@@ -835,7 +964,26 @@ describe( 'ToolsPanel', () => {
 			isShownByDefault: false,
 		};
 
-		it( 'should render appropriate icons for the dropdown menu', async () => {
+		it( 'should render appropriate icon for the dropdown menu where there are default controls', async () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...defaultControls }>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...optionalControls }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const optionsDisplayedIcon = screen.getByRole( 'button', {
+				name: 'View options',
+			} );
+
+			expect( optionsDisplayedIcon ).toBeInTheDocument();
+		} );
+
+		it( 'should render appropriate icons for the dropdown menu where there are no default controls', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
 					<ToolsPanelItem { ...optionalControls }>
@@ -865,4 +1013,54 @@ describe( 'ToolsPanel', () => {
 			expect( optionsDisplayedIcon ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'first and last panel items', () => {
+		it( 'should apply first/last classes to appropriate items', () => {
+			const { container } = render(
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps }>
+							<div>Item 1</div>
+						</ToolsPanelItem>
+						<ToolsPanelItem { ...controlProps }>
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							{ ...altControlProps }
+							label="Item 3"
+							isShownByDefault={ true }
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps } label="Item 4">
+							<div>Item 4</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel
+						{ ...defaultProps }
+						hasInnerWrapper={ true }
+						shouldRenderPlaceholderItems={ true }
+						__experimentalFirstVisibleItemClass="first"
+						__experimentalLastVisibleItemClass="last"
+					>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			const item2 = screen.getByText( 'Item 2' );
+			const item3 = screen.getByText( 'Item 3' );
+
+			expect( screen.queryByText( 'Item 1' ) ).not.toBeInTheDocument();
+			expect( item2 ).toBeInTheDocument();
+			expect( item3 ).toBeInTheDocument();
+			expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
+		} );
+	} );
 } );

package/src/tools-panel/tools-panel/README.md

@@ -93,8 +93,9 @@ panel's dropdown menu.
 ### `panelId`: `string`
 
 If a `panelId` is set, it is passed through the `ToolsPanelContext` and used
-to restrict panel items. Only items with a matching `panelId` will be able
-to register themselves with this panel.
+to restrict panel items. When a `panelId` is set, items can only register
+themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
+exactly.
 
 - Required: No
 

package/src/tools-panel/tools-panel/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**