@wordpress/block-library 9.38.0 → 9.39.0

package/src/navigation/utils/get-submenu-visibility.js

@@ -0,0 +1,27 @@
+/**
+ * Returns the submenu visibility value with backward compatibility
+ * for the deprecated openSubmenusOnClick attribute.
+ *
+ * This function centralizes the migration logic from the boolean
+ * openSubmenusOnClick to the new submenuVisibility enum.
+ *
+ * NOTE: Keep this function in sync with block_core_navigation_get_submenu_visibility
+ * in packages/block-library/src/navigation/index.php
+ *
+ * @param {Object} attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.
+ * @return {string} The visibility mode: 'hover', 'click', or 'always'.
+ */
+export function getSubmenuVisibility( attributes ) {
+	const { submenuVisibility, openSubmenusOnClick } = attributes;
+
+	// If new attribute is set, use it
+	if ( submenuVisibility ) {
+		return submenuVisibility;
+	}
+
+	// Fall back to old attribute for backward compatibility
+	// openSubmenusOnClick: true  -> 'click'
+	// openSubmenusOnClick: false -> 'hover'
+	// openSubmenusOnClick: undefined -> 'hover' (default)
+	return openSubmenusOnClick ? 'click' : 'hover';
+}

package/src/navigation/utils/test/get-submenu-visibility.js

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import { getSubmenuVisibility } from '../get-submenu-visibility';
+
+describe( 'getSubmenuVisibility', () => {
+	it( 'should return submenuVisibility when it is set', () => {
+		expect(
+			getSubmenuVisibility( {
+				submenuVisibility: 'click',
+				openSubmenusOnClick: false,
+			} )
+		).toBe( 'click' );
+		expect(
+			getSubmenuVisibility( {
+				submenuVisibility: 'hover',
+				openSubmenusOnClick: true,
+			} )
+		).toBe( 'hover' );
+		expect(
+			getSubmenuVisibility( {
+				submenuVisibility: 'always',
+				openSubmenusOnClick: false,
+			} )
+		).toBe( 'always' );
+	} );
+
+	it( 'should fall back to "click" when submenuVisibility is undefined and openSubmenusOnClick is true', () => {
+		expect( getSubmenuVisibility( { openSubmenusOnClick: true } ) ).toBe(
+			'click'
+		);
+	} );
+
+	it( 'should fall back to "hover" when submenuVisibility is undefined and openSubmenusOnClick is false', () => {
+		expect( getSubmenuVisibility( { openSubmenusOnClick: false } ) ).toBe(
+			'hover'
+		);
+	} );
+
+	it( 'should fall back to "hover" when both submenuVisibility and openSubmenusOnClick are undefined', () => {
+		expect( getSubmenuVisibility( {} ) ).toBe( 'hover' );
+	} );
+
+	it( 'should handle empty attributes object', () => {
+		expect( getSubmenuVisibility( {} ) ).toBe( 'hover' );
+	} );
+} );

package/src/navigation-link/edit.js

@@ -42,6 +42,8 @@ import {
 	useIsInvalidLink,
 	InvalidDraftDisplay,
 	useEnableLinkStatusValidation,
+	useIsDraggingWithin,
+	selectLabelText,
 } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
@@ -50,57 +52,6 @@ const NESTING_BLOCK_NAMES = [
 	'core/navigation-submenu',
 ];
 
-/**
- * A React hook to determine if it's dragging within the target element.
- *
- * @typedef {import('@wordpress/element').RefObject} RefObject
- *
- * @param {RefObject<HTMLElement>} elementRef The target elementRef object.
- *
- * @return {boolean} Is dragging within the target element.
- */
-const useIsDraggingWithin = ( elementRef ) => {
-	const [ isDraggingWithin, setIsDraggingWithin ] = useState( false );
-
-	useEffect( () => {
-		const { ownerDocument } = elementRef.current;
-
-		function handleDragStart( event ) {
-			// Check the first time when the dragging starts.
-			handleDragEnter( event );
-		}
-
-		// Set to false whenever the user cancel the drag event by either releasing the mouse or press Escape.
-		function handleDragEnd() {
-			setIsDraggingWithin( false );
-		}
-
-		function handleDragEnter( event ) {
-			// Check if the current target is inside the item element.
-			if ( elementRef.current.contains( event.target ) ) {
-				setIsDraggingWithin( true );
-			} else {
-				setIsDraggingWithin( false );
-			}
-		}
-
-		// Bind these events to the document to catch all drag events.
-		// Ideally, we can also use `event.relatedTarget`, but sadly that
-		// doesn't work in Safari.
-		ownerDocument.addEventListener( 'dragstart', handleDragStart );
-		ownerDocument.addEventListener( 'dragend', handleDragEnd );
-		ownerDocument.addEventListener( 'dragenter', handleDragEnter );
-
-		return () => {
-			ownerDocument.removeEventListener( 'dragstart', handleDragStart );
-			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
-			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
-		};
-	}, [ elementRef ] );
-
-	return isDraggingWithin;
-};
-
 function getMissingText( type ) {
 	let missingText = '';
 
@@ -293,7 +244,7 @@ export default function NavigationLinkEdit( {
 		// If the label looks like a URL, focus and select the label text.
 		if ( isURL( prependHTTP( label ) ) && /^.+\.[a-z]+/.test( label ) ) {
 			// Focus and select the label text.
-			selectLabelText();
+			selectLabelText( ref );
 		} else {
 			// If the link was just created, we want to select the block so the inspector controls
 			// are accurate.
@@ -317,21 +268,6 @@ export default function NavigationLinkEdit( {
 		}
 	}, [ url, isLinkOpen, isNewLink, label ] );
 
-	/**
-	 * Focus the Link label text and select it.
-	 */
-	function selectLabelText() {
-		ref.current.focus();
-		const { ownerDocument } = ref.current;
-		const { defaultView } = ownerDocument;
-		const selection = defaultView.getSelection();
-		const range = ownerDocument.createRange();
-		// Get the range of the current ref contents so we can add this range to the selection.
-		range.selectNodeContents( ref.current );
-		selection.removeAllRanges();
-		selection.addRange( range );
-	}
-
 	/**
 	 * Removes the current link if set.
 	 */

package/src/navigation-link/shared/index.js

@@ -16,3 +16,5 @@ export { useHandleLinkChange } from './use-handle-link-change';
 export { useIsInvalidLink } from './use-is-invalid-link';
 export { InvalidDraftDisplay } from './invalid-draft-display';
 export { useEnableLinkStatusValidation } from './use-enable-link-status-validation';
+export { useIsDraggingWithin } from './use-is-dragging-within';
+export { selectLabelText } from './select-label-text';

package/src/navigation-link/shared/select-label-text.js

@@ -0,0 +1,16 @@
+/**
+ * Focus the Link label text and select it.
+ *
+ * @param {Object} ref React ref object pointing to the label element.
+ */
+export function selectLabelText( ref ) {
+	ref.current.focus();
+	const { ownerDocument } = ref.current;
+	const { defaultView } = ownerDocument;
+	const selection = defaultView.getSelection();
+	const range = ownerDocument.createRange();
+	// Get the range of the current ref contents so we can add this range to the selection.
+	range.selectNodeContents( ref.current );
+	selection.removeAllRanges();
+	selection.addRange( range );
+}

package/src/navigation-link/shared/use-is-dragging-within.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * A React hook to determine if it's dragging within the target element.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {RefObject<HTMLElement>} elementRef The target elementRef object.
+ *
+ * @return {boolean} Is dragging within the target element.
+ */
+export const useIsDraggingWithin = ( elementRef ) => {
+	const [ isDraggingWithin, setIsDraggingWithin ] = useState( false );
+
+	useEffect( () => {
+		const { ownerDocument } = elementRef.current;
+
+		function handleDragStart( event ) {
+			// Check the first time when the dragging starts.
+			handleDragEnter( event );
+		}
+
+		// Set to false whenever the user cancel the drag event by either releasing the mouse or press Escape.
+		function handleDragEnd() {
+			setIsDraggingWithin( false );
+		}
+
+		function handleDragEnter( event ) {
+			// Check if the current target is inside the item element.
+			if ( elementRef.current.contains( event.target ) ) {
+				setIsDraggingWithin( true );
+			} else {
+				setIsDraggingWithin( false );
+			}
+		}
+
+		// Bind these events to the document to catch all drag events.
+		// Ideally, we can also use `event.relatedTarget`, but sadly that
+		// doesn't work in Safari.
+		ownerDocument.addEventListener( 'dragstart', handleDragStart );
+		ownerDocument.addEventListener( 'dragend', handleDragEnd );
+		ownerDocument.addEventListener( 'dragenter', handleDragEnter );
+
+		return () => {
+			ownerDocument.removeEventListener( 'dragstart', handleDragStart );
+			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
+			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
+		};
+	}, [ elementRef ] );
+
+	return isDraggingWithin;
+};

package/src/navigation-submenu/block.json

@@ -55,7 +55,7 @@
 		"customFontSize",
 		"showSubmenuIcon",
 		"maxNestingLevel",
-		"openSubmenusOnClick",
+		"submenuVisibility",
 		"style"
 	],
 	"supports": {

package/src/navigation-submenu/edit.js

@@ -40,12 +40,15 @@ import {
 	useIsInvalidLink,
 	InvalidDraftDisplay,
 	useEnableLinkStatusValidation,
+	useIsDraggingWithin,
+	selectLabelText,
 } from '../navigation-link/shared';
 import {
 	getColors,
 	getNavigationChildBlockProps,
 } from '../navigation/edit/utils';
 import { DEFAULT_BLOCK } from '../navigation/constants';
+import { getSubmenuVisibility } from '../navigation/utils/get-submenu-visibility';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -53,57 +56,6 @@ const ALLOWED_BLOCKS = [
 	'core/page-list',
 ];
 
-/**
- * A React hook to determine if it's dragging within the target element.
- *
- * @typedef {import('@wordpress/element').RefObject} RefObject
- *
- * @param {RefObject<HTMLElement>} elementRef The target elementRef object.
- *
- * @return {boolean} Is dragging within the target element.
- */
-const useIsDraggingWithin = ( elementRef ) => {
-	const [ isDraggingWithin, setIsDraggingWithin ] = useState( false );
-
-	useEffect( () => {
-		const { ownerDocument } = elementRef.current;
-
-		function handleDragStart( event ) {
-			// Check the first time when the dragging starts.
-			handleDragEnter( event );
-		}
-
-		// Set to false whenever the user cancel the drag event by either releasing the mouse or press Escape.
-		function handleDragEnd() {
-			setIsDraggingWithin( false );
-		}
-
-		function handleDragEnter( event ) {
-			// Check if the current target is inside the item element.
-			if ( elementRef.current.contains( event.target ) ) {
-				setIsDraggingWithin( true );
-			} else {
-				setIsDraggingWithin( false );
-			}
-		}
-
-		// Bind these events to the document to catch all drag events.
-		// Ideally, we can also use `event.relatedTarget`, but sadly that
-		// doesn't work in Safari.
-		ownerDocument.addEventListener( 'dragstart', handleDragStart );
-		ownerDocument.addEventListener( 'dragend', handleDragEnd );
-		ownerDocument.addEventListener( 'dragenter', handleDragEnter );
-
-		return () => {
-			ownerDocument.removeEventListener( 'dragstart', handleDragStart );
-			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
-			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
-		};
-	}, [] );
-
-	return isDraggingWithin;
-};
-
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
  */
@@ -133,16 +85,15 @@ export default function NavigationSubmenuEdit( {
 } ) {
 	const { label, url, description, kind, type, id } = attributes;
 
-	const {
-		showSubmenuIcon,
-		maxNestingLevel,
-		openSubmenusOnClick: contextOpenSubmenusOnClick,
-	} = context;
+	const { showSubmenuIcon, maxNestingLevel } = context;
 	const blockEditingMode = useBlockEditingMode();
 
+	// Determine effective submenu visibility with backward compatibility
+	const submenuVisibility = getSubmenuVisibility( context );
+
 	// Force click-only behavior in contentOnly mode to prevent hover dropdowns
 	const openSubmenusOnClick =
-		blockEditingMode !== 'default' ? true : contextOpenSubmenusOnClick;
+		blockEditingMode !== 'default' ? true : submenuVisibility === 'click';
 
 	// URL binding logic
 	const { clearBinding, createBinding } = useEntityBinding( {
@@ -258,26 +209,11 @@ export default function NavigationSubmenuEdit( {
 				/^.+\.[a-z]+/.test( label )
 			) {
 				// Focus and select the label text.
-				selectLabelText();
+				selectLabelText( ref );
 			}
 		}
 	}, [ url ] );
 
-	/**
-	 * Focus the Link label text and select it.
-	 */
-	function selectLabelText() {
-		ref.current.focus();
-		const { ownerDocument } = ref.current;
-		const { defaultView } = ownerDocument;
-		const selection = defaultView.getSelection();
-		const range = ownerDocument.createRange();
-		// Get the range of the current ref contents so we can add this range to the selection.
-		range.selectNodeContents( ref.current );
-		selection.removeAllRanges();
-		selection.addRange( range );
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -310,6 +246,7 @@ export default function NavigationSubmenuEdit( {
 			[ getColorClassName( 'background-color', backgroundColor ) ]:
 				!! backgroundColor,
 			'open-on-click': openSubmenusOnClick,
+			'open-always': submenuVisibility === 'always',
 		} ),
 		style: {
 			color: ! textColor && customTextColor,

package/src/navigation-submenu/index.js

@@ -33,10 +33,13 @@ export const settings = {
 
 		const customName = attributes?.metadata?.name;
 
-		// In the list view, use the block's menu label as the label.
+		// In the list view and breadcrumb, use the block's menu label as the label.
 		// If the menu label is empty, fall back to the default label.
-		if ( context === 'list-view' && ( customName || label ) ) {
-			return attributes?.metadata?.name || label;
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
+			return customName;
 		}
 
 		return label;

package/src/navigation-submenu/index.php

@@ -5,6 +5,34 @@
  * @package WordPress
  */
 
+/**
+ * Returns the submenu visibility value with backward compatibility
+ * for the deprecated openSubmenusOnClick attribute.
+ *
+ * This function centralizes the migration logic from the boolean
+ * openSubmenusOnClick to the new submenuVisibility enum.
+ *
+ * @since 6.9.0
+ *
+ * @param array $attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.
+ * @return string The visibility mode: 'hover', 'click', or 'always'.
+ */
+function block_core_navigation_submenu_get_submenu_visibility( $attributes ) {
+	$submenu_visibility     = isset( $attributes['submenuVisibility'] ) ? $attributes['submenuVisibility'] : null;
+	$open_submenus_on_click = isset( $attributes['openSubmenusOnClick'] ) ? $attributes['openSubmenusOnClick'] : null;
+
+	// If new attribute is set, use it.
+	if ( null !== $submenu_visibility ) {
+		return $submenu_visibility;
+	}
+
+	// Fall back to old attribute for backward compatibility.
+	// openSubmenusOnClick: true  -> 'click'
+	// openSubmenusOnClick: false -> 'hover'
+	// openSubmenusOnClick: null  -> 'hover' (default)
+	return ! empty( $open_submenus_on_click ) ? 'click' : 'hover';
+}
+
 // Path differs between source and build: '../navigation-link/shared/helpers.php' in source, './navigation-link/shared/helpers.php' in build.
 if ( file_exists( __DIR__ . '/../navigation-link/shared/helpers.php' ) ) {
 	require_once __DIR__ . '/../navigation-link/shared/helpers.php';
@@ -105,9 +133,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
-	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
-	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&
-		$show_submenu_indicators;
+	$computed_visibility     = block_core_navigation_submenu_get_submenu_visibility( $block->context );
+	$open_on_click           = 'click' === $computed_visibility;
+	$open_on_hover           = 'hover' === $computed_visibility;
+	$open_on_hover_and_click = $open_on_hover && $show_submenu_indicators;
 
 	$classes = array(
 		'wp-block-navigation-item',
@@ -125,6 +154,9 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	if ( $open_on_hover_and_click ) {
 		$classes[] = 'open-on-hover-click';
 	}
+	if ( 'always' === $computed_visibility ) {
+		$classes[] = 'open-always';
+	}
 	if ( $is_active ) {
 		$classes[] = 'current-menu-item';
 	}
@@ -150,7 +182,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 	$html = '<li ' . $wrapper_attributes . '>';
 
-	// If Submenus open on hover, we render an anchor tag with attributes.
+	// If Submenus open on hover or are always open, we render an anchor tag with attributes.
 	// If submenu icons are set to show, we also render a submenu button, so the submenu can be opened on click.
 	if ( ! $open_on_click ) {
 		$item_url = $attributes['url'] ?? '';
@@ -207,7 +239,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html .= '<button aria-label="' . esc_attr( $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="' . esc_attr( $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.

package/src/nextpage/block.json

@@ -16,7 +16,8 @@
 		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"customCSS": false
 	},
 	"editorStyle": "wp-block-nextpage-editor"
 }

package/src/paragraph/block.json

@@ -57,6 +57,7 @@
 			"fontSize": true,
 			"lineHeight": true,
 			"textAlign": true,
+			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalFontStyle": true,

package/src/paragraph/index.js

@@ -34,7 +34,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/post-excerpt/edit.js

@@ -169,7 +169,7 @@ export default function PostExcerptEditor( {
 	let trimmedExcerpt = '';
 	if ( wordCountType === 'words' ) {
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.split( ' ', excerptLength )
+			.split( /\s+/, excerptLength )
 			.join( ' ' );
 	} else if ( wordCountType === 'characters_excluding_spaces' ) {
 		/*

package/src/post-excerpt/index.php

@@ -39,13 +39,23 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	add_filter( 'excerpt_more', $filter_excerpt_more );
 
 	/*
-	* The purpose of the excerpt length setting is to limit the length of both
-	* automatically generated and user-created excerpts.
-	* Because the excerpt_length filter only applies to auto generated excerpts,
-	* wp_trim_words is used instead.
-	*/
+	 * The purpose of the excerpt length setting is to limit the length of both
+	 * automatically generated and user-created excerpts.
+	 * Because the excerpt_length filter only applies to auto generated excerpts,
+	 * wp_trim_words is used instead.
+	 *
+	 * To ensure the block's excerptLength setting works correctly for auto-generated
+	 * excerpts, we temporarily override excerpt_length to 101 (the max block setting)
+	 * so that wp_trim_excerpt doesn't pre-trim the content before wp_trim_words can
+	 * apply the user's desired length.
+	 */
 	$excerpt_length = $attributes['excerptLength'];
-	$excerpt        = get_the_excerpt( $block->context['postId'] );
+	add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+
+	$excerpt = get_the_excerpt( $block->context['postId'] );
+
+	remove_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+
 	if ( isset( $excerpt_length ) ) {
 		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
 	}
@@ -86,18 +96,31 @@ function register_block_core_post_excerpt() {
 add_action( 'init', 'register_block_core_post_excerpt' );
 
 /**
+ * Callback for the excerpt_length filter to override the excerpt length.
+ *
  * If themes or plugins filter the excerpt_length, we need to
  * override the filter in the editor, otherwise
  * the excerpt length block setting has no effect.
- * Returns 100 because 100 is the max length in the setting.
+ * Returns 101 (one more than the max block setting of 100) to ensure
+ * wp_trim_words can detect when trimming is needed and add the ellipsis.
+ *
+ * For REST API requests, the filter is added on 'rest_api_init'
+ * because REST_REQUEST is not defined until 'parse_request'.
+ *
+ * @since 7.0.0
+ *
+ * @return int The excerpt length.
  */
-if ( is_admin() ||
-	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
-	add_filter(
-		'excerpt_length',
-		static function () {
-			return 100;
-		},
-		PHP_INT_MAX
-	);
+function block_core_post_excerpt_excerpt_length() {
+	return 101;
 }
+
+if ( is_admin() ) {
+	add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+}
+add_action(
+	'rest_api_init',
+	static function () {
+		add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+	}
+);

package/src/shortcode/block.json

@@ -16,7 +16,8 @@
 	"supports": {
 		"className": false,
 		"customClassName": false,
-		"html": false
+		"html": false,
+		"customCSS": false
 	},
 	"editorStyle": "wp-block-shortcode-editor"
 }

package/src/style.scss

@@ -72,9 +72,12 @@
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
 @use "./tab/style.scss" as *;
+@use "./tab-panels/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;
+@use "./tabs-menu/style.scss" as *;
+@use "./tabs-menu-item/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;
 @use "./term-name/style.scss" as *;