@wordpress/block-library 6.0.12 → 6.0.16

package/src/navigation/index.php

@@ -452,14 +452,24 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	}
 
+	$layout_justification = array(
+		'left'          => 'items-justified-left',
+		'right'         => 'items-justified-right',
+		'center'        => 'items-justified-center',
+		'space-between' => 'items-justified-space-between',
+	);
+
 	// Restore legacy classnames for submenu positioning.
 	$layout_class = '';
 	if ( isset( $attributes['layout']['justifyContent'] ) ) {
-		if ( 'right' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-right';
-		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-space-between';
-		}
+		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+	}
+	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
+		$layout_class .= ' is-vertical';
+	}
+
+	if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
+		$layout_class .= ' no-wrap';
 	}
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );
@@ -528,10 +538,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
 			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
-					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
 							%2$s
@@ -545,7 +555,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
 		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles']
+		$colors['overlay_inline_styles'],
+		__( 'Menu' )
 	);
 
 	return sprintf(

package/src/navigation/menu-items-to-blocks.js

@@ -7,6 +7,7 @@ import { sortBy } from 'lodash';
  * WordPress dependencies
  */
 import { createBlock, parse } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Convert a flat menu item structure to a nested blocks structure.
@@ -21,7 +22,12 @@ export default function menuItemsToBlocks( menuItems ) {
 	}
 
 	const menuTree = createDataTree( menuItems );
-	return mapMenuItemsToBlocks( menuTree );
+	const blocks = mapMenuItemsToBlocks( menuTree );
+	return applyFilters(
+		'blocks.navigation.__unstableMenuItemsToBlocks',
+		blocks,
+		menuItems
+	);
 }
 
 /**

package/src/navigation/style.scss

@@ -6,6 +6,10 @@
 // - .wp-block-navigation-item targets the menu item itself.
 // - .wp-block-navigation-item__content targets the link inside a menu item.
 // - .wp-block-navigation__submenu-icon targets the chevron icon indicating submenus.
+
+// Size of burger and close icons.
+$navigation-icon-size: 24px;
+
 .wp-block-navigation {
 	position: relative;
 
@@ -102,6 +106,45 @@
 			height: inherit;
 		}
 	}
+
+	// Custom properties for layout style cascade: default values.
+	--navigation-layout-justification-setting: flex-start;
+	--navigation-layout-direction: row;
+	--navigation-layout-wrap: wrap;
+	--navigation-layout-justify: flex-start;
+	--navigation-layout-align: center;
+
+	&.is-vertical {
+		--navigation-layout-direction: column;
+		--navigation-layout-justify: initial;
+	}
+
+	&.no-wrap {
+		--navigation-layout-wrap: nowrap;
+	}
+
+	&.items-justified-center {
+		--navigation-layout-justification-setting: center;
+		--navigation-layout-justify: center;
+
+		&.is-vertical {
+			--navigation-layout-align: center;
+		}
+	}
+
+	&.items-justified-right {
+		--navigation-layout-justification-setting: flex-end;
+		--navigation-layout-justify: flex-end;
+
+		&.is-vertical {
+			--navigation-layout-align: flex-end;
+		}
+	}
+
+	&.items-justified-space-between {
+		--navigation-layout-justification-setting: space-between;
+		--navigation-layout-justify: space-between;
+	}
 }
 
 // Styles for submenu flyout.
@@ -347,10 +390,10 @@ button.wp-block-navigation-item__content {
 // Navigation block inner container.
 .wp-block-navigation__container {
 	display: flex;
-	flex-wrap: var(--layout-wrap, wrap);
-	flex-direction: var(--layout-direction, initial);
-	justify-content: var(--layout-justify, initial);
-	align-items: var(--layout-align, initial);
+	flex-wrap: var(--navigation-layout-wrap, wrap);
+	flex-direction: var(--navigation-layout-direction, initial);
+	justify-content: var(--navigation-layout-justify, initial);
+	align-items: var(--navigation-layout-align, initial);
 
 	// Reset the default list styles
 	list-style: none;
@@ -384,10 +427,10 @@ button.wp-block-navigation-item__content {
 
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
-		flex-wrap: var(--layout-wrap, wrap);
-		flex-direction: var(--layout-direction, initial);
-		justify-content: var(--layout-justify, initial);
-		align-items: var(--layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
 	}
 
 	// If the responsive wrapper is present but overlay is not open,
@@ -405,6 +448,10 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
+		background-color: inherit;
+
+		// Use em units to apply padding, so themes can more easily style this in various ways.
+		padding: 2em;
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -412,29 +459,30 @@ button.wp-block-navigation-item__content {
 		// Give it a z-index just higher than the adminbar.
 		z-index: 100000;
 
-		// Add extra top padding so items don't conflict with close button.
-		padding: 72px 24px 24px 24px;
-		background-color: inherit;
-
 		.wp-block-navigation__responsive-container-content {
+			// Add padding above to accommodate close button.
+			padding-top: calc(2em + #{ $navigation-icon-size });
+
+			// Don't crop the focus style.
+			overflow: visible;
+
 			// Override the container flex layout settings
 			// because we want overlay menu to always display
 			// as a column.
 			display: flex;
 			flex-direction: column;
+			flex-wrap: nowrap;
+
 			// Inherit alignment settings from container.
-			align-items: var(--layout-justification-setting, inherit);
+			align-items: var(--navigation-layout-justification-setting, inherit);
 
 			// Always align the contents of the menu to the top.
 			&,
+			.wp-block-page-list,
 			.wp-block-navigation__container {
 				justify-content: flex-start;
 			}
 
-			// Allow menu to scroll.
-			overflow: auto;
-			padding: 0;
-
 			.wp-block-navigation__submenu-icon {
 				display: none;
 			}
@@ -453,20 +501,19 @@ button.wp-block-navigation-item__content {
 				// Position and style.
 				position: static;
 				border: none;
-				padding-left: 32px;
-				padding-right: 32px;
+				padding-left: 2em;
+				padding-right: 2em;
 			}
 
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
 				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);
-				}
+			// Apply top padding to nested submenus.
+			.wp-block-navigation__submenu-container {
+				padding-top: var(--wp--style--block-gap, 2em);
 			}
 
 			// A default padding is added to submenu items. It's not appropriate inside the modal.
@@ -481,7 +528,7 @@ button.wp-block-navigation-item__content {
 				display: flex;
 				flex-direction: column;
 				// Inherit alignment settings from container.
-				align-items: var(--layout-justification-setting, initial);
+				align-items: var(--navigation-layout-justification-setting, initial);
 			}
 		}
 
@@ -547,8 +594,8 @@ button.wp-block-navigation-item__content {
 		fill: currentColor;
 		pointer-events: none;
 		display: block;
-		width: 24px;
-		height: 24px;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
 	}
 }
 
@@ -566,8 +613,8 @@ button.wp-block-navigation-item__content {
 // Button to close the menus.
 .wp-block-navigation__responsive-container-close {
 	position: absolute;
-	top: 24px;
-	right: 24px;
+	top: 0;
+	right: 0;
 	z-index: 2; // Needs to be above the modal z index itself.
 }
 
@@ -579,11 +626,14 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-	width: 100%;
-	height: 100%;
+	box-sizing: border-box;
 }
 
+.wp-block-navigation__responsive-dialog {
+	position: relative;
+}
+
+// Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;
 }
-

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

@@ -12,6 +12,7 @@ export default function useNavigationMenu( ref ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				hasFinishedResolution,
+				canUser,
 			} = select( coreStore );
 
 			const navigationMenuSingleArgs = [
@@ -64,6 +65,25 @@ export default function useNavigationMenu( ref ) {
 				),
 				navigationMenu,
 				navigationMenus,
+				canUserUpdateNavigationEntity: ref
+					? canUser( 'update', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'update', 'navigation', ref ]
+				),
+				canUserDeleteNavigationEntity: ref
+					? canUser( 'delete', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'delete', 'navigation', ref ]
+				),
+				canUserCreateNavigation: canUser( 'create', 'navigation' ),
+				hasResolvedCanUserCreateNavigation: hasFinishedResolution(
+					'canUser',
+					[ 'create', 'navigation' ]
+				),
 			};
 		},
 		[ ref ]

package/src/navigation/view.js

@@ -5,16 +5,22 @@ import MicroModal from 'micromodal';
 
 // Responsive navigation toggle.
 function navigationToggleModal( modal ) {
-	const triggerButton = document.querySelector(
-		`button[data-micromodal-trigger="${ modal.id }"]`
+	const dialogContainer = document.querySelector(
+		`.wp-block-navigation__responsive-dialog`
 	);
-	const closeButton = modal.querySelector( 'button[data-micromodal-close]' );
-	// Use aria-hidden to determine the status of the modal, as this attribute is
-	// managed by micromodal.
+
 	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
-	closeButton.setAttribute( 'aria-expanded', ! isHidden );
+
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;
@@ -58,7 +64,7 @@ function toggleSubmenuOnClick( event ) {
 
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
-window.onload = () => {
+window.addEventListener( 'load', () => {
 	MicroModal.init( {
 		onShow: navigationToggleModal,
 		onClose: navigationToggleModal,
@@ -95,4 +101,4 @@ window.onload = () => {
 			}
 		} );
 	} );
-};
+} );

package/src/navigation-link/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/navigation-submenu/edit.js

@@ -520,7 +520,7 @@ export default function NavigationSubmenuEdit( {
 					! selectedBlockHasDescendants ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				hasDescendants
-					? InnerBlocks.DefaultAppender
+					? InnerBlocks.ButtonBlockAppender
 					: false,
 		}
 	);

package/src/navigation-submenu/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;
@@ -188,6 +188,12 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		);
 	}
 
+	$aria_label = sprintf(
+		/* translators: Accessibility text. %s: Parent page title. */
+		__( '%s submenu' ),
+		$label
+	);
+
 	$html = '<li ' . $wrapper_attributes . '>';
 
 	// If Submenus open on hover, we render an anchor tag with attributes.
@@ -226,11 +232,11 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		if ( $show_submenu_indicators ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable elment to open the submenu.
-			$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
+			$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
 		}
 	} else {
 		// If menus open on click, we render the parent as a button.
-		$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
+		$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
 
 		// Wrap title with span to isolate it from submenu icon.
 		$html .= '<span class="wp-block-navigation-item__label">';

package/src/page-list/index.php

@@ -119,7 +119,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;
@@ -173,12 +173,17 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
-		$title = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$aria_label = sprintf(
+			/* translators: Accessibility text. %s: Parent page title. */
+			__( '%s submenu' ),
+			$title
+		);
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
+			$markup .= '<button aria-label="' . $aria_label . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
 			'</button>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
@@ -186,7 +191,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 
 		if ( isset( $page['children'] ) ) {
 			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
-				$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+				$markup .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
 				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 				$markup .= '</button>';
 			}

package/src/post-comments/block.json

@@ -30,5 +30,9 @@
 			"link": true
 		}
 	},
-	"style": "wp-block-post-comments"
+	"style": [
+		"wp-block-post-comments",
+		"wp-block-buttons",
+		"wp-block-button"
+	]
 }

package/src/post-comments/index.php

@@ -66,3 +66,20 @@ function register_block_core_post_comments() {
 	);
 }
 add_action( 'init', 'register_block_core_post_comments' );
+
+/**
+ * Use the button block classes for the form-submit button.
+ *
+ * @param array $fields The default comment form arguments.
+ *
+ * @return array Returns the modified fields.
+ */
+function post_comments_block_form_defaults( $fields ) {
+	if ( wp_is_block_theme() ) {
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+	}
+
+	return $fields;
+}
+add_filter( 'comment_form_defaults', 'post_comments_block_form_defaults' );

package/src/post-comments/style.scss

@@ -64,9 +64,13 @@
 		}
 	}
 
-	.comment-form-comment textarea {
-		box-sizing: border-box;
-		width: 100%;
+	.comment-form {
+		textarea,
+		input:not([type="submit"]):not([type="checkbox"]) {
+			display: block;
+			box-sizing: border-box;
+			width: 100%;
+		}
 	}
 
 	.comment-form-cookies-consent {

package/src/post-comments-form/index.php

@@ -54,10 +54,12 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  *
  * @return array Returns the modified fields.
  */
-function gutenberg_comment_form_block_form_defaults( $fields ) {
-	$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
-	$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+function post_comments_form_block_form_defaults( $fields ) {
+	if ( wp_is_block_theme() ) {
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+	}
 
 	return $fields;
 }
-add_filter( 'comment_form_defaults', 'gutenberg_comment_form_block_form_defaults' );
+add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

package/src/post-comments-form/style.scss

@@ -41,13 +41,15 @@
 		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 	}
 
-	.comment-form-comment textarea {
-		display: block;
-		box-sizing: border-box;
-		width: 100%;
+	.comment-form {
+		textarea,
+		input:not([type="submit"]):not([type="checkbox"]) {
+			display: block;
+			box-sizing: border-box;
+			width: 100%;
+		}
 	}
 
-	.comment-form-comment,
 	.comment-form-author,
 	.comment-form-email,
 	.comment-form-url {