@wordpress/block-library 6.0.2 → 6.0.3

package/src/navigation/style.scss

@@ -9,18 +9,14 @@
 .wp-block-navigation {
 	position: relative;
 
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-
-	// Vertical layout
-	&.is-vertical {
-		flex-direction: column;
-		align-items: flex-start;
+	// Normalize list styles.
+	ul {
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: 0;
+		padding-left: 0;
 	}
 
-	// Normalize list styles.
 	ul,
 	ul li {
 		list-style: none;
@@ -230,7 +226,8 @@
 // Menu items with no background.
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
+.wp-block-navigation__container,
+.wp-block-navigation__responsive-container-content {
 	gap: var(--wp--style--block-gap, 2em);
 }
 
@@ -307,8 +304,6 @@
 
 // Navigation block inner container.
 .wp-block-navigation__container {
-	// Vertically center child blocks, like Social Links or Search.
-	align-items: center;
 
 	// Reset the default list styles
 	list-style: none;
@@ -319,78 +314,8 @@
 	.is-responsive {
 		display: none;
 	}
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-
-	.items-justified-space-between & {
-		flex-grow: 1;
-	}
-}
-
-// Vertical layout
-.is-vertical .wp-block-page-list, // Page list.
-.is-vertical .wp-block-navigation__container {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-// Justification.
-// These target the named container class to work even with the additional mobile menu containers.
-.items-justified-center {
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		justify-content: center;
-	}
 }
 
-.items-justified-right {
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		justify-content: flex-end;
-	}
-}
-
-.items-justified-space-between {
-	.wp-block-navigation__responsive-container-content,
-	.wp-block-navigation__container {
-		display: flex;
-		justify-content: space-between;
-		flex: 1;
-	}
-}
-
-// Vertical justification.
-// The vertical variant does not support space-between.
-.is-vertical.items-justified-center {
-	align-items: center;
-
-	.wp-block-navigation-item {
-		justify-content: center;
-	}
-
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		align-items: center;
-	}
-}
-
-.is-vertical.items-justified-right {
-	align-items: flex-end;
-
-	.wp-block-navigation-item {
-		justify-content: flex-end;
-	}
-
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		align-items: flex-end;
-	}
-}
-
-
 /**
  * Mobile menu.
  */
@@ -402,9 +327,10 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 1;
-	align-items: flex-start;
-	justify-content: flex-start;
+
+	.wp-block-navigation__responsive-container-content {
+		display: contents;
+	}
 
 	// Overlay menu.
 	// Provide an opinionated default style for menu items inside.
@@ -412,7 +338,7 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: flex;
+		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
 
 		// Allow modal to scroll.
@@ -424,10 +350,19 @@
 		// Add extra top padding so items don't conflict with close button.
 		padding: 72px 24px 24px 24px;
 		background-color: inherit;
+		// Fallback to inheritance in case the --justification-setting variable fails.
+		align-items: inherit;
 
 		.wp-block-navigation__responsive-container-content {
+			// Override the container flex layout settings
+			// because we want overlay menu to always display
+			// as a column.
 			display: flex;
 			flex-direction: column;
+			// Inherit alignment settings from container.
+			align-items: var(--justification-setting, inherit);
+			// Allow menu to scroll.
+			overflow: auto;
 			padding: 0;
 
 			.wp-block-navigation__submenu-icon {
@@ -449,42 +384,35 @@
 				position: static;
 				border: none;
 				padding-left: 32px;
+				padding-right: 32px;
 
-				.items-justified-right & {
-					padding-left: 0;
-					padding-right: 32px;
-				}
 			}
 
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
-				gap: 2rem;
-				padding-top: 2rem;
-				padding-bottom: 2rem;
+				gap: var(--wp--style--block-gap, 2em);
+
+				// Apply top padding to nested submenus.
+				.wp-block-navigation__submenu-container,
+				.wp-block-navigation__container {
+					padding-top: var(--wp--style--block-gap, 2em);
+				}
 			}
 
 			// A default padding is added to submenu items. It's not appropriate inside the modal.
-			a {
+			.wp-block-navigation-item__content {
 				padding: 0;
 			}
 
-			// Default justification.
+			// Default column display for overlay menu contents.
 			.wp-block-navigation__container,
 			.wp-block-navigation-item,
 			.wp-block-page-list {
+				display: flex;
 				flex-direction: column;
-				justify-content: flex-start;
-				align-items: flex-start;
-
-				// Inherit parent justifications inside the menu.
-				.items-justified-right & {
-					align-items: flex-end;
-				}
-
-				.items-justified-center & {
-					align-items: center;
-				}
+				// Inherit alignment settings from container.
+				align-items: var(--justification-setting, inherit);
 			}
 		}
 
@@ -507,8 +435,7 @@
 	@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
-				display: flex;
-				flex-direction: row;
+				display: contents;
 				width: 100%;
 				position: relative;
 				z-index: 2;
@@ -565,22 +492,6 @@
 			display: none;
 		}
 	}
-
-	// Justify the button.
-	.items-justified-left & {
-		margin-left: 0;
-		margin-right: auto;
-	}
-
-	.items-justified-center & {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.items-justified-right & {
-		margin-left: auto;
-		margin-right: 0;
-	}
 }
 
 // Button to close the menus.
@@ -606,3 +517,14 @@
 html.has-modal-open {
 	overflow: hidden;
 }
+
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
+.wp-block-navigation__container {
+	display: contents;
+
+	.is-menu-open & {
+		// Fallback to inheritance in case the --justification-setting variable fails.
+		align-items: inherit;
+	}
+}

package/src/navigation/use-navigation-menu.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export default function useNavigationMenu( navigationMenuId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getEditedEntityRecord,
+				getEntityRecords,
+				hasFinishedResolution,
+			} = select( coreStore );
+
+			const navigationMenuSingleArgs = [
+				'postType',
+				'wp_navigation',
+				navigationMenuId,
+			];
+			const navigationMenu = navigationMenuId
+				? getEditedEntityRecord( ...navigationMenuSingleArgs )
+				: null;
+			const hasResolvedNavigationMenu = navigationMenuId
+				? hasFinishedResolution(
+						'getEditedEntityRecord',
+						navigationMenuSingleArgs
+				  )
+				: false;
+
+			const navigationMenuMultipleArgs = [
+				'postType',
+				'wp_navigation',
+				{ per_page: -1 },
+			];
+			const navigationMenus = getEntityRecords(
+				...navigationMenuMultipleArgs
+			);
+
+			const canSwitchNavigationMenu = navigationMenuId
+				? navigationMenus?.length > 1
+				: navigationMenus?.length > 0;
+
+			return {
+				isNavigationMenuResolved: hasResolvedNavigationMenu,
+				isNavigationMenuMissing:
+					! navigationMenuId ||
+					( hasResolvedNavigationMenu && ! navigationMenu ),
+				canSwitchNavigationMenu,
+				hasResolvedNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					navigationMenuMultipleArgs
+				),
+				navigationMenu,
+				navigationMenus,
+			};
+		},
+		[ navigationMenuId ]
+	);
+}

package/src/navigation/use-template-part-area-label.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+
+// TODO: this util should perhaps be refactored somewhere like core-data.
+import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id';
+
+export default function useTemplatePartAreaLabel( clientId ) {
+	return useSelect(
+		( select ) => {
+			// Use the lack of a clientId as an opportunity to bypass the rest
+			// of this hook.
+			if ( ! clientId ) {
+				return;
+			}
+
+			const { getBlock, getBlockParentsByBlockName } = select(
+				blockEditorStore
+			);
+
+			const withAscendingResults = true;
+			const parentTemplatePartClientIds = getBlockParentsByBlockName(
+				clientId,
+				'core/template-part',
+				withAscendingResults
+			);
+
+			if ( ! parentTemplatePartClientIds?.length ) {
+				return;
+			}
+
+			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+			// Blocks can be loaded into a *non-post* block editor.
+			// This code is lifted from this file:
+			// packages/block-library/src/template-part/edit/advanced-controls.js
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			const definedAreas = select(
+				'core/editor'
+			).__experimentalGetDefaultTemplatePartAreas();
+			const { getEditedEntityRecord } = select( coreStore );
+
+			for ( const templatePartClientId of parentTemplatePartClientIds ) {
+				const templatePartBlock = getBlock( templatePartClientId );
+
+				// The 'area' usually isn't stored on the block, but instead
+				// on the entity.
+				const { theme, slug } = templatePartBlock.attributes;
+				const templatePartEntityId = createTemplatePartId(
+					theme,
+					slug
+				);
+				const templatePartEntity = getEditedEntityRecord(
+					'postType',
+					'wp_template_part',
+					templatePartEntityId
+				);
+
+				// Look up the `label` for the area in the defined areas so
+				// that an internationalized label can be used.
+				if ( templatePartEntity?.area ) {
+					return definedAreas.find(
+						( definedArea ) =>
+							definedArea.area !== 'uncategorized' &&
+							definedArea.area === templatePartEntity.area
+					)?.label;
+				}
+			}
+		},
+		[ clientId ]
+	);
+}

package/src/navigation-area/block.json

@@ -0,0 +1,27 @@
+{
+	"apiVersion": 2,
+	"name": "core/navigation-area",
+	"title": "Navigation Area",
+	"category": "theme",
+	"description": "Define a navigation area for your theme. The navigation block associated with this area will be automatically displayed.",
+	"keywords": [
+		"menu",
+		"navigation",
+		"links",
+		"location"
+	],
+	"textdomain": "default",
+	"attributes": {
+		"area": {
+			"type": "string",
+			"default": "primary"
+		}
+	},
+	"providesContext": {
+		"navigationArea": "area"
+	},
+	"supports": {
+		"html": false,
+		"inserter": true
+	}
+}

package/src/navigation-area/edit.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	MenuGroup,
+	MenuItemsChoice,
+	PanelBody,
+	SelectControl,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from './inner-blocks';
+import PlaceholderPreview from '../navigation/edit/placeholder/placeholder-preview';
+
+function NavigationAreaBlock( { attributes, setAttributes } ) {
+	const { area } = attributes;
+
+	const { navigationAreas, hasResolvedNavigationAreas } = useSelect(
+		( select ) => {
+			const { getEntityRecords, hasFinishedResolution } = select(
+				coreStore
+			);
+			return {
+				navigationAreas: getEntityRecords( 'root', 'navigationArea' ),
+				hasResolvedNavigationAreas: hasFinishedResolution(
+					'getEntityRecords',
+					[ 'root', 'navigationArea' ]
+				),
+			};
+		}
+	);
+	const navigationMenuId = navigationAreas?.length
+		? navigationAreas[ area ]
+		: undefined;
+
+	const choices = useMemo(
+		() =>
+			navigationAreas?.map( ( { name, description } ) => ( {
+				label: description,
+				value: name,
+			} ) ),
+		[ navigationAreas ]
+	);
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarDropdownMenu
+						label={ __( 'Select Area' ) }
+						text={ __( 'Select Area' ) }
+						icon={ null }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<MenuItemsChoice
+									value={ area }
+									onSelect={ ( selectedArea ) => {
+										setAttributes( { area: selectedArea } );
+										onClose();
+									} }
+									choices={ choices }
+								/>
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</ToolbarGroup>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Options' ) }>
+					<SelectControl
+						label={ _x( 'Area' ) }
+						value={ area }
+						// `undefined` is required for the preload attribute to be unset.
+						onChange={ ( value ) =>
+							setAttributes( {
+								area: value,
+							} )
+						}
+						options={ choices }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			{ ! hasResolvedNavigationAreas && <PlaceholderPreview isLoading /> }
+			{
+				// Render inner blocks only when navigationMenuId is known so
+				// that inner blocks template is correct from the start.
+				hasResolvedNavigationAreas && (
+					<InnerBlocks navigationMenuId={ navigationMenuId } />
+				)
+			}
+		</>
+	);
+}
+
+export default NavigationAreaBlock;

package/src/navigation-area/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { symbolFilled as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	example: {
+		attributes: {
+			area: 'primary',
+		},
+	},
+	edit,
+	save,
+};

package/src/navigation-area/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-area` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the `core/navigation-area` block on the server.
+ */
+function register_block_core_navigation_area() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-area',
+		array(
+			'provides_context' => array(
+				'navigationArea' => 'area',
+			),
+		)
+	);
+}
+add_action( 'init', 'register_block_core_navigation_area' );

package/src/navigation-area/inner-blocks.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+const ALLOWED_BLOCKS = [ 'core/navigation' ];
+
+export default function NavigationAreaInnerBlocks( { navigationMenuId } ) {
+	const template = useMemo(
+		() => [ [ 'core/navigation', { navigationMenuId } ] ],
+		[ navigationMenuId ]
+	);
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		orientation: 'horizontal',
+		renderAppender: false,
+		template,
+		templateLock: 'all',
+		allowedBlocks: ALLOWED_BLOCKS,
+	} );
+	return <div { ...innerBlocksProps } />;
+}

package/src/navigation-area/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}