@wordpress/block-library 7.7.0 → 7.8.0

package/src/navigation-link/edit.js

@@ -225,20 +225,28 @@ export const updateNavigationLinkBlockAttributes = (
 	} = blockAttributes;
 
 	const {
-		title = '', // the title of any provided Post.
-		url = '',
+		title: newLabel = '', // the title of any provided Post.
+		url: newUrl = '',
 
 		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 newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+
+	const useNewLabel =
+		newLabel &&
+		newLabel !== originalLabel &&
+		// LinkControl without the title field relies
+		// on the check below. Specifically, it assumes that
+		// the URL is the same as a title.
+		// This logic a) looks suspicious and b) should really
+		// live in the LinkControl and not here. It's a great
+		// candidate for future refactoring.
+		newLabelWithoutHttp !== newUrlWithoutHttp;
 
 	// Unfortunately this causes the escaping model to be inverted.
 	// The escaped content is stored in the block attributes (and ultimately in the database),
@@ -249,9 +257,9 @@ export const updateNavigationLinkBlockAttributes = (
 	// See also:
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
-	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+	const label = useNewLabel
+		? escape( newLabel )
+		: originalLabel || escape( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -265,7 +273,7 @@ export const updateNavigationLinkBlockAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),
@@ -447,10 +455,8 @@ export default function NavigationLinkEdit( {
 		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
 	};
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const {
-		replaceBlock,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -658,10 +664,8 @@ export default function NavigationLinkEdit( {
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
+			[ getColorClassName( 'background-color', backgroundColor ) ]:
+				!! backgroundColor,
 		} ),
 		style: {
 			color: ! textColor && customTextColor,

package/src/navigation-link/test/edit.js

@@ -160,8 +160,7 @@ describe( 'edit', () => {
 				opensInNewTab: false,
 				title: 'Portfolio Category',
 				type: 'portfolio_category',
-				url:
-					'http://wordpress.local/portfolio_category/Portfolio-category/',
+				url: 'http://wordpress.local/portfolio_category/Portfolio-category/',
 			};
 			updateNavigationLinkBlockAttributes(
 				linkSuggestion,
@@ -173,8 +172,7 @@ describe( 'edit', () => {
 				opensInNewTab: false,
 				label: 'Portfolio Category',
 				type: 'portfolio_category',
-				url:
-					'http://wordpress.local/portfolio_category/Portfolio-category/',
+				url: 'http://wordpress.local/portfolio_category/Portfolio-category/',
 			} );
 		} );
 

package/src/navigation-submenu/edit.js

@@ -277,16 +277,8 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const {
-		label,
-		type,
-		opensInNewTab,
-		url,
-		description,
-		rel,
-		title,
-		kind,
-	} = attributes;
+	const { label, type, opensInNewTab, url, description, rel, title, kind } =
+		attributes;
 	const link = {
 		url,
 		opensInNewTab,
@@ -294,10 +286,8 @@ export default function NavigationSubmenuEdit( {
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
 
-	const {
-		__unstableMarkNextChangeAsNotPersistent,
-		replaceBlock,
-	} = useDispatch( blockEditorStore );
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
+		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -481,10 +471,8 @@ export default function NavigationSubmenuEdit( {
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
+			[ getColorClassName( 'background-color', backgroundColor ) ]:
+				!! backgroundColor,
 			'open-on-click': openSubmenusOnClick,
 		} ),
 		style: {
@@ -509,12 +497,14 @@ export default function NavigationSubmenuEdit( {
 					innerBlocksColors.textColor ||
 					innerBlocksColors.customTextColor
 				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
+				[ `has-${ innerBlocksColors.textColor }-color` ]:
+					!! innerBlocksColors.textColor,
 				'has-background': !! (
 					innerBlocksColors.backgroundColor ||
 					innerBlocksColors.customBackgroundColor
 				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
+				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
+					!! innerBlocksColors.backgroundColor,
 			} ),
 			style: {
 				color: innerBlocksColors.customTextColor,

package/src/page-list/convert-to-links-modal.js

@@ -11,67 +11,64 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 const PAGE_FIELDS = [ 'id', 'title', 'link', 'type', 'parent' ];
 const MAX_PAGE_COUNT = 100;
 
-export const convertSelectedBlockToNavigationLinks = ( {
-	pages,
-	clientId,
-	replaceBlock,
-	createBlock,
-} ) => () => {
-	if ( ! pages ) {
-		return;
-	}
-
-	const linkMap = {};
-	const navigationLinks = [];
-	pages.forEach( ( { id, title, link: url, type, parent } ) => {
-		// See if a placeholder exists. This is created if children appear before parents in list.
-		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
-		linkMap[ id ] = createBlock(
-			'core/navigation-link',
-			{
-				id,
-				label: title.rendered,
-				url,
-				type,
-				kind: 'post-type',
-			},
-			innerBlocks
-		);
-
-		if ( ! parent ) {
-			navigationLinks.push( linkMap[ id ] );
-		} else {
-			if ( ! linkMap[ parent ] ) {
-				// Use a placeholder if the child appears before parent in list.
-				linkMap[ parent ] = { innerBlocks: [] };
-			}
-			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
-			parentLinkInnerBlocks.push( linkMap[ id ] );
+export const convertSelectedBlockToNavigationLinks =
+	( { pages, clientId, replaceBlock, createBlock } ) =>
+	() => {
+		if ( ! pages ) {
+			return;
 		}
-	} );
 
-	// Transform all links with innerBlocks into Submenus. This can't be done
-	// sooner because page objects have no information on their children.
+		const linkMap = {};
+		const navigationLinks = [];
+		pages.forEach( ( { id, title, link: url, type, parent } ) => {
+			// See if a placeholder exists. This is created if children appear before parents in list.
+			const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
+			linkMap[ id ] = createBlock(
+				'core/navigation-link',
+				{
+					id,
+					label: title.rendered,
+					url,
+					type,
+					kind: 'post-type',
+				},
+				innerBlocks
+			);
 
-	const transformSubmenus = ( listOfLinks ) => {
-		listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
-			const { attributes, innerBlocks } = block;
-			if ( innerBlocks.length !== 0 ) {
-				transformSubmenus( innerBlocks );
-				const transformedBlock = createBlock(
-					'core/navigation-submenu',
-					attributes,
-					innerBlocks
-				);
-				listOfLinksArray[ index ] = transformedBlock;
+			if ( ! parent ) {
+				navigationLinks.push( linkMap[ id ] );
+			} else {
+				if ( ! linkMap[ parent ] ) {
+					// Use a placeholder if the child appears before parent in list.
+					linkMap[ parent ] = { innerBlocks: [] };
+				}
+				const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
+				parentLinkInnerBlocks.push( linkMap[ id ] );
 			}
 		} );
-	};
 
-	transformSubmenus( navigationLinks );
+		// Transform all links with innerBlocks into Submenus. This can't be done
+		// sooner because page objects have no information on their children.
 
-	replaceBlock( clientId, navigationLinks );
-};
+		const transformSubmenus = ( listOfLinks ) => {
+			listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
+				const { attributes, innerBlocks } = block;
+				if ( innerBlocks.length !== 0 ) {
+					transformSubmenus( innerBlocks );
+					const transformedBlock = createBlock(
+						'core/navigation-submenu',
+						attributes,
+						innerBlocks
+					);
+					listOfLinksArray[ index ] = transformedBlock;
+				}
+			} );
+		};
+
+		transformSubmenus( navigationLinks );
+
+		replaceBlock( clientId, navigationLinks );
+	};
 
 export default function ConvertToLinksModal( { onClose, clientId } ) {
 	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(

package/src/page-list/edit.js

@@ -42,10 +42,8 @@ export default function PageListEdit( { context, clientId } ) {
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-page-list', {
 			'has-text-color': !! context.textColor,
-			[ getColorClassName(
-				'color',
-				context.textColor
-			) ]: !! context.textColor,
+			[ getColorClassName( 'color', context.textColor ) ]:
+				!! context.textColor,
 			'has-background': !! context.backgroundColor,
 			[ getColorClassName(
 				'background-color',
@@ -193,7 +191,8 @@ const PageItems = memo( function PageItems( {
 						className={ classnames(
 							'wp-block-pages-list__item__link',
 							{
-								'wp-block-navigation-item__content': isNavigationChild,
+								'wp-block-navigation-item__content':
+									isNavigationChild,
 							}
 						) }
 						href={ page.link }
@@ -214,7 +213,8 @@ const PageItems = memo( function PageItems( {
 							) }
 						<ul
 							className={ classnames( 'submenu-container', {
-								'wp-block-navigation__submenu-container': isNavigationChild,
+								'wp-block-navigation__submenu-container':
+									isNavigationChild,
 							} ) }
 						>
 							<PageItems

package/src/page-list/test/convert-to-links-modal.js

@@ -130,8 +130,7 @@ describe( 'page list convert to links', () => {
 								kind: 'post-type',
 								label: 'About Sub 1',
 								type: 'page',
-								url:
-									'http://wordpress.local/about/about-sub-1/',
+								url: 'http://wordpress.local/about/about-sub-1/',
 							},
 							innerBlocks: [],
 							name: 'core/navigation-link',
@@ -142,8 +141,7 @@ describe( 'page list convert to links', () => {
 								kind: 'post-type',
 								label: 'About Sub 2',
 								type: 'page',
-								url:
-									'http://wordpress.local/about/about-sub-2/',
+								url: 'http://wordpress.local/about/about-sub-2/',
 							},
 							innerBlocks: [],
 							name: 'core/navigation-link',
@@ -186,8 +184,7 @@ describe( 'page list convert to links', () => {
 										kind: 'post-type',
 										label: 'Test Sub Sub',
 										type: 'page',
-										url:
-											'http://wordpress.local/test/test-sub/test-sub-sub/',
+										url: 'http://wordpress.local/test/test-sub/test-sub-sub/',
 									},
 									innerBlocks: [],
 									name: 'core/navigation-link',
@@ -325,8 +322,7 @@ describe( 'page list convert to links', () => {
 								kind: 'post-type',
 								label: 'About Sub 1',
 								type: 'page',
-								url:
-									'http://wordpress.local/about/about-sub-1/',
+								url: 'http://wordpress.local/about/about-sub-1/',
 							},
 							innerBlocks: [],
 							name: 'core/navigation-link',
@@ -337,8 +333,7 @@ describe( 'page list convert to links', () => {
 								kind: 'post-type',
 								label: 'About Sub 2',
 								type: 'page',
-								url:
-									'http://wordpress.local/about/about-sub-2/',
+								url: 'http://wordpress.local/about/about-sub-2/',
 							},
 							innerBlocks: [],
 							name: 'core/navigation-link',
@@ -381,8 +376,7 @@ describe( 'page list convert to links', () => {
 										kind: 'post-type',
 										label: 'Test Sub Sub',
 										type: 'page',
-										url:
-											'http://wordpress.local/test/test-sub/test-sub-sub/',
+										url: 'http://wordpress.local/test/test-sub/test-sub-sub/',
 									},
 									innerBlocks: [],
 									name: 'core/navigation-link',

package/src/paragraph/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFinite, omit } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -328,7 +328,7 @@ const deprecated = [
 			return migrateCustomColorsAndFontSizes(
 				omit( {
 					...attributes,
-					customFontSize: isFinite( attributes.fontSize )
+					customFontSize: Number.isFinite( attributes.fontSize )
 						? attributes.fontSize
 						: undefined,
 					customTextColor:

package/src/pattern/edit.js

@@ -17,10 +17,8 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		[ attributes.slug ]
 	);
 
-	const {
-		replaceBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.

package/src/post-author/edit.js

@@ -28,9 +28,8 @@ function PostAuthorEdit( {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const { authorId, authorDetails, authors } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser, getUsers } = select(
-				coreStore
-			);
+			const { getEditedEntityRecord, getUser, getUsers } =
+				select( coreStore );
 			const _authorId = getEditedEntityRecord(
 				'postType',
 				postType,

package/src/post-content/edit.js

@@ -118,9 +118,8 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		contextPostId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;

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

@@ -20,7 +20,6 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -28,24 +27,18 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import DimensionControls from './dimension-controls';
 
-const placeholderIllustration = (
-	<SVG
-		className="components-placeholder__illustration"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 60 60"
-		preserveAspectRatio="none"
-	>
-		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
-	</SVG>
-);
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const placeholderChip = (
-	<div className="wp-block-post-featured-image__placeholder">
-		{ placeholderIllustration }
-	</div>
-);
+
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
 
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
@@ -101,15 +94,6 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 
-	const placeholder = ( content ) => {
-		return (
-			<Placeholder className="block-editor-media-placeholder">
-				{ placeholderIllustration }
-				{ content }
-			</Placeholder>
-		);
-	};
-
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -153,7 +137,7 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholderChip }</div>
+				<div { ...blockProps }>{ placeholder() }</div>
 			</>
 		);
 	}
@@ -187,7 +171,7 @@ function PostFeaturedImageDisplay( {
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
 		image = ! media ? (
-			placeholderChip
+			placeholder()
 		) : (
 			<img
 				src={ mediaUrl }
@@ -232,7 +216,7 @@ function PostFeaturedImageDisplay( {
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholderChip }</div>;
+		return <div { ...blockProps }>{ placeholder() }</div>;
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }

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

@@ -39,21 +39,6 @@
 		// against any background color.
 		color: currentColor;
 		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
 
 		// Style the upload button.
 		.components-placeholder__fieldset {
@@ -82,20 +67,6 @@
 			color: $white;
 		}
 
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
-
 		// Show default placeholder height when not resized.
 		min-height: 200px;
 	}

package/src/post-navigation-link/block.json

@@ -29,9 +29,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"link": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/pullquote/deprecated.js

@@ -397,7 +397,8 @@ const deprecated = [
 			const blockquoteClasses =
 				textColor || customTextColor
 					? classnames( 'has-text-color', {
-							[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+							[ blockquoteTextColorClass ]:
+								blockquoteTextColorClass,
 					  } )
 					: undefined;
 			const blockquoteStyle = blockquoteTextColorClass

package/src/query/edit/index.js

@@ -37,6 +37,8 @@ export function QueryContent( {
 	attributes,
 	setAttributes,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
 	const {
 		queryId,
@@ -45,9 +47,8 @@ export function QueryContent( {
 		tagName: TagName = 'div',
 		layout = {},
 	} = attributes;
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -109,6 +110,8 @@ export function QueryContent( {
 			/>
 			<BlockControls>
 				<QueryToolbar
+					name={ name }
+					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -213,10 +216,8 @@ function QueryPatternSetup( {
 
 const QueryEdit = ( props ) => {
 	const { clientId, name } = props;
-	const [
-		isPatternSelectionModalOpen,
-		setIsPatternSelectionModalOpen,
-	] = useState( false );
+	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
+		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -226,9 +227,8 @@ const QueryEdit = ( props ) => {
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
 		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
-		);
+		const firstQueryClientId =
+			getFirstQueryClientIdFromBlocks( clonedBlocks );
 		replaceBlock( clientId, clonedBlocks );
 		if ( firstQueryClientId ) {
 			selectBlock( firstQueryClientId );

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

@@ -30,9 +30,8 @@ function ParentControl( { parents, postType, onChange } ) {
 			if ( ! search ) {
 				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
 			}
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreStore
-			);
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
 			const selectorArgs = [
 				'postType',
 				postType,