@wordpress/block-library 6.0.3 → 6.0.7

package/src/navigation/style.scss

@@ -119,6 +119,7 @@
 		// Don't take up space when the menu is collapsed.
 		width: 0;
 		height: 0;
+		overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space.
 
 		// Submenu items.
 		> .wp-block-navigation-item {
@@ -126,10 +127,6 @@
 				display: flex;
 				flex-grow: 1;
 
-				// Without this, the changing to zero on hover-out can cause wrapping and
-				// result in an invinite hover/hover-out loop.
-				white-space: nowrap;
-
 				// Right-align the chevron in submenus.
 				.wp-block-navigation__submenu-icon {
 					margin-right: 0;
@@ -178,6 +175,7 @@
 	// Show submenus on hover unless they open on click.
 	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -187,6 +185,7 @@
 	// Keep submenus open when focus is within.
 	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -196,6 +195,7 @@
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -269,18 +269,22 @@
 // When justified space-between, open submenus leftward for last menu item.
 // When justified right, open all submenus leftwards.
 // This needs high specificity.
-// On smaller breakpoints, menus open downwards.
-@include break-medium {
-	.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
-	.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
-	.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
-	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
-		// First submenu.
-		.wp-block-navigation__submenu-container {
-			left: auto;
-			right: 0;
+.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
+.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
+.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
+	// First submenu.
+	.wp-block-navigation__submenu-container {
+		left: auto;
+		right: 0;
 
-			// Nested submenus.
+		// Nested submenus.
+		// On smaller breakpoints, nested menus open downwards.
+		.wp-block-navigation__submenu-container {
+			left: -1px; // Border width.
+			right: -1px;
+		}
+		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: auto;
 				right: 100%;
@@ -304,6 +308,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 +338,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 +363,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 +371,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;
@@ -385,7 +400,6 @@
 				border: none;
 				padding-left: 32px;
 				padding-right: 32px;
-
 			}
 
 			// Space unfolded items using gap and padding for submenus.
@@ -412,7 +426,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,10 +449,10 @@
 	@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
-				display: contents;
+				display: block;
 				width: 100%;
 				position: relative;
-				z-index: 2;
+				z-index: auto;
 				background-color: inherit;
 
 				.wp-block-navigation__responsive-container-close {
@@ -518,13 +532,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-link/editor.scss

@@ -26,6 +26,7 @@
 			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
+			overflow: visible !important;
 		}
 	}
 }

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 {

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/src/template-part/index.php

@@ -55,7 +55,10 @@ function render_block_core_template_part( $attributes ) {
 			// render the corresponding file content.
 			$template_part_file_path = get_theme_file_path( '/block-template-parts/' . $attributes['slug'] . '.html' );
 			if ( 0 === validate_file( $attributes['slug'] ) && file_exists( $template_part_file_path ) ) {
-				$content = _inject_theme_attribute_in_block_template_content( file_get_contents( $template_part_file_path ) );
+				$content = file_get_contents( $template_part_file_path );
+				$content = is_string( $content ) && '' !== $content
+						? _inject_theme_attribute_in_block_template_content( $content )
+						: '';
 			}
 		}
 	}

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