@wordpress/block-library 9.38.0 → 9.38.1-next.v.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.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/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/template-part/edit/index.js

@@ -324,7 +324,7 @@ export default function TemplatePartEdit( {
 					} }
 				</BlockSettingsMenuControls>
 
-				<InspectorControls>
+				<InspectorControls group="settings">
 					<TemplatesList
 						area={ area }
 						clientId={ clientId }

package/src/verse/block.json

@@ -14,9 +14,6 @@
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
 			"role": "content"
-		},
-		"textAlign": {
-			"type": "string"
 		}
 	},
 	"supports": {
@@ -46,6 +43,7 @@
 			"fontSize": true,
 			"__experimentalFontFamily": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/verse/deprecated.js

@@ -12,6 +12,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
 
 const v1 = {
 	attributes: {
@@ -36,6 +37,7 @@ const v1 = {
 			/>
 		);
 	},
+	migrate: migrateTextAlign,
 };
 
 const v2 = {
@@ -79,9 +81,86 @@ const v2 = {
 			</pre>
 		);
 	},
-	migrate: migrateFontFamily,
-	isEligible( { style } ) {
-		return style?.typography?.fontFamily;
+	migrate( attributes ) {
+		return migrateTextAlign( migrateFontFamily( attributes ) );
+	},
+	isEligible( { style, textAlign } ) {
+		return style?.typography?.fontFamily || !! textAlign;
+	},
+};
+
+const v3 = {
+	attributes: {
+		content: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'pre',
+			__unstablePreserveWhiteSpace: true,
+			role: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		background: {
+			backgroundImage: true,
+			backgroundSize: true,
+		},
+		color: {
+			gradients: true,
+			link: true,
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalWritingMode: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			width: true,
+			color: true,
+			style: true,
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, content } = attributes;
+
+		const className = clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<pre { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</pre>
+		);
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
 	},
 };
 
@@ -93,4 +172,4 @@ const v2 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1 ];
+export default [ v3, v2, v1 ];