@wordpress/block-library 6.0.3 → 6.0.4

package/src/navigation/index.php

@@ -85,117 +85,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Returns the menu items for a WordPress menu location.
- *
- * @param string $location The menu location.
- * @return array Menu items for the location.
- */
-function gutenberg_get_menu_items_at_location( $location ) {
-	if ( empty( $location ) ) {
-		return;
-	}
-
-	// Build menu data. The following approximates the code in
-	// `wp_nav_menu()` and `gutenberg_output_block_nav_menu`.
-
-	// Find the location in the list of locations, returning early if the
-	// location can't be found.
-	$locations = get_nav_menu_locations();
-	if ( ! isset( $locations[ $location ] ) ) {
-		return;
-	}
-
-	// Get the menu from the location, returning early if there is no
-	// menu or there was an error.
-	$menu = wp_get_nav_menu_object( $locations[ $location ] );
-	if ( ! $menu || is_wp_error( $menu ) ) {
-		return;
-	}
-
-	$menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	return $menu_items;
-}
-
-/**
- * Sorts a standard array of menu items into a nested structure keyed by the
- * id of the parent menu.
- *
- * @param array $menu_items Menu items to sort.
- * @return array An array keyed by the id of the parent menu where each element
- *               is an array of menu items that belong to that parent.
- */
-function gutenberg_sort_menu_items_by_parent_id( $menu_items ) {
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-	unset( $menu_items, $menu_item );
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	return $menu_items_by_parent_id;
-}
-
-/**
- * Turns menu item data into a nested array of parsed blocks
- *
- * @param array $menu_items               An array of menu items that represent
- *                                        an individual level of a menu.
- * @param array $menu_items_by_parent_id  An array keyed by the id of the
- *                                        parent menu where each element is an
- *                                        array of menu items that belong to
- *                                        that parent.
- * @return array An array of parsed block data.
- */
-function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
-	if ( empty( $menu_items ) ) {
-		return array();
-	}
-
-	$blocks = array();
-
-	foreach ( $menu_items as $menu_item ) {
-		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
-		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
-		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
-		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
-		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
-
-		$block = array(
-			'blockName' => 'core/navigation-link',
-			'attrs'     => array(
-				'className'     => $class_name,
-				'description'   => $menu_item->description,
-				'id'            => $id,
-				'kind'          => $kind,
-				'label'         => $menu_item->title,
-				'opensInNewTab' => $opens_in_new_tab,
-				'rel'           => $rel,
-				'title'         => $menu_item->attr_title,
-				'type'          => $menu_item->object,
-				'url'           => $menu_item->url,
-			),
-		);
-
-		$block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items(
-			isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-					? $menu_items_by_parent_id[ $menu_item->ID ]
-					: array(),
-			$menu_items_by_parent_id
-		);
-
-		$blocks[] = $block;
-	}
-
-	return $blocks;
-}
-
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
@@ -354,7 +243,7 @@ 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>
-			<div class="%5$s" id="modal-%1$s" aria-hidden="true">
+			<div class="%5$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" >
 							<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>

package/src/navigation/style.scss

@@ -304,6 +304,11 @@
 
 // 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);
 
 	// Reset the default list styles
 	list-style: none;
@@ -329,7 +334,11 @@
 	bottom: 0;
 
 	.wp-block-navigation__responsive-container-content {
-		display: contents;
+		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);
 	}
 
 	// Overlay menu.
@@ -350,8 +359,6 @@
 		// 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
@@ -360,7 +367,11 @@
 			display: flex;
 			flex-direction: column;
 			// Inherit alignment settings from container.
-			align-items: var(--justification-setting, inherit);
+			align-items: var(--layout-justification-setting, inherit);
+
+			// Always align the contents of the menu to the top.
+			justify-content: flex-start;
+
 			// Allow menu to scroll.
 			overflow: auto;
 			padding: 0;
@@ -412,7 +423,7 @@
 				display: flex;
 				flex-direction: column;
 				// Inherit alignment settings from container.
-				align-items: var(--justification-setting, inherit);
+				align-items: var(--layout-justification-setting, initial);
 			}
 		}
 
@@ -435,7 +446,7 @@
 	@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
-				display: contents;
+				display: block;
 				width: 100%;
 				position: relative;
 				z-index: 2;
@@ -518,13 +529,3 @@ 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/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-submenu/style.scss

@@ -13,6 +13,10 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: 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 {

package/src/page-list/style.scss

@@ -1,8 +1,11 @@
 // The Page List block should inherit navigation styles when nested within it
 .wp-block-navigation {
 	.wp-block-page-list {
-		display: contents;
-		flex-wrap: wrap;
+		display: flex;
+		flex-direction: var(--layout-direction, initial);
+		justify-content: var(--layout-justify, initial);
+		align-items: var(--layout-align, initial);
+		flex-wrap: var(--layout-wrap, wrap);
 		background-color: inherit;
 	}
 

package/src/style.scss

@@ -31,7 +31,6 @@
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
-@import "./post-content/style.scss";
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
 @import "./quote/style.scss";

package/build-style/post-content/style-rtl.css

@@ -1,79 +0,0 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Dimensions.
- */
-/**
- * Shadows.
- */
-/**
- * Editor widths.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Breakpoint mixins
- */
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-post-content + * {
-  clear: both;
-}

package/build-style/post-content/style.css

@@ -1,79 +0,0 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Dimensions.
- */
-/**
- * Shadows.
- */
-/**
- * Editor widths.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Breakpoint mixins
- */
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-post-content + * {
-  clear: both;
-}

package/src/post-content/style.scss

@@ -1,4 +0,0 @@
-// Required to ensure that subsequent blocks clear floats inside entry content.
-.wp-block-post-content + * {
-	clear: both;
-}