@wordpress/block-library 7.2.0 → 7.3.0

package/src/navigation/style.scss

@@ -51,25 +51,27 @@ $navigation-icon-size: 24px;
 		padding: 0;
 	}
 
-	// Force links to inherit text decoration applied to navigation block.
-	// The extra selector adds specificity to ensure it works when user-set.
-	&[style*="text-decoration"] {
-		.wp-block-navigation-item,
-		.wp-block-navigation__submenu-container {
-			text-decoration: inherit;
+	// The following rules provide class based application of user selected text
+	// decoration via block supports.
+	&.has-text-decoration-underline .wp-block-navigation-item__content {
+		text-decoration: underline;
+
+		&:focus,
+		&:active {
+			text-decoration: underline;
 		}
+	}
 
-		a {
-			text-decoration: inherit;
+	&.has-text-decoration-line-through .wp-block-navigation-item__content {
+		text-decoration: line-through;
 
-			&:focus,
-			&:active {
-				text-decoration: inherit;
-			}
+		&:focus,
+		&:active {
+			text-decoration: line-through;
 		}
 	}
 
-	&:not([style*="text-decoration"]) {
+	&:where(:not([class*="has-text-decoration"])) {
 		a {
 			text-decoration: none;
 

package/src/navigation/use-navigation-menu.js

@@ -60,6 +60,10 @@ export default function useNavigationMenu( ref ) {
 					! ref ||
 					( hasResolvedNavigationMenu && ! rawNavigationMenu ),
 				canSwitchNavigationMenu,
+				isResolvingNavigationMenus: isResolving(
+					'getEntityRecords',
+					navigationMenuMultipleArgs
+				),
 				hasResolvedNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
 					navigationMenuMultipleArgs

package/src/navigation-link/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"style"
 	],
 	"supports": {

package/src/navigation-link/edit.js

@@ -49,8 +49,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { name } from './block.json';
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -400,6 +398,7 @@ export default function NavigationLinkEdit( {
 	} = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
+	const { maxNestingLevel } = context;
 
 	const link = {
 		url,
@@ -452,7 +451,7 @@ export default function NavigationLinkEdit( {
 					getBlockParentsByBlockName( clientId, [
 						name,
 						'core/navigation-submenu',
-					] ).length >= MAX_NESTING,
+					] ).length >= maxNestingLevel,
 				isTopLevelLink:
 					getBlockName( getBlockRootClientId( clientId ) ) ===
 					'core/navigation',
@@ -738,40 +737,49 @@ export default function NavigationLinkEdit( {
 					) : (
 						<>
 							{ ! isInvalid && ! isDraft && (
-								<RichText
-									ref={ ref }
-									identifier="label"
-									className="wp-block-navigation-item__label"
-									value={ label }
-									onChange={ ( labelValue ) =>
-										setAttributes( {
-											label: labelValue,
-										} )
-									}
-									onMerge={ mergeBlocks }
-									onReplace={ onReplace }
-									__unstableOnSplitAtEnd={ () =>
-										insertBlocksAfter(
-											createBlock(
-												'core/navigation-link'
+								<>
+									<RichText
+										ref={ ref }
+										identifier="label"
+										className="wp-block-navigation-item__label"
+										value={ label }
+										onChange={ ( labelValue ) =>
+											setAttributes( {
+												label: labelValue,
+											} )
+										}
+										onMerge={ mergeBlocks }
+										onReplace={ onReplace }
+										__unstableOnSplitAtEnd={ () =>
+											insertBlocksAfter(
+												createBlock(
+													'core/navigation-link'
+												)
 											)
-										)
-									}
-									aria-label={ __( 'Navigation link text' ) }
-									placeholder={ itemLabelPlaceholder }
-									withoutInteractiveFormatting
-									allowedFormats={ [
-										'core/bold',
-										'core/italic',
-										'core/image',
-										'core/strikethrough',
-									] }
-									onClick={ () => {
-										if ( ! url ) {
-											setIsLinkOpen( true );
 										}
-									} }
-								/>
+										aria-label={ __(
+											'Navigation link text'
+										) }
+										placeholder={ itemLabelPlaceholder }
+										withoutInteractiveFormatting
+										allowedFormats={ [
+											'core/bold',
+											'core/italic',
+											'core/image',
+											'core/strikethrough',
+										] }
+										onClick={ () => {
+											if ( ! url ) {
+												setIsLinkOpen( true );
+											}
+										} }
+									/>
+									{ description && (
+										<span className="wp-block-navigation-item__description">
+											{ description }
+										</span>
+									) }
+								</>
 							) }
 							{ ( isInvalid || isDraft ) && (
 								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">

package/src/navigation-link/index.php

@@ -197,6 +197,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	}
 
 	$html .= '</span>';
+
+	// Add description if available.
+	if ( ! empty( $attributes['description'] ) ) {
+		$html .= '<span class="wp-block-navigation-item__description">';
+		$html .= wp_kses_post( $attributes['description'] );
+		$html .= '</span>';
+	}
+
 	$html .= '</a>';
 	// End anchor tag content.
 

package/src/navigation-link/style.scss

@@ -8,4 +8,10 @@
 		word-break: normal;
 		overflow-wrap: break-word;
 	}
+
+	// Hide the description by default.
+	// If a theme opts-in to show descriptions, they will need to provide styles for them.
+	.wp-block-navigation-item__description {
+		display: none;
+	}
 }

package/src/navigation-submenu/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"openSubmenusOnClick",
 		"style"
 	],

package/src/navigation-submenu/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, pull } from 'lodash';
+import { escape, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,8 +55,6 @@ const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -293,7 +291,7 @@ export default function NavigationSubmenuEdit( {
 		url,
 		opensInNewTab,
 	};
-	const { showSubmenuIcon, openSubmenusOnClick } = context;
+	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const {
@@ -351,7 +349,7 @@ export default function NavigationSubmenuEdit( {
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, name ).length >=
-					MAX_NESTING,
+					maxNestingLevel,
 				isTopLevelItem:
 					getBlockParentsByBlockName( clientId, name ).length === 0,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
@@ -503,9 +501,9 @@ export default function NavigationSubmenuEdit( {
 	// Always use overlay colors for submenus.
 	const innerBlocksColors = getColors( context, true );
 
-	if ( isAtMaxNesting ) {
-		pull( ALLOWED_BLOCKS, 'core/navigation-submenu' );
-	}
+	const allowedBlocks = isAtMaxNesting
+		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -528,7 +526,7 @@ export default function NavigationSubmenuEdit( {
 			},
 		},
 		{
-			allowedBlocks: ALLOWED_BLOCKS,
+			allowedBlocks,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: true,
 

package/src/paragraph/style.scss

@@ -28,11 +28,6 @@
 	font-style: normal;
 }
 
-p {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
-}
-
 // Prevent the dropcap from breaking out of the box when a background is applied.
 p.has-drop-cap.has-background {
 	overflow: hidden;

package/src/post-author/index.php

@@ -30,7 +30,6 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
 	$classes = array_merge(
-		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		isset( $attributes['textAlign'] ) ? array( 'has-text-align-' . $attributes['textAlign'] ) : array()
 	);

package/src/post-comment/edit.js

@@ -8,7 +8,7 @@ import { blockDefault } from '@wordpress/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 const ALLOWED_BLOCKS = [
-	'core/comment-author-avatar',
+	'core/avatar',
 	'core/comment-author-name',
 	'core/comment-content',
 	'core/comment-date',
@@ -16,7 +16,7 @@ const ALLOWED_BLOCKS = [
 	'core/comment-reply-link',
 ];
 const TEMPLATE = [
-	[ 'core/comment-author-avatar' ],
+	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
 	[ 'core/comment-date' ],
 	[ 'core/comment-content' ],

package/src/post-comments-form/edit.js

@@ -34,6 +34,8 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
+	const isInSiteEditor = postType === undefined || postId === undefined;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -45,7 +47,7 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && (
+				{ ! commentStatus && ! isInSiteEditor && (
 					<Warning>
 						{ __(
 							'Post Comments Form block: comments are not enabled for this post type.'
@@ -53,7 +55,7 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ 'open' !== commentStatus && (
+				{ 'open' !== commentStatus && ! isInSiteEditor && (
 					<Warning>
 						{ sprintf(
 							/* translators: 1: Post type (i.e. "post", "page") */
@@ -65,7 +67,8 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ 'open' === commentStatus && __( 'Post Comments Form' ) }
+				{ ( 'open' === commentStatus || isInSiteEditor ) &&
+					__( 'Post Comments Form' ) }
 			</div>
 		</>
 	);

package/src/post-featured-image/block.json

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},

package/src/post-template/edit.js

@@ -26,7 +26,10 @@ const TEMPLATE = [
 ];
 
 function PostTemplateInnerBlocks() {
-	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	const innerBlocksProps = useInnerBlocksProps(
+		{ className: 'wp-block-post' },
+		{ template: TEMPLATE }
+	);
 	return <li { ...innerBlocksProps } />;
 }
 
@@ -38,6 +41,9 @@ function PostTemplateBlockPreview( {
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
+		props: {
+			className: 'wp-block-post',
+		},
 	} );
 
 	const handleOnClick = () => {

package/src/post-terms/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
+	useBlockDisplayInformation,
 } from '@wordpress/block-editor';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -25,6 +26,7 @@ import usePostTerms from './use-post-terms';
 
 export default function PostTermsEdit( {
 	attributes,
+	clientId,
 	context,
 	setAttributes,
 } ) {
@@ -46,6 +48,7 @@ export default function PostTermsEdit( {
 		term: selectedTerm,
 	} );
 	const hasPost = postId && postType;
+	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -54,7 +57,7 @@ export default function PostTermsEdit( {
 	} );
 
 	if ( ! hasPost || ! term ) {
-		return <div { ...blockProps }>{ __( 'Post Terms' ) }</div>;
+		return <div { ...blockProps }>{ blockInformation.title }</div>;
 	}
 
 	return (

package/src/post-terms/variations.js

@@ -2,14 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postCategories as icon } from '@wordpress/icons';
+import { postCategories, postTerms } from '@wordpress/icons';
 
 const variations = [
 	{
 		name: 'category',
 		title: __( 'Post Categories' ),
 		description: __( "Display a post's categories." ),
-		icon,
+		icon: postCategories,
 		isDefault: true,
 		attributes: { term: 'category' },
 		isActive: ( blockAttributes ) => blockAttributes.term === 'category',
@@ -19,7 +19,7 @@ const variations = [
 		name: 'post_tag',
 		title: __( 'Post Tags' ),
 		description: __( "Display a post's tags." ),
-		icon,
+		icon: postTerms,
 		attributes: { term: 'post_tag' },
 		isActive: ( blockAttributes ) => blockAttributes.term === 'post_tag',
 	},

package/src/query-pagination/edit.js

@@ -76,7 +76,7 @@ export default function QueryPaginationEdit( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<div { ...innerBlocksProps } />
+			<nav { ...innerBlocksProps } />
 		</>
 	);
 }

package/src/query-pagination/index.php

@@ -18,9 +18,16 @@ function render_block_core_query_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'role'       => 'navigation',
+			'aria-label' => __( 'Pagination' ),
+		)
+	);
+
 	return sprintf(
-		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		'<nav %1$s>%2$s</nav>',
+		$wrapper_attributes,
 		$content
 	);
 }

package/src/query-pagination-numbers/block.json

@@ -10,7 +10,25 @@
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "query-pagination-numbers-editor"
 }

package/src/quote/block.json

@@ -41,6 +41,14 @@
 				"fontSize": true,
 				"fontAppearance": true
 			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"styles": [

package/src/quote/index.js

@@ -12,12 +12,13 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import settingsV2 from './v2';
 
 const { name } = metadata;
 
 export { metadata, name };
 
-export const settings = {
+export const settingsV1 = {
 	icon,
 	example: {
 		attributes: {
@@ -51,3 +52,7 @@ export const settings = {
 	},
 	deprecated,
 };
+
+export const settings = window?.__experimentalEnableQuoteBlockV2
+	? settingsV2
+	: settingsV1;

package/src/quote/style.scss

@@ -1,4 +1,5 @@
 .wp-block-quote {
+	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
 	&.is-style-large:not(.is-style-plain),

package/src/quote/v2/deprecated.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import deprecationsForV1Block from '../deprecated';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value } = attributes;
+
+	return [
+		{
+			...omit( attributes, [ 'value' ] ),
+		},
+		value
+			? parseWithAttributeSchema( value, {
+					type: 'array',
+					source: 'query',
+					selector: 'p',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+					},
+			  } ).map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
+			  )
+			: createBlock( 'core/paragraph' ),
+	];
+};
+
+const v3 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v3, ...deprecationsForV1Block ];