@wordpress/block-library 6.0.2 → 6.0.3

package/src/navigation-link/edit.js

@@ -7,9 +7,10 @@ import { escape } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	Button,
 	PanelBody,
 	Popover,
 	TextControl,
@@ -22,6 +23,7 @@ import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
+	BlockIcon,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,
@@ -221,21 +223,23 @@ export const updateNavigationLinkBlockAttributes = (
 		kind: originalKind = '',
 		type: originalType = '',
 	} = blockAttributes;
+
 	const {
-		title = '',
+		title = '', // the title of any provided Post.
 		url = '',
+
 		opensInNewTab,
 		id,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
-
 	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
 	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
 	const escapeTitle =
 		title !== '' &&
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
+
 	const label = escapeTitle
 		? escape( title )
 		: originalLabel || escape( normalizedURL );
@@ -261,6 +265,55 @@ export const updateNavigationLinkBlockAttributes = (
 	} );
 };
 
+/**
+ * Removes HTML from a given string.
+ * Note the does not provide XSS protection or otherwise attempt
+ * to filter strings with malicious intent.
+ *
+ * See also: https://github.com/WordPress/gutenberg/pull/35539
+ *
+ * @param {string} html the string from which HTML should be removed.
+ * @return {string} the "cleaned" string.
+ */
+function navStripHTML( html ) {
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	return doc.body.textContent || '';
+}
+
+/**
+ * Add transforms to Link Control
+ */
+
+function LinkControlTransforms( { block, transforms, replace } ) {
+	return (
+		<div className="link-control-transform">
+			<h3 className="link-control-transform__subheading">
+				{ __( 'Transform' ) }
+			</h3>
+			<div className="link-control-transform__items">
+				{ transforms.map( ( item, index ) => {
+					return (
+						<Button
+							key={ `transform-${ index }` }
+							onClick={ () =>
+								replace(
+									block.clientId,
+									switchToBlockType( block, item.name )
+								)
+							}
+							className="link-control-transform__item"
+						>
+							<BlockIcon icon={ item.icon } />
+							{ item.title }
+						</Button>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}
+
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -281,9 +334,11 @@ export default function NavigationLinkEdit( {
 		title,
 		kind,
 	} = attributes;
+
 	const link = {
 		url,
 		opensInNewTab,
+		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
 	};
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const {
@@ -304,9 +359,12 @@ export default function NavigationLinkEdit( {
 		hasDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		thisBlock,
+		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlock,
 				getBlocks,
 				getBlockName,
 				getBlockRootClientId,
@@ -314,6 +372,7 @@ export default function NavigationLinkEdit( {
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
+				getBlockTransformItems,
 			} = select( blockEditorStore );
 
 			const selectedBlockId = getSelectedBlockClientId();
@@ -351,6 +410,11 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
+				thisBlock: getBlock( clientId ),
+				blockTransforms: getBlockTransformItems(
+					[ getBlock( clientId ) ],
+					getBlockRootClientId( clientId )
+				),
 			};
 		},
 		[ clientId ]
@@ -377,6 +441,15 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const featuredTransforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -614,7 +687,9 @@ export default function NavigationLinkEdit( {
 							className="wp-block-navigation-item__label"
 							value={ label }
 							onChange={ ( labelValue ) =>
-								setAttributes( { label: labelValue } )
+								setAttributes( {
+									label: labelValue,
+								} )
 							}
 							onMerge={ mergeBlocks }
 							onReplace={ onReplace }
@@ -646,6 +721,7 @@ export default function NavigationLinkEdit( {
 							anchorRef={ listItemRef.current }
 						>
 							<LinkControl
+								hasTextControl
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
 								showInitialSuggestions={ true }
@@ -683,6 +759,19 @@ export default function NavigationLinkEdit( {
 									)
 								}
 								onRemove={ removeLink }
+								renderControlBottom={
+									! url
+										? () => (
+												<LinkControlTransforms
+													block={ thisBlock }
+													transforms={
+														featuredTransforms
+													}
+													replace={ replaceBlock }
+												/>
+										  )
+										: null
+								}
 							/>
 						</Popover>
 					) }

package/src/navigation-link/editor.scss

@@ -1,12 +1,3 @@
-// Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation__submenu-container {
-	border-radius: 0;
-
-	// Make it the same height as the appender to prevent a jump.
-	min-height: $button-size;
-}
-
-
 /**
  * Submenus.
  */
@@ -45,10 +36,6 @@
  */
 
 .wp-block-navigation-item {
-	.wp-block-navigation__submenu-container {
-		display: block;
-	}
-
 	.wp-block-navigation-item__content {
 		cursor: text;
 	}
@@ -67,12 +54,6 @@
 	}
 }
 
-.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] {
-	& > .block-editor-block-list__insertion-point {
-		display: none;
-	}
-}
-
 
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
@@ -115,3 +96,32 @@
 		cursor: pointer;
 	}
 }
+
+/**
+* Link Control Transforms
+*/
+
+.link-control-transform {
+	border-top: $border-width solid $gray-400;
+	padding: 0 $grid-unit-20 $grid-unit-10 $grid-unit-20;
+}
+
+.link-control-transform__subheading {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+	margin-bottom: 1.5em;
+}
+
+.link-control-transform__items {
+	display: flex;
+	justify-content: space-between;
+}
+
+.link-control-transform__item {
+	flex-basis: 33%;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	height: auto;
+}

package/src/navigation-link/index.php

@@ -152,12 +152,6 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$has_submenu = count( $block->inner_blocks ) > 0;
 	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
 
-	$class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
-
-	if ( false !== $class_name ) {
-		$css_classes .= ' ' . $class_name;
-	}
-
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
@@ -173,6 +167,10 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
 	}
 
+	if ( $is_active ) {
+		$html .= ' aria-current="page"';
+	}
+
 	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
 		$html .= ' target="_blank"  ';
 	}

package/src/navigation-link/transforms.js

@@ -84,7 +84,11 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/search' ],
 			transform: () => {
-				return createBlock( 'core/search' );
+				return createBlock( 'core/search', {
+					showLabel: false,
+					buttonUseIcon: true,
+					buttonPosition: 'button-inside',
+				} );
 			},
 		},
 	],

package/src/navigation-submenu/edit.js

@@ -21,7 +21,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InnerBlocks,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,

package/src/navigation-submenu/index.php

@@ -116,9 +116,9 @@ function block_core_navigation_submenu_render_submenu_icon() {
 /**
  * Renders the `core/navigation-submenu` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ * @param object $block The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
@@ -129,11 +129,8 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
 
 	// Don't render the block's subtree if it is a draft.
-	if ( $is_post_type && $navigation_link_has_id ) {
-		$post = get_post( $attributes['id'] );
-		if ( 'publish' !== $post->post_status ) {
-			return '';
-		}
+	if ( $is_post_type && $navigation_link_has_id && 'publish' !== get_post_status( $attributes['id'] ) ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.
@@ -181,6 +178,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		// Start appending HTML attributes to anchor tag.
 		$html .= '<a class="wp-block-navigation-item__content" href="' . $item_url . '"';
 
+		if ( $is_active ) {
+			$html .= ' aria-current="page"';
+		}
+
 		if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
 			$html .= ' target="_blank"  ';
 		}

package/src/page-list/block.json

@@ -7,39 +7,6 @@
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
 	"attributes": {
-		"textColor": {
-			"type": "string"
-		},
-		"customTextColor": {
-			"type": "string"
-		},
-		"backgroundColor": {
-			"type": "string"
-		},
-		"customBackgroundColor": {
-			"type": "string"
-		},
-		"overlayBackgroundColor": {
-			"type": "string"
-		},
-		"customOverlayBackgroundColor": {
-			"type": "string"
-		},
-		"overlayTextColor": {
-			"type": "string"
-		},
-		"customOverlayTextColor": {
-			"type": "string"
-		},
-		"isNavigationChild": {
-			"type": "boolean"
-		},
-		"showSubmenuIcon": {
-			"type": "boolean"
-		},
-		"openSubmenusOnClick" : {
-			"type": "boolean"
-		}
 	},
 	"usesContext": [
 		"textColor",