@wordpress/block-library 6.0.2 → 6.0.6

package/src/navigation/view.js

@@ -56,42 +56,43 @@ function toggleSubmenuOnClick( event ) {
 	}
 }
 
-const submenuButtons = document.querySelectorAll(
-	'.wp-block-navigation-submenu__toggle'
-);
-
-submenuButtons.forEach( function ( button ) {
-	button.addEventListener( 'click', toggleSubmenuOnClick );
-} );
-
-// Close on click outside.
-document.addEventListener( 'click', function ( event ) {
-	const navigationBlocks = document.querySelectorAll(
-		'.wp-block-navigation'
-	);
-	navigationBlocks.forEach( function ( block ) {
-		if ( ! block.contains( event.target ) ) {
-			closeSubmenus( block );
-		}
-	} );
-} );
-// Close on focus outside.
-document.addEventListener( 'keyup', function ( event ) {
-	const submenuBlocks = document.querySelectorAll(
-		'.wp-block-navigation-item.has-child'
-	);
-	submenuBlocks.forEach( function ( block ) {
-		if ( ! block.contains( event.target ) ) {
-			closeSubmenus( block );
-		}
-	} );
-} );
-
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
-window.onload = () =>
+window.onload = () => {
 	MicroModal.init( {
 		onShow: navigationToggleModal,
 		onClose: navigationToggleModal,
 		openClass: 'is-menu-open',
 	} );
+
+	const submenuButtons = document.querySelectorAll(
+		'.wp-block-navigation-submenu__toggle'
+	);
+
+	submenuButtons.forEach( function ( button ) {
+		button.addEventListener( 'click', toggleSubmenuOnClick );
+	} );
+
+	// Close on click outside.
+	document.addEventListener( 'click', function ( event ) {
+		const navigationBlocks = document.querySelectorAll(
+			'.wp-block-navigation'
+		);
+		navigationBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			}
+		} );
+	} );
+	// Close on focus outside.
+	document.addEventListener( 'keyup', function ( event ) {
+		const submenuBlocks = document.querySelectorAll(
+			'.wp-block-navigation-item.has-child'
+		);
+		submenuBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			}
+		} );
+	} );
+};

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 />;
+}

package/src/navigation-link/edit.js

@@ -7,9 +7,10 @@ import { escape } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	Button,
 	PanelBody,
 	Popover,
 	TextControl,
@@ -22,6 +23,7 @@ import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
+	BlockIcon,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,
@@ -221,21 +223,23 @@ export const updateNavigationLinkBlockAttributes = (
 		kind: originalKind = '',
 		type: originalType = '',
 	} = blockAttributes;
+
 	const {
-		title = '',
+		title = '', // the title of any provided Post.
 		url = '',
+
 		opensInNewTab,
 		id,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
-
 	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
 	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
 	const escapeTitle =
 		title !== '' &&
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
+
 	const label = escapeTitle
 		? escape( title )
 		: originalLabel || escape( normalizedURL );
@@ -261,6 +265,55 @@ export const updateNavigationLinkBlockAttributes = (
 	} );
 };
 
+/**
+ * Removes HTML from a given string.
+ * Note the does not provide XSS protection or otherwise attempt
+ * to filter strings with malicious intent.
+ *
+ * See also: https://github.com/WordPress/gutenberg/pull/35539
+ *
+ * @param {string} html the string from which HTML should be removed.
+ * @return {string} the "cleaned" string.
+ */
+function navStripHTML( html ) {
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	return doc.body.textContent || '';
+}
+
+/**
+ * Add transforms to Link Control
+ */
+
+function LinkControlTransforms( { block, transforms, replace } ) {
+	return (
+		<div className="link-control-transform">
+			<h3 className="link-control-transform__subheading">
+				{ __( 'Transform' ) }
+			</h3>
+			<div className="link-control-transform__items">
+				{ transforms.map( ( item, index ) => {
+					return (
+						<Button
+							key={ `transform-${ index }` }
+							onClick={ () =>
+								replace(
+									block.clientId,
+									switchToBlockType( block, item.name )
+								)
+							}
+							className="link-control-transform__item"
+						>
+							<BlockIcon icon={ item.icon } />
+							{ item.title }
+						</Button>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}
+
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -281,9 +334,11 @@ export default function NavigationLinkEdit( {
 		title,
 		kind,
 	} = attributes;
+
 	const link = {
 		url,
 		opensInNewTab,
+		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
 	};
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const {
@@ -304,9 +359,12 @@ export default function NavigationLinkEdit( {
 		hasDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		thisBlock,
+		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlock,
 				getBlocks,
 				getBlockName,
 				getBlockRootClientId,
@@ -314,6 +372,7 @@ export default function NavigationLinkEdit( {
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
+				getBlockTransformItems,
 			} = select( blockEditorStore );
 
 			const selectedBlockId = getSelectedBlockClientId();
@@ -351,6 +410,11 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
+				thisBlock: getBlock( clientId ),
+				blockTransforms: getBlockTransformItems(
+					[ getBlock( clientId ) ],
+					getBlockRootClientId( clientId )
+				),
 			};
 		},
 		[ clientId ]
@@ -377,6 +441,15 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const featuredTransforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -614,7 +687,9 @@ export default function NavigationLinkEdit( {
 							className="wp-block-navigation-item__label"
 							value={ label }
 							onChange={ ( labelValue ) =>
-								setAttributes( { label: labelValue } )
+								setAttributes( {
+									label: labelValue,
+								} )
 							}
 							onMerge={ mergeBlocks }
 							onReplace={ onReplace }
@@ -646,6 +721,7 @@ export default function NavigationLinkEdit( {
 							anchorRef={ listItemRef.current }
 						>
 							<LinkControl
+								hasTextControl
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
 								showInitialSuggestions={ true }
@@ -683,6 +759,19 @@ export default function NavigationLinkEdit( {
 									)
 								}
 								onRemove={ removeLink }
+								renderControlBottom={
+									! url
+										? () => (
+												<LinkControlTransforms
+													block={ thisBlock }
+													transforms={
+														featuredTransforms
+													}
+													replace={ replaceBlock }
+												/>
+										  )
+										: null
+								}
 							/>
 						</Popover>
 					) }

package/src/navigation-link/editor.scss

@@ -1,12 +1,3 @@
-// Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation__submenu-container {
-	border-radius: 0;
-
-	// Make it the same height as the appender to prevent a jump.
-	min-height: $button-size;
-}
-
-
 /**
  * Submenus.
  */
@@ -35,6 +26,7 @@
 			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
+			overflow: visible !important;
 		}
 	}
 }
@@ -45,10 +37,6 @@
  */
 
 .wp-block-navigation-item {
-	.wp-block-navigation__submenu-container {
-		display: block;
-	}
-
 	.wp-block-navigation-item__content {
 		cursor: text;
 	}
@@ -67,12 +55,6 @@
 	}
 }
 
-.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] {
-	& > .block-editor-block-list__insertion-point {
-		display: none;
-	}
-}
-
 
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
@@ -115,3 +97,32 @@
 		cursor: pointer;
 	}
 }
+
+/**
+* Link Control Transforms
+*/
+
+.link-control-transform {
+	border-top: $border-width solid $gray-400;
+	padding: 0 $grid-unit-20 $grid-unit-10 $grid-unit-20;
+}
+
+.link-control-transform__subheading {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+	margin-bottom: 1.5em;
+}
+
+.link-control-transform__items {
+	display: flex;
+	justify-content: space-between;
+}
+
+.link-control-transform__item {
+	flex-basis: 33%;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	height: auto;
+}

package/src/navigation-link/index.php

@@ -152,12 +152,6 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$has_submenu = count( $block->inner_blocks ) > 0;
 	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
 
-	$class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
-
-	if ( false !== $class_name ) {
-		$css_classes .= ' ' . $class_name;
-	}
-
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
@@ -173,6 +167,10 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
 	}
 
+	if ( $is_active ) {
+		$html .= ' aria-current="page"';
+	}
+
 	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
 		$html .= ' target="_blank"  ';
 	}

package/src/navigation-link/transforms.js

@@ -84,7 +84,11 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/search' ],
 			transform: () => {
-				return createBlock( 'core/search' );
+				return createBlock( 'core/search', {
+					showLabel: false,
+					buttonUseIcon: true,
+					buttonPosition: 'button-inside',
+				} );
 			},
 		},
 	],

package/src/navigation-submenu/edit.js

@@ -21,7 +21,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InnerBlocks,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,

package/src/navigation-submenu/index.php

@@ -116,9 +116,9 @@ function block_core_navigation_submenu_render_submenu_icon() {
 /**
  * Renders the `core/navigation-submenu` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ * @param object $block The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
@@ -129,11 +129,8 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
 
 	// Don't render the block's subtree if it is a draft.
-	if ( $is_post_type && $navigation_link_has_id ) {
-		$post = get_post( $attributes['id'] );
-		if ( 'publish' !== $post->post_status ) {
-			return '';
-		}
+	if ( $is_post_type && $navigation_link_has_id && 'publish' !== get_post_status( $attributes['id'] ) ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.
@@ -181,6 +178,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		// Start appending HTML attributes to anchor tag.
 		$html .= '<a class="wp-block-navigation-item__content" href="' . $item_url . '"';
 
+		if ( $is_active ) {
+			$html .= ' aria-current="page"';
+		}
+
 		if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
 			$html .= ' target="_blank"  ';
 		}

package/src/navigation-submenu/style.scss

@@ -13,6 +13,11 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	line-height: inherit;
+
+	// Buttons default to center alignment. This becomes visible
+	// when a menu item label is long enough to wrap.
+	text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {