@wordpress/block-library 7.15.1-next.4d3b314fd5.0 → 7.16.0

package/src/post-featured-image/editor.scss

@@ -6,87 +6,94 @@
 		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
 	}
 
-	&.wp-block-post-featured-image {
-		// Style the placeholder.
-		.wp-block-post-featured-image__placeholder,
-		.components-placeholder {
-			justify-content: center;
-			align-items: center;
-			padding: 0;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		padding: 0;
 
-			// Hide the upload button, as it's also available in the media library.
-			.components-form-file-upload {
-				display: none;
-			}
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
 
-			// Style the upload button.
-			.components-button.components-button {
-				padding: 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: $grid-unit-60;
-				height: $grid-unit-60;
-				border-radius: 50%;
-				position: relative;
-				background: var(--wp-admin-theme-color);
-				border-color: var(--wp-admin-theme-color);
-				border-style: solid;
-				color: $white;
+		// Style the upload button.
+		.components-button {
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
+			color: $white;
 
-				> svg {
-					color: inherit;
-				}
+			> svg {
+				color: inherit;
 			}
+		}
 
-			// Show default placeholder height when not resized.
-			min-height: 200px;
-
-			// The following override the default placeholder styles that remove
-			// its border so that a user selection for border color or width displays
-			// a visual border.
-			&:where(.has-border-color) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-color"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-color"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-color"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-color"]) {
-				border-left-style: solid;
-			}
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
 
-			&:where([style*="border-width"]) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-width"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-width"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-width"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-width"]) {
-				border-left-style: solid;
-			}
+	// The following override the default placeholder styles that remove
+	// its border so that a user selection for border color or width displays
+	// a visual border. They also override the `img { border: none; }` applied
+	// by core.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder,
+	img {
+		// The following is required to overcome WP Core applying styles that clear
+		// img borders with a higher specificity than those added by the border
+		// block support to provide a default border-style of solid when a border
+		// color or width has been set.
+		&:where(.has-border-color) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-color"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-color"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-color"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-color"]) {
+			border-left-style: solid;
 		}
 
-		// Provide a minimum size for the placeholder when resized.
-		// Note, this should be as small as we can afford it, and exists only
-		// to ensure there's room for the upload button.
-		&[style*="height"] .components-placeholder {
-			min-height: $grid-unit-60;
-			min-width: $grid-unit-60;
-			height: 100%;
-			width: 100%;
+		&:where([style*="border-width"]) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-width"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-width"]) {
+			border-right-style: solid;
 		}
+		&:where([style*="border-bottom-width"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-width"]) {
+			border-left-style: solid;
+		}
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 	}
 }
 

package/src/post-featured-image/index.php

@@ -76,16 +76,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
 	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
 	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
-	$class_names         = array(
-		'wp-block-post-featured-image__overlay',
-	);
-	$styles_properties   = array();
+	$class_names         = array( 'wp-block-post-featured-image__overlay' );
+	$styles              = array();
 
 	if ( ! $has_dim_background ) {
 		return '';
 	}
 
-	// Generate required classes for the element.
+	// Apply border classes and styles.
+	$border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
+
+	if ( ! empty( $border_attributes['class'] ) ) {
+		$class_names[] = $border_attributes['class'];
+	}
+
+	if ( ! empty( $border_attributes['style'] ) ) {
+		$styles[] = $border_attributes['style'];
+	}
+
+	// Apply overlay and gradient classes.
 	if ( $has_dim_background ) {
 		$class_names[] = 'has-background-dim';
 		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
@@ -103,35 +112,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
 	}
 
-	// Generate required CSS properties and their values.
-	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
-		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
-	}
-
-	if ( ! empty( $attributes['style']['border']['width'] ) ) {
-		$styles_properties['border-width'] = $attributes['style']['border']['width'];
-	}
-
+	// Apply background styles.
 	if ( $has_custom_gradient ) {
-		$styles_properties['background-image'] = $attributes['customGradient'];
+		$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
 	}
 
 	if ( $has_custom_overlay ) {
-		$styles_properties['background-color'] = $attributes['customOverlayColor'];
-	}
-
-	$styles = '';
-
-	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
-		$styles .= "{$style_attribute}: $style_attribute_value; ";
+		$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
 	}
 
 	return sprintf(
 		'<span class="%s" style="%s" aria-hidden="true"></span>',
 		esc_attr( implode( ' ', $class_names ) ),
-		esc_attr( trim( $styles ) )
+		esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
 	);
-
 }
 
 /**

package/src/post-featured-image/overlay.js

@@ -47,20 +47,23 @@ const Overlay = ( {
 
 	return (
 		<>
-			<span
-				aria-hidden="true"
-				className={ classnames(
-					'wp-block-post-featured-image__overlay',
-					dimRatioToClass( dimRatio ),
-					{
-						[ overlayColor.class ]: overlayColor.class,
-						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ overlayStyles }
-			/>
+			{ !! dimRatio && (
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-post-featured-image__overlay',
+						dimRatioToClass( dimRatio ),
+						{
+							[ overlayColor.class ]: overlayColor.class,
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						},
+						borderProps.className
+					) }
+					style={ overlayStyles }
+				/>
+			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins

package/src/post-terms/block.json

@@ -38,6 +38,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-terms/style.scss

@@ -1,3 +1,8 @@
-.wp-block-post-terms__separator {
-	white-space: pre-wrap;
+.wp-block-post-terms {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	.wp-block-post-terms__separator {
+		white-space: pre-wrap;
+	}
 }

package/src/query/edit/inspector-controls/author-control.js

@@ -71,6 +71,7 @@ function AuthorControl( { value, onChange } ) {
 			value={ sanitizedValue }
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }

package/src/query/edit/inspector-controls/index.js

@@ -237,10 +237,7 @@ export default function QueryInspectorControls( {
 							</ToolsPanelItem>
 						) }
 						{ isPostTypeHierarchical &&
-							! isControlAllowed(
-								allowedControls,
-								'parents'
-							) && (
+							isControlAllowed( allowedControls, 'parents' ) && (
 								<ToolsPanelItem
 									hasValue={ () => !! parents?.length }
 									label={ __( 'Parents' ) }

package/src/query/edit/inspector-controls/parent-control.js

@@ -125,6 +125,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -116,6 +116,7 @@ export function TaxonomyControls( { onChange, query } ) {
 								value={ getExistingTaxQueryValue( slug ) }
 								suggestions={ terms.names }
 								onChange={ onTermsChange( slug ) }
+								__experimentalShowHowTo={ false }
 							/>
 						</div>
 					);

package/src/query/utils.js

@@ -162,7 +162,7 @@ export function useAllowedControls( attributes ) {
 			select( blocksStore ).getActiveBlockVariation(
 				queryLoopName,
 				attributes
-			)?.allowControls,
+			)?.allowedControls,
 
 		[ attributes ]
 	);

package/src/quote/block.json

@@ -29,7 +29,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSlashInserter": true,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/site-title/block.json

@@ -60,5 +60,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-site-title-editor"
+	"editorStyle": "wp-block-site-title-editor",
+	"style": "wp-block-site-title"
 }

package/src/site-title/editor.scss

@@ -2,3 +2,9 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
+
+.editor-styles-wrapper .wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/site-title/style.scss

@@ -0,0 +1,5 @@
+.wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/style.scss

@@ -44,6 +44,7 @@
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
+@import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";

package/src/template-part/index.js

@@ -62,13 +62,13 @@ export const init = () => {
 		'blockEditor.__unstableCanInsertBlockType',
 		'removeTemplatePartsFromPostTemplates',
 		(
-			can,
+			canInsert,
 			blockType,
 			rootClientId,
 			{ getBlock, getBlockParentsByBlockName }
 		) => {
 			if ( blockType.name !== 'core/template-part' ) {
-				return can;
+				return canInsert;
 			}
 
 			for ( const disallowedParentType of DISALLOWED_PARENTS ) {

package/src/video/edit.js

@@ -13,6 +13,7 @@ import {
 	Disabled,
 	PanelBody,
 	Spinner,
+	Placeholder,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -43,6 +44,23 @@ import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 
+// Much of this description is duplicated from MediaPlaceholder.
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+			icon={ icon }
+			label={ __( 'Video' ) }
+			instructions={ __(
+				'Upload a video file, pick one from your media library, or add one with a URL.'
+			) }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
+
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -146,6 +164,7 @@ function VideoEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
 					onError={ onUploadError }
+					placeholder={ placeholder }
 				/>
 			</div>
 		);

package/src/video/editor.scss

@@ -1,3 +1,40 @@
+// Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
+.wp-block-video.wp-block-video {
+	// Show Placeholder style on-select.
+	&.is-selected .components-placeholder {
+		// Block UI appearance.
+		color: $gray-900;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border: none;
+
+		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		border-radius: $radius-block-ui;
+
+		> svg {
+			opacity: 0;
+		}
+
+		.components-placeholder__illustration {
+			display: none;
+		}
+
+		&::before {
+			opacity: 0;
+		}
+	}
+
+	// Remove the transition while we still have a legacy placeholder style.
+	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
+	// parent border that may get applied when you deselect.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		transition: none;
+	}
+}
+
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }

package/build/navigation-submenu/view.js

@@ -1,56 +0,0 @@
-"use strict";
-
-const closeSubmenus = element => {
-  element.querySelectorAll('[aria-expanded="true"]').forEach(toggle => {
-    toggle.setAttribute('aria-expanded', 'false');
-  });
-};
-
-const toggleSubmenuOnClick = event => {
-  const buttonToggle = event.target.closest('[aria-expanded]');
-  const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded');
-
-  if (isSubmenuOpen === 'true') {
-    closeSubmenus(buttonToggle.closest('.wp-block-navigation-submenu'));
-  } else {
-    // Close all sibling submenus.
-    const parentElement = buttonToggle.closest('.wp-block-navigation-submenu');
-    const parentList = buttonToggle.closest('.wp-block-navigation__submenu-container') || buttonToggle.closest('.wp-block-navigation__container');
-    Array.from(parentList.children).forEach(child => {
-      if (child !== parentElement) {
-        closeSubmenus(child);
-      }
-    }); // Open submenu.
-
-    buttonToggle.setAttribute('aria-expanded', 'true');
-  }
-};
-
-const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
-submenuButtons.forEach(button => {
-  button.addEventListener('click', toggleSubmenuOnClick);
-}); // Close on click outside.
-
-document.addEventListener('click', function (event) {
-  const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
-  navigationBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    }
-  });
-}); // Close on focus outside or escape key.
-
-document.addEventListener('keyup', function (event) {
-  const submenuBlocks = document.querySelectorAll('.wp-block-navigation-submenu');
-  submenuBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    } else if (event.key === 'Escape') {
-      const toggle = block.querySelector('[aria-expanded="true"]');
-      closeSubmenus(block); // Focus the submenu trigger so focus does not get trapped in the closed submenu.
-
-      toggle === null || toggle === void 0 ? void 0 : toggle.focus();
-    }
-  });
-});
-//# sourceMappingURL=view.js.map

package/build/navigation-submenu/view.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation-submenu/view.js"],"names":["closeSubmenus","element","querySelectorAll","forEach","toggle","setAttribute","toggleSubmenuOnClick","event","buttonToggle","target","closest","isSubmenuOpen","getAttribute","parentElement","parentList","Array","from","children","child","submenuButtons","document","button","addEventListener","navigationBlocks","block","contains","submenuBlocks","key","querySelector","focus"],"mappings":";;AAAA,MAAMA,aAAa,GAAKC,OAAF,IAAe;AACpCA,EAAAA,OAAO,CACLC,gBADF,CACoB,wBADpB,EAEEC,OAFF,CAEaC,MAAF,IAAc;AACvBA,IAAAA,MAAM,CAACC,YAAP,CAAqB,eAArB,EAAsC,OAAtC;AACA,GAJF;AAKA,CAND;;AAQA,MAAMC,oBAAoB,GAAKC,KAAF,IAAa;AACzC,QAAMC,YAAY,GAAGD,KAAK,CAACE,MAAN,CAAaC,OAAb,CAAsB,iBAAtB,CAArB;AACA,QAAMC,aAAa,GAAGH,YAAY,CAACI,YAAb,CAA2B,eAA3B,CAAtB;;AAEA,MAAKD,aAAa,KAAK,MAAvB,EAAgC;AAC/BX,IAAAA,aAAa,CAAEQ,YAAY,CAACE,OAAb,CAAsB,8BAAtB,CAAF,CAAb;AACA,GAFD,MAEO;AACN;AACA,UAAMG,aAAa,GAAGL,YAAY,CAACE,OAAb,CACrB,8BADqB,CAAtB;AAGA,UAAMI,UAAU,GACfN,YAAY,CAACE,OAAb,CAAsB,yCAAtB,KACAF,YAAY,CAACE,OAAb,CAAsB,iCAAtB,CAFD;AAGAK,IAAAA,KAAK,CAACC,IAAN,CAAYF,UAAU,CAACG,QAAvB,EAAkCd,OAAlC,CAA6Ce,KAAF,IAAa;AACvD,UAAKA,KAAK,KAAKL,aAAf,EAA+B;AAC9Bb,QAAAA,aAAa,CAAEkB,KAAF,CAAb;AACA;AACD,KAJD,EARM,CAaN;;AACAV,IAAAA,YAAY,CAACH,YAAb,CAA2B,eAA3B,EAA4C,MAA5C;AACA;AACD,CAtBD;;AAwBA,MAAMc,cAAc,GAAGC,QAAQ,CAAClB,gBAAT,CACtB,sCADsB,CAAvB;AAIAiB,cAAc,CAAChB,OAAf,CAA0BkB,MAAF,IAAc;AACrCA,EAAAA,MAAM,CAACC,gBAAP,CAAyB,OAAzB,EAAkChB,oBAAlC;AACA,CAFD,E,CAIA;;AACAc,QAAQ,CAACE,gBAAT,CAA2B,OAA3B,EAAoC,UAAWf,KAAX,EAAmB;AACtD,QAAMgB,gBAAgB,GAAGH,QAAQ,CAAClB,gBAAT,CACxB,sBADwB,CAAzB;AAGAqB,EAAAA,gBAAgB,CAACpB,OAAjB,CAA4BqB,KAAF,IAAa;AACtC,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBlB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,MAAAA,aAAa,CAAEwB,KAAF,CAAb;AACA;AACD,GAJD;AAKA,CATD,E,CAUA;;AACAJ,QAAQ,CAACE,gBAAT,CAA2B,OAA3B,EAAoC,UAAWf,KAAX,EAAmB;AACtD,QAAMmB,aAAa,GAAGN,QAAQ,CAAClB,gBAAT,CACrB,8BADqB,CAAtB;AAGAwB,EAAAA,aAAa,CAACvB,OAAd,CAAyBqB,KAAF,IAAa;AACnC,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBlB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,MAAAA,aAAa,CAAEwB,KAAF,CAAb;AACA,KAFD,MAEO,IAAKjB,KAAK,CAACoB,GAAN,KAAc,QAAnB,EAA8B;AACpC,YAAMvB,MAAM,GAAGoB,KAAK,CAACI,aAAN,CAAqB,wBAArB,CAAf;AACA5B,MAAAA,aAAa,CAAEwB,KAAF,CAAb,CAFoC,CAGpC;;AACApB,MAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEyB,KAAR;AACA;AACD,GATD;AAUA,CAdD","sourcesContent":["const closeSubmenus = ( element ) => {\n\telement\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( ( toggle ) => {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n};\n\nconst toggleSubmenuOnClick = ( event ) => {\n\tconst buttonToggle = event.target.closest( '[aria-expanded]' );\n\tconst isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );\n\n\tif ( isSubmenuOpen === 'true' ) {\n\t\tcloseSubmenus( buttonToggle.closest( '.wp-block-navigation-submenu' ) );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst parentElement = buttonToggle.closest(\n\t\t\t'.wp-block-navigation-submenu'\n\t\t);\n\t\tconst parentList =\n\t\t\tbuttonToggle.closest( '.wp-block-navigation__submenu-container' ) ||\n\t\t\tbuttonToggle.closest( '.wp-block-navigation__container' );\n\t\tArray.from( parentList.children ).forEach( ( child ) => {\n\t\t\tif ( child !== parentElement ) {\n\t\t\t\tcloseSubmenus( child );\n\t\t\t}\n\t\t} );\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t}\n};\n\nconst submenuButtons = document.querySelectorAll(\n\t'.wp-block-navigation-submenu__toggle'\n);\n\nsubmenuButtons.forEach( ( button ) => {\n\tbutton.addEventListener( 'click', toggleSubmenuOnClick );\n} );\n\n// Close on click outside.\ndocument.addEventListener( 'click', function ( event ) {\n\tconst navigationBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation'\n\t);\n\tnavigationBlocks.forEach( ( block ) => {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t}\n\t} );\n} );\n// Close on focus outside or escape key.\ndocument.addEventListener( 'keyup', function ( event ) {\n\tconst submenuBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation-submenu'\n\t);\n\tsubmenuBlocks.forEach( ( block ) => {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t} else if ( event.key === 'Escape' ) {\n\t\t\tconst toggle = block.querySelector( '[aria-expanded=\"true\"]' );\n\t\t\tcloseSubmenus( block );\n\t\t\t// Focus the submenu trigger so focus does not get trapped in the closed submenu.\n\t\t\ttoggle?.focus();\n\t\t}\n\t} );\n} );\n"]}

package/build-module/navigation-submenu/view.js

@@ -1,54 +0,0 @@
-const closeSubmenus = element => {
-  element.querySelectorAll('[aria-expanded="true"]').forEach(toggle => {
-    toggle.setAttribute('aria-expanded', 'false');
-  });
-};
-
-const toggleSubmenuOnClick = event => {
-  const buttonToggle = event.target.closest('[aria-expanded]');
-  const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded');
-
-  if (isSubmenuOpen === 'true') {
-    closeSubmenus(buttonToggle.closest('.wp-block-navigation-submenu'));
-  } else {
-    // Close all sibling submenus.
-    const parentElement = buttonToggle.closest('.wp-block-navigation-submenu');
-    const parentList = buttonToggle.closest('.wp-block-navigation__submenu-container') || buttonToggle.closest('.wp-block-navigation__container');
-    Array.from(parentList.children).forEach(child => {
-      if (child !== parentElement) {
-        closeSubmenus(child);
-      }
-    }); // Open submenu.
-
-    buttonToggle.setAttribute('aria-expanded', 'true');
-  }
-};
-
-const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
-submenuButtons.forEach(button => {
-  button.addEventListener('click', toggleSubmenuOnClick);
-}); // Close on click outside.
-
-document.addEventListener('click', function (event) {
-  const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
-  navigationBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    }
-  });
-}); // Close on focus outside or escape key.
-
-document.addEventListener('keyup', function (event) {
-  const submenuBlocks = document.querySelectorAll('.wp-block-navigation-submenu');
-  submenuBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    } else if (event.key === 'Escape') {
-      const toggle = block.querySelector('[aria-expanded="true"]');
-      closeSubmenus(block); // Focus the submenu trigger so focus does not get trapped in the closed submenu.
-
-      toggle === null || toggle === void 0 ? void 0 : toggle.focus();
-    }
-  });
-});
-//# sourceMappingURL=view.js.map

package/build-module/navigation-submenu/view.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation-submenu/view.js"],"names":["closeSubmenus","element","querySelectorAll","forEach","toggle","setAttribute","toggleSubmenuOnClick","event","buttonToggle","target","closest","isSubmenuOpen","getAttribute","parentElement","parentList","Array","from","children","child","submenuButtons","document","button","addEventListener","navigationBlocks","block","contains","submenuBlocks","key","querySelector","focus"],"mappings":"AAAA,MAAMA,aAAa,GAAKC,OAAF,IAAe;AACpCA,EAAAA,OAAO,CACLC,gBADF,CACoB,wBADpB,EAEEC,OAFF,CAEaC,MAAF,IAAc;AACvBA,IAAAA,MAAM,CAACC,YAAP,CAAqB,eAArB,EAAsC,OAAtC;AACA,GAJF;AAKA,CAND;;AAQA,MAAMC,oBAAoB,GAAKC,KAAF,IAAa;AACzC,QAAMC,YAAY,GAAGD,KAAK,CAACE,MAAN,CAAaC,OAAb,CAAsB,iBAAtB,CAArB;AACA,QAAMC,aAAa,GAAGH,YAAY,CAACI,YAAb,CAA2B,eAA3B,CAAtB;;AAEA,MAAKD,aAAa,KAAK,MAAvB,EAAgC;AAC/BX,IAAAA,aAAa,CAAEQ,YAAY,CAACE,OAAb,CAAsB,8BAAtB,CAAF,CAAb;AACA,GAFD,MAEO;AACN;AACA,UAAMG,aAAa,GAAGL,YAAY,CAACE,OAAb,CACrB,8BADqB,CAAtB;AAGA,UAAMI,UAAU,GACfN,YAAY,CAACE,OAAb,CAAsB,yCAAtB,KACAF,YAAY,CAACE,OAAb,CAAsB,iCAAtB,CAFD;AAGAK,IAAAA,KAAK,CAACC,IAAN,CAAYF,UAAU,CAACG,QAAvB,EAAkCd,OAAlC,CAA6Ce,KAAF,IAAa;AACvD,UAAKA,KAAK,KAAKL,aAAf,EAA+B;AAC9Bb,QAAAA,aAAa,CAAEkB,KAAF,CAAb;AACA;AACD,KAJD,EARM,CAaN;;AACAV,IAAAA,YAAY,CAACH,YAAb,CAA2B,eAA3B,EAA4C,MAA5C;AACA;AACD,CAtBD;;AAwBA,MAAMc,cAAc,GAAGC,QAAQ,CAAClB,gBAAT,CACtB,sCADsB,CAAvB;AAIAiB,cAAc,CAAChB,OAAf,CAA0BkB,MAAF,IAAc;AACrCA,EAAAA,MAAM,CAACC,gBAAP,CAAyB,OAAzB,EAAkChB,oBAAlC;AACA,CAFD,E,CAIA;;AACAc,QAAQ,CAACE,gBAAT,CAA2B,OAA3B,EAAoC,UAAWf,KAAX,EAAmB;AACtD,QAAMgB,gBAAgB,GAAGH,QAAQ,CAAClB,gBAAT,CACxB,sBADwB,CAAzB;AAGAqB,EAAAA,gBAAgB,CAACpB,OAAjB,CAA4BqB,KAAF,IAAa;AACtC,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBlB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,MAAAA,aAAa,CAAEwB,KAAF,CAAb;AACA;AACD,GAJD;AAKA,CATD,E,CAUA;;AACAJ,QAAQ,CAACE,gBAAT,CAA2B,OAA3B,EAAoC,UAAWf,KAAX,EAAmB;AACtD,QAAMmB,aAAa,GAAGN,QAAQ,CAAClB,gBAAT,CACrB,8BADqB,CAAtB;AAGAwB,EAAAA,aAAa,CAACvB,OAAd,CAAyBqB,KAAF,IAAa;AACnC,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBlB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,MAAAA,aAAa,CAAEwB,KAAF,CAAb;AACA,KAFD,MAEO,IAAKjB,KAAK,CAACoB,GAAN,KAAc,QAAnB,EAA8B;AACpC,YAAMvB,MAAM,GAAGoB,KAAK,CAACI,aAAN,CAAqB,wBAArB,CAAf;AACA5B,MAAAA,aAAa,CAAEwB,KAAF,CAAb,CAFoC,CAGpC;;AACApB,MAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEyB,KAAR;AACA;AACD,GATD;AAUA,CAdD","sourcesContent":["const closeSubmenus = ( element ) => {\n\telement\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( ( toggle ) => {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n};\n\nconst toggleSubmenuOnClick = ( event ) => {\n\tconst buttonToggle = event.target.closest( '[aria-expanded]' );\n\tconst isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );\n\n\tif ( isSubmenuOpen === 'true' ) {\n\t\tcloseSubmenus( buttonToggle.closest( '.wp-block-navigation-submenu' ) );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst parentElement = buttonToggle.closest(\n\t\t\t'.wp-block-navigation-submenu'\n\t\t);\n\t\tconst parentList =\n\t\t\tbuttonToggle.closest( '.wp-block-navigation__submenu-container' ) ||\n\t\t\tbuttonToggle.closest( '.wp-block-navigation__container' );\n\t\tArray.from( parentList.children ).forEach( ( child ) => {\n\t\t\tif ( child !== parentElement ) {\n\t\t\t\tcloseSubmenus( child );\n\t\t\t}\n\t\t} );\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t}\n};\n\nconst submenuButtons = document.querySelectorAll(\n\t'.wp-block-navigation-submenu__toggle'\n);\n\nsubmenuButtons.forEach( ( button ) => {\n\tbutton.addEventListener( 'click', toggleSubmenuOnClick );\n} );\n\n// Close on click outside.\ndocument.addEventListener( 'click', function ( event ) {\n\tconst navigationBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation'\n\t);\n\tnavigationBlocks.forEach( ( block ) => {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t}\n\t} );\n} );\n// Close on focus outside or escape key.\ndocument.addEventListener( 'keyup', function ( event ) {\n\tconst submenuBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation-submenu'\n\t);\n\tsubmenuBlocks.forEach( ( block ) => {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t} else if ( event.key === 'Escape' ) {\n\t\t\tconst toggle = block.querySelector( '[aria-expanded=\"true\"]' );\n\t\t\tcloseSubmenus( block );\n\t\t\t// Focus the submenu trigger so focus does not get trapped in the closed submenu.\n\t\t\ttoggle?.focus();\n\t\t}\n\t} );\n} );\n"]}