@wordpress/block-library 7.2.0 → 7.3.0

package/src/spacer/test/index.native.js

@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	waitFor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Spacer block', () => {
+	it( 'inserts block', async () => {
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+		} = await initializeEditor();
+
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+
+		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 50px', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '50' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 25vh', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Set vh unit
+		fireEvent.press( getByText( 'px' ) );
+		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '25' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'increments height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'increment' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'decrements height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'decrement' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/style.scss

@@ -1,4 +1,5 @@
 @import "./archives/style.scss";
+@import "./avatar/style.scss";
 @import "./audio/style.scss";
 @import "./button/style.scss";
 @import "./buttons/style.scss";

package/src/template-part/edit/utils/hooks.js

@@ -102,13 +102,18 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	return async ( blocks = [], title = __( 'Untitled Template Part' ) ) => {
+		// Currently template parts only allow latin chars.
+		// Fallback slug will receive suffix by default.
+		const cleanSlug =
+			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+
 		// If we have `area` set from block attributes, means an exposed
 		// block variation was inserted. So add this prop to the template
 		// part entity on creation. Afterwards remove `area` value from
 		// block attributes.
 		const record = {
 			title,
-			slug: kebabCase( title ),
+			slug: cleanSlug,
 			content: serialize( blocks ),
 			// `area` is filterable on the server and defaults to `UNCATEGORIZED`
 			// if provided value is not allowed.

package/src/template-part/editor.scss

@@ -12,13 +12,3 @@
 		height: 70%;
 	}
 }
-
-.block-library-template-part__selection-content .block-editor-block-patterns-list {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: $grid-unit-10;
-
-	.block-editor-block-patterns-list__list-item {
-		margin-bottom: 0;
-	}
-}

package/build/navigation/edit/use-list-view-modal.js

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useListViewModal;
-
-var _element = require("@wordpress/element");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _components = require("@wordpress/components");
-
-var _data = require("@wordpress/data");
-
-var _i18n = require("@wordpress/i18n");
-
-var _icons = require("@wordpress/icons");
-
-/**
- * WordPress dependencies
- */
-function NavigationBlockListView(_ref) {
-  let {
-    clientId,
-    __experimentalFeatures
-  } = _ref;
-  const blocks = (0, _data.useSelect)(select => select(_blockEditor.store).__unstableGetClientIdsTree(clientId), [clientId]);
-  const listViewRef = (0, _element.useRef)();
-  const [minHeight, setMinHeight] = (0, _element.useState)(300);
-  (0, _element.useEffect)(() => {
-    var _listViewRef$current$, _listViewRef$current;
-
-    setMinHeight((_listViewRef$current$ = listViewRef === null || listViewRef === void 0 ? void 0 : (_listViewRef$current = listViewRef.current) === null || _listViewRef$current === void 0 ? void 0 : _listViewRef$current.clientHeight) !== null && _listViewRef$current$ !== void 0 ? _listViewRef$current$ : 300);
-  }, []);
-  return (0, _element.createElement)("div", {
-    style: {
-      minHeight
-    }
-  }, (0, _element.createElement)(_blockEditor.__experimentalListView, {
-    ref: listViewRef,
-    blocks: blocks,
-    showBlockMovers: true,
-    showNestedBlocks: true,
-    __experimentalFeatures: __experimentalFeatures
-  }));
-}
-
-function useListViewModal(clientId, __experimentalFeatures) {
-  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
-  const listViewToolbarButton = (0, _element.createElement)(_components.ToolbarButton, {
-    className: "components-toolbar__control",
-    label: (0, _i18n.__)('Open list view'),
-    onClick: () => setIsModalOpen(true),
-    icon: _icons.listView
-  });
-  const listViewModal = isModalOpen && (0, _element.createElement)(_components.Modal, {
-    title: (0, _i18n.__)('List View'),
-    closeLabel: (0, _i18n.__)('Close'),
-    onRequestClose: () => {
-      setIsModalOpen(false);
-    },
-    shouldCloseOnClickOutside: false
-  }, (0, _element.createElement)(NavigationBlockListView, {
-    clientId: clientId,
-    __experimentalFeatures: __experimentalFeatures
-  }));
-  return {
-    listViewToolbarButton,
-    listViewModal
-  };
-}
-//# sourceMappingURL=use-list-view-modal.js.map

package/build/navigation/edit/use-list-view-modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/use-list-view-modal.js"],"names":["NavigationBlockListView","clientId","__experimentalFeatures","blocks","select","blockEditorStore","__unstableGetClientIdsTree","listViewRef","minHeight","setMinHeight","current","clientHeight","useListViewModal","isModalOpen","setIsModalOpen","listViewToolbarButton","listView","listViewModal"],"mappings":";;;;;;;AASA;;AANA;;AAIA;;AACA;;AAEA;;AACA;;AAXA;AACA;AACA;AAWA,SAASA,uBAAT,OAAyE;AAAA,MAAvC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAuC;AACxE,QAAMC,MAAM,GAAG,qBACZC,MAAF,IACCA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,0BAA3B,CAAuDL,QAAvD,CAFa,EAGd,CAAEA,QAAF,CAHc,CAAf;AAMA,QAAMM,WAAW,GAAG,sBAApB;AACA,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,GAAV,CAApC;AACA,0BAAW,MAAM;AAAA;;AAChBA,IAAAA,YAAY,0BAAEF,WAAF,aAAEA,WAAF,+CAAEA,WAAW,CAAEG,OAAf,yDAAE,qBAAsBC,YAAxB,yEAAwC,GAAxC,CAAZ;AACA,GAFD,EAEG,EAFH;AAIA,SACC;AAAK,IAAA,KAAK,EAAG;AAAEH,MAAAA;AAAF;AAAb,KACC,4BAAC,mCAAD;AACC,IAAA,GAAG,EAAGD,WADP;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,eAAe,MAHhB;AAIC,IAAA,gBAAgB,MAJjB;AAKC,IAAA,sBAAsB,EAAGD;AAL1B,IADD,CADD;AAWA;;AAEc,SAASU,gBAAT,CAA2BX,QAA3B,EAAqCC,sBAArC,EAA8D;AAC5E,QAAM,CAAEW,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AAEA,QAAMC,qBAAqB,GAC1B,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CAFT;AAGC,IAAA,OAAO,EAAG,MAAMD,cAAc,CAAE,IAAF,CAH/B;AAIC,IAAA,IAAI,EAAGE;AAJR,IADD;AASA,QAAMC,aAAa,GAAGJ,WAAW,IAChC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,cAAI,WAAJ,CADT;AAEC,IAAA,UAAU,EAAG,cAAI,OAAJ,CAFd;AAGC,IAAA,cAAc,EAAG,MAAM;AACtBC,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA,KALF;AAMC,IAAA,yBAAyB,EAAG;AAN7B,KAQC,4BAAC,uBAAD;AACC,IAAA,QAAQ,EAAGb,QADZ;AAEC,IAAA,sBAAsB,EAAGC;AAF1B,IARD,CADD;AAgBA,SAAO;AACNa,IAAAA,qBADM;AAENE,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarButton, Modal } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { listView } from '@wordpress/icons';\n\nfunction NavigationBlockListView( { clientId, __experimentalFeatures } ) {\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__unstableGetClientIdsTree( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst listViewRef = useRef();\n\tconst [ minHeight, setMinHeight ] = useState( 300 );\n\tuseEffect( () => {\n\t\tsetMinHeight( listViewRef?.current?.clientHeight ?? 300 );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { minHeight } }>\n\t\t\t<ListView\n\t\t\t\tref={ listViewRef }\n\t\t\t\tblocks={ blocks }\n\t\t\t\tshowBlockMovers\n\t\t\t\tshowNestedBlocks\n\t\t\t\t__experimentalFeatures={ __experimentalFeatures }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default function useListViewModal( clientId, __experimentalFeatures ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst listViewToolbarButton = (\n\t\t<ToolbarButton\n\t\t\tclassName=\"components-toolbar__control\"\n\t\t\tlabel={ __( 'Open list view' ) }\n\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\ticon={ listView }\n\t\t/>\n\t);\n\n\tconst listViewModal = isModalOpen && (\n\t\t<Modal\n\t\t\ttitle={ __( 'List View' ) }\n\t\t\tcloseLabel={ __( 'Close' ) }\n\t\t\tonRequestClose={ () => {\n\t\t\t\tsetIsModalOpen( false );\n\t\t\t} }\n\t\t\tshouldCloseOnClickOutside={ false }\n\t\t>\n\t\t\t<NavigationBlockListView\n\t\t\t\tclientId={ clientId }\n\t\t\t\t__experimentalFeatures={ __experimentalFeatures }\n\t\t\t/>\n\t\t</Modal>\n\t);\n\n\treturn {\n\t\tlistViewToolbarButton,\n\t\tlistViewModal,\n\t};\n}\n"]}

package/build-module/navigation/edit/use-list-view-modal.js

@@ -1,63 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { __experimentalListView as ListView, store as blockEditorStore } from '@wordpress/block-editor';
-import { ToolbarButton, Modal } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useRef, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { listView } from '@wordpress/icons';
-
-function NavigationBlockListView(_ref) {
-  let {
-    clientId,
-    __experimentalFeatures
-  } = _ref;
-  const blocks = useSelect(select => select(blockEditorStore).__unstableGetClientIdsTree(clientId), [clientId]);
-  const listViewRef = useRef();
-  const [minHeight, setMinHeight] = useState(300);
-  useEffect(() => {
-    var _listViewRef$current$, _listViewRef$current;
-
-    setMinHeight((_listViewRef$current$ = listViewRef === null || listViewRef === void 0 ? void 0 : (_listViewRef$current = listViewRef.current) === null || _listViewRef$current === void 0 ? void 0 : _listViewRef$current.clientHeight) !== null && _listViewRef$current$ !== void 0 ? _listViewRef$current$ : 300);
-  }, []);
-  return createElement("div", {
-    style: {
-      minHeight
-    }
-  }, createElement(ListView, {
-    ref: listViewRef,
-    blocks: blocks,
-    showBlockMovers: true,
-    showNestedBlocks: true,
-    __experimentalFeatures: __experimentalFeatures
-  }));
-}
-
-export default function useListViewModal(clientId, __experimentalFeatures) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const listViewToolbarButton = createElement(ToolbarButton, {
-    className: "components-toolbar__control",
-    label: __('Open list view'),
-    onClick: () => setIsModalOpen(true),
-    icon: listView
-  });
-  const listViewModal = isModalOpen && createElement(Modal, {
-    title: __('List View'),
-    closeLabel: __('Close'),
-    onRequestClose: () => {
-      setIsModalOpen(false);
-    },
-    shouldCloseOnClickOutside: false
-  }, createElement(NavigationBlockListView, {
-    clientId: clientId,
-    __experimentalFeatures: __experimentalFeatures
-  }));
-  return {
-    listViewToolbarButton,
-    listViewModal
-  };
-}
-//# sourceMappingURL=use-list-view-modal.js.map

package/build-module/navigation/edit/use-list-view-modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/use-list-view-modal.js"],"names":["__experimentalListView","ListView","store","blockEditorStore","ToolbarButton","Modal","useSelect","useRef","useEffect","useState","__","listView","NavigationBlockListView","clientId","__experimentalFeatures","blocks","select","__unstableGetClientIdsTree","listViewRef","minHeight","setMinHeight","current","clientHeight","useListViewModal","isModalOpen","setIsModalOpen","listViewToolbarButton","listViewModal"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,sBAAsB,IAAIC,QAD3B,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,aAAT,EAAwBC,KAAxB,QAAqC,uBAArC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,MAAT,EAAiBC,SAAjB,EAA4BC,QAA5B,QAA4C,oBAA5C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,QAAT,QAAyB,kBAAzB;;AAEA,SAASC,uBAAT,OAAyE;AAAA,MAAvC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAuC;AACxE,QAAMC,MAAM,GAAGT,SAAS,CACrBU,MAAF,IACCA,MAAM,CAAEb,gBAAF,CAAN,CAA2Bc,0BAA3B,CAAuDJ,QAAvD,CAFsB,EAGvB,CAAEA,QAAF,CAHuB,CAAxB;AAMA,QAAMK,WAAW,GAAGX,MAAM,EAA1B;AACA,QAAM,CAAEY,SAAF,EAAaC,YAAb,IAA8BX,QAAQ,CAAE,GAAF,CAA5C;AACAD,EAAAA,SAAS,CAAE,MAAM;AAAA;;AAChBY,IAAAA,YAAY,0BAAEF,WAAF,aAAEA,WAAF,+CAAEA,WAAW,CAAEG,OAAf,yDAAE,qBAAsBC,YAAxB,yEAAwC,GAAxC,CAAZ;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,SACC;AAAK,IAAA,KAAK,EAAG;AAAEH,MAAAA;AAAF;AAAb,KACC,cAAC,QAAD;AACC,IAAA,GAAG,EAAGD,WADP;AAEC,IAAA,MAAM,EAAGH,MAFV;AAGC,IAAA,eAAe,MAHhB;AAIC,IAAA,gBAAgB,MAJjB;AAKC,IAAA,sBAAsB,EAAGD;AAL1B,IADD,CADD;AAWA;;AAED,eAAe,SAASS,gBAAT,CAA2BV,QAA3B,EAAqCC,sBAArC,EAA8D;AAC5E,QAAM,CAAEU,WAAF,EAAeC,cAAf,IAAkChB,QAAQ,CAAE,KAAF,CAAhD;AAEA,QAAMiB,qBAAqB,GAC1B,cAAC,aAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAGhB,EAAE,CAAE,gBAAF,CAFX;AAGC,IAAA,OAAO,EAAG,MAAMe,cAAc,CAAE,IAAF,CAH/B;AAIC,IAAA,IAAI,EAAGd;AAJR,IADD;AASA,QAAMgB,aAAa,GAAGH,WAAW,IAChC,cAAC,KAAD;AACC,IAAA,KAAK,EAAGd,EAAE,CAAE,WAAF,CADX;AAEC,IAAA,UAAU,EAAGA,EAAE,CAAE,OAAF,CAFhB;AAGC,IAAA,cAAc,EAAG,MAAM;AACtBe,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA,KALF;AAMC,IAAA,yBAAyB,EAAG;AAN7B,KAQC,cAAC,uBAAD;AACC,IAAA,QAAQ,EAAGZ,QADZ;AAEC,IAAA,sBAAsB,EAAGC;AAF1B,IARD,CADD;AAgBA,SAAO;AACNY,IAAAA,qBADM;AAENC,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarButton, Modal } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { listView } from '@wordpress/icons';\n\nfunction NavigationBlockListView( { clientId, __experimentalFeatures } ) {\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__unstableGetClientIdsTree( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst listViewRef = useRef();\n\tconst [ minHeight, setMinHeight ] = useState( 300 );\n\tuseEffect( () => {\n\t\tsetMinHeight( listViewRef?.current?.clientHeight ?? 300 );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { minHeight } }>\n\t\t\t<ListView\n\t\t\t\tref={ listViewRef }\n\t\t\t\tblocks={ blocks }\n\t\t\t\tshowBlockMovers\n\t\t\t\tshowNestedBlocks\n\t\t\t\t__experimentalFeatures={ __experimentalFeatures }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default function useListViewModal( clientId, __experimentalFeatures ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst listViewToolbarButton = (\n\t\t<ToolbarButton\n\t\t\tclassName=\"components-toolbar__control\"\n\t\t\tlabel={ __( 'Open list view' ) }\n\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\ticon={ listView }\n\t\t/>\n\t);\n\n\tconst listViewModal = isModalOpen && (\n\t\t<Modal\n\t\t\ttitle={ __( 'List View' ) }\n\t\t\tcloseLabel={ __( 'Close' ) }\n\t\t\tonRequestClose={ () => {\n\t\t\t\tsetIsModalOpen( false );\n\t\t\t} }\n\t\t\tshouldCloseOnClickOutside={ false }\n\t\t>\n\t\t\t<NavigationBlockListView\n\t\t\t\tclientId={ clientId }\n\t\t\t\t__experimentalFeatures={ __experimentalFeatures }\n\t\t\t/>\n\t\t</Modal>\n\t);\n\n\treturn {\n\t\tlistViewToolbarButton,\n\t\tlistViewModal,\n\t};\n}\n"]}

package/src/navigation/edit/use-list-view-modal.js

@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { ToolbarButton, Modal } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useRef, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { listView } from '@wordpress/icons';
-
-function NavigationBlockListView( { clientId, __experimentalFeatures } ) {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetClientIdsTree( clientId ),
-		[ clientId ]
-	);
-
-	const listViewRef = useRef();
-	const [ minHeight, setMinHeight ] = useState( 300 );
-	useEffect( () => {
-		setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
-	}, [] );
-
-	return (
-		<div style={ { minHeight } }>
-			<ListView
-				ref={ listViewRef }
-				blocks={ blocks }
-				showBlockMovers
-				showNestedBlocks
-				__experimentalFeatures={ __experimentalFeatures }
-			/>
-		</div>
-	);
-}
-
-export default function useListViewModal( clientId, __experimentalFeatures ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const listViewToolbarButton = (
-		<ToolbarButton
-			className="components-toolbar__control"
-			label={ __( 'Open list view' ) }
-			onClick={ () => setIsModalOpen( true ) }
-			icon={ listView }
-		/>
-	);
-
-	const listViewModal = isModalOpen && (
-		<Modal
-			title={ __( 'List View' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ () => {
-				setIsModalOpen( false );
-			} }
-			shouldCloseOnClickOutside={ false }
-		>
-			<NavigationBlockListView
-				clientId={ clientId }
-				__experimentalFeatures={ __experimentalFeatures }
-			/>
-		</Modal>
-	);
-
-	return {
-		listViewToolbarButton,
-		listViewModal,
-	};
-}