@wordpress/edit-site 4.1.0 → 4.3.0

package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+const ALLOWED_BLOCKS = {
+	'core/navigation': [
+		'core/navigation-link',
+		'core/search',
+		'core/social-links',
+		'core/page-list',
+		'core/spacer',
+		'core/home-link',
+		'core/site-title',
+		'core/site-logo',
+		'core/navigation-submenu',
+	],
+	'core/social-links': [ 'core/social-link' ],
+	'core/navigation-submenu': [
+		'core/navigation-link',
+		'core/navigation-submenu',
+	],
+	'core/navigation-link': [
+		'core/navigation-link',
+		'core/navigation-submenu',
+	],
+};
+
+export default function NavigationMenu( { innerBlocks, id } ) {
+	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+
+	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
+	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
+	useEffect( () => {
+		updateBlockListSettings( '', {
+			allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],
+		} );
+		innerBlocks.forEach( ( block ) => {
+			if ( ALLOWED_BLOCKS[ block.name ] ) {
+				updateBlockListSettings( block.clientId, {
+					allowedBlocks: ALLOWED_BLOCKS[ block.name ],
+				} );
+			}
+		} );
+	}, [ updateBlockListSettings, innerBlocks ] );
+	return (
+		<>
+			<ListView
+				id={ id }
+				showNestedBlocks
+				expandNested={ false }
+				__experimentalFeatures
+				__experimentalPersistentListViewFeatures
+			/>
+		</>
+	);
+}

package/src/components/sidebar/navigation-menu-sidebar/style.scss

@@ -0,0 +1,42 @@
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.edit-site-navigation-inspector {
+	padding: $grid-unit-20;
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		align-items: flex-start;
+		white-space: normal;
+	}
+
+	.block-editor-list-view-block__title {
+		margin-top: 3px;
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: 0;
+	}
+}
+
+
+.edit-site-navigation-inspector__placeholder {
+	padding: $grid-unit-10;
+	margin: $grid-unit-10;
+	background-color: $gray-100;
+	animation: loadingpulse 1s linear infinite;
+	animation-delay: 0.5s; // avoid animating for fast network responses
+
+	&.is-child {
+		margin-left: $grid-unit-30;
+		width: 50%;
+	}
+}

package/src/components/sidebar/style.scss

@@ -80,7 +80,7 @@
 	padding: 0 $grid-unit-10;
 	height: $grid-unit-30;
 	border-radius: $radius-block-ui;
-	background-color: $black;
+	background-color: $gray-900;
 	color: $white;
 	align-items: center;
 	font-size: $helptext-font-size;

package/src/components/template-part-converter/convert-to-regular.js

@@ -13,6 +13,15 @@ export default function ConvertToRegularBlocks( { clientId } ) {
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
+	if ( ! canRemove ) {
+		return null;
+	}
+
 	return (
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (

package/src/index.js

@@ -61,6 +61,7 @@ export function reinitializeEditor( target, settings ) {
 			editorMode: 'visual',
 			fixedToolbar: false,
 			focusMode: false,
+			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
 		} );

package/src/store/actions.js

@@ -333,11 +333,11 @@ export const revertTemplate = (
 	}
 
 	try {
-		const templateEntity = registry
+		const templateEntityConfig = registry
 			.select( coreStore )
-			.getEntity( 'postType', template.type );
+			.getEntityConfig( 'postType', template.type );
 
-		if ( ! templateEntity ) {
+		if ( ! templateEntityConfig ) {
 			registry
 				.dispatch( noticesStore )
 				.createErrorNotice(
@@ -350,7 +350,7 @@ export const revertTemplate = (
 		}
 
 		const fileTemplatePath = addQueryArgs(
-			`${ templateEntity.baseURL }/${ template.id }`,
+			`${ templateEntityConfig.baseURL }/${ template.id }`,
 			{ context: 'edit', source: 'theme' }
 		);
 

package/src/store/selectors.js

@@ -120,6 +120,14 @@ export const getSettings = createSelector(
 				state,
 				'fixedToolbar'
 			),
+			keepCaretInsideBlock: !! __unstableGetPreference(
+				state,
+				'keepCaretInsideBlock'
+			),
+			showIconLabels: !! __unstableGetPreference(
+				state,
+				'showIconLabels'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
 			__experimentalPreferPatternsOnRoot:
@@ -145,6 +153,8 @@ export const getSettings = createSelector(
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
+		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
+		__unstableGetPreference( state, 'showIconLabels' ),
 		getReusableBlocks( state ),
 		getEditedPostType( state ),
 	]

package/src/store/test/selectors.js

@@ -79,6 +79,8 @@ describe( 'selectors', () => {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
+				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				__experimentalPreferPatternsOnRoot: true,
@@ -102,6 +104,8 @@ describe( 'selectors', () => {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),

package/src/style.scss

@@ -11,6 +11,7 @@
 @import "./components/add-new-template/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
+@import "./components/sidebar/navigation-menu-sidebar/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";