@wordpress/block-library 8.0.0 → 8.2.0

package/src/navigation-link/edit.js

@@ -30,7 +30,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
@@ -48,6 +48,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { name } from './block.json';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
+import { getColors } from '../navigation/edit/utils';
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -100,61 +101,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 const useIsInvalidLink = ( kind, type, id ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
@@ -429,12 +375,19 @@ export default function NavigationLinkEdit( {
 	const DEFAULT_BLOCK = {
 		name: 'core/navigation-link',
 	};
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
-		renderAppender: false,
-	} );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			...blockProps,
+			className: 'remove-outline', // Remove the outline from the inner blocks container.
+		},
+		{
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: true,
+			renderAppender: false,
+		}
+	);
 
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
@@ -455,7 +408,7 @@ export default function NavigationLinkEdit( {
 			: __( 'This item is missing a link' );
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -489,12 +442,17 @@ export default function NavigationLinkEdit( {
 					<TextControl
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
-							setAttributes( { url: urlValue } );
+							updateAttributes(
+								{ url: urlValue },
+								setAttributes,
+								attributes
+							);
 						} }
 						label={ __( 'URL' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( { description: descriptionValue } );
@@ -644,6 +602,6 @@ export default function NavigationLinkEdit( {
 				</a>
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }

package/src/navigation-link/index.php

@@ -120,6 +120,33 @@ function block_core_navigation_link_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+/**
+ * Decodes a url if it's encoded, returning the same url if not.
+ *
+ * @param string $url The url to decode.
+ *
+ * @return string $url Returns the decoded url.
+ */
+function block_core_navigation_link_maybe_urldecode( $url ) {
+	$is_url_encoded = false;
+	$query          = parse_url( $url, PHP_URL_QUERY );
+	$query_params   = wp_parse_args( $query );
+
+	foreach ( $query_params as $query_param ) {
+		if ( rawurldecode( $query_param ) !== $query_param ) {
+			$is_url_encoded = true;
+			break;
+		}
+	}
+
+	if ( $is_url_encoded ) {
+		return rawurldecode( $url );
+	}
+
+	return $url;
+}
+
+
 /**
  * Renders the `core/navigation-link` block.
  *
@@ -171,7 +198,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
 	}
 
 	if ( $is_active ) {
@@ -363,11 +390,11 @@ add_action( 'init', 'register_block_core_navigation_link' );
 function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-link' => false )
 	);
@@ -376,3 +403,35 @@ function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Link block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_link_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-link' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_link_inspector' );

package/src/navigation-link/update-attributes.js

@@ -89,7 +89,7 @@ export const updateAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...{ url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl },
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),

package/src/navigation-submenu/edit.js

@@ -27,7 +27,7 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
@@ -42,6 +42,10 @@ import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -104,61 +108,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
  */
@@ -377,48 +326,27 @@ export default function NavigationSubmenuEdit( {
 		  )
 		: ALLOWED_BLOCKS;
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: classnames( 'wp-block-navigation__submenu-container', {
-				'is-parent-of-selected-block': isParentOfSelectedBlock,
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]:
-					!! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
-					!! innerBlocksColors.backgroundColor,
-			} ),
-			style: {
-				color: innerBlocksColors.customTextColor,
-				backgroundColor: innerBlocksColors.customBackgroundColor,
-			},
-		},
-		{
-			allowedBlocks,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: true,
-
-			// Ensure block toolbar is not too far removed from item
-			// being edited.
-			// see: https://github.com/WordPress/gutenberg/pull/34615.
-			__experimentalCaptureToolbars: true,
-
-			renderAppender:
-				isSelected ||
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasChildren ) ||
-				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasChildren
-					? InnerBlocks.ButtonBlockAppender
-					: false,
-		}
-	);
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
+		allowedBlocks,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: true,
+
+		// Ensure block toolbar is not too far removed from item
+		// being edited.
+		// see: https://github.com/WordPress/gutenberg/pull/34615.
+		__experimentalCaptureToolbars: true,
+
+		renderAppender:
+			isSelected ||
+			( isImmediateParentOfSelectedBlock &&
+				! selectedBlockHasChildren ) ||
+			// Show the appender while dragging to allow inserting element between item and the appender.
+			hasChildren
+				? InnerBlocks.ButtonBlockAppender
+				: false,
+	} );
 
 	const ParentElement = openSubmenusOnClick ? 'button' : 'a';
 
@@ -438,7 +366,7 @@ export default function NavigationSubmenuEdit( {
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					{ ! openSubmenusOnClick && (
@@ -481,6 +409,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( {
@@ -570,6 +499,6 @@ export default function NavigationSubmenuEdit( {
 				) }
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }

package/src/navigation-submenu/index.php

@@ -308,11 +308,11 @@ add_action( 'init', 'register_block_core_navigation_submenu' );
 function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-submenu' => false )
 	);
@@ -321,3 +321,35 @@ function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Submenu block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_submenu_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-submenu' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_submenu_inspector' );

package/src/page-list/block.json

@@ -11,6 +11,10 @@
 		"parentPageID": {
 			"type": "integer",
 			"default": 0
+		},
+		"isNested": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [
@@ -30,7 +34,20 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

package/src/page-list/edit.js

@@ -39,6 +39,7 @@ import { convertDescription } from './constants';
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
+const NOOP = () => {};
 
 export default function PageListEdit( {
 	context,
@@ -49,8 +50,6 @@ export default function PageListEdit( {
 	const { parentPageID } = attributes;
 	const [ pages ] = useGetPages();
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
-	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -133,6 +132,9 @@ export default function PageListEdit( {
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 		templateLock: 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
 	} );
 
 	const getBlockContent = () => {
@@ -185,29 +187,35 @@ export default function PageListEdit( {
 		}
 	};
 
-	useEffect( () => {
-		__unstableMarkNextChangeAsNotPersistent();
-		if ( blockList ) {
-			replaceInnerBlocks( clientId, blockList );
-		}
-	}, [ clientId, blockList ] );
-
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
-
-		const _selectedBlockClientId = getSelectedBlockClientId();
+	const { parentNavBlockClientId, isNested } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				isNested:
+					getBlockParentsByBlockName(
+						clientId,
+						'core/navigation-submenu',
+						true
+					).length > 0,
+			};
+		},
+		[ clientId ]
+	);
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
-				_selectedBlockClientId,
-				'core/navigation',
-				true
-			)[ 0 ],
-		};
-	}, [] );
+	useEffect( () => {
+		setAttributes( { isNested } );
+	}, [ isNested ] );
 
 	return (
 		<>

package/src/page-list/editor.scss

@@ -22,6 +22,10 @@
 	}
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+	display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned.
+}
+
 // Make links unclickable in the editor.
 .wp-block-pages-list__item__link {
 	pointer-events: none;

package/src/page-list/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages as icon } from '@wordpress/icons';
+import { pages, update } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return update;
+		}
+
+		return pages;
+	},
 	example: {},
 	edit,
 };