@wordpress/block-library 7.6.0 → 7.9.0

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/',
 			} );
 		} );
 
@@ -372,26 +370,6 @@ describe( 'edit', () => {
 					url: 'https://wordpress.org',
 				} );
 			} );
-			// https://github.com/WordPress/gutenberg/pull/18617
-			it( 'label is javascript escaped', () => {
-				const setAttributes = jest.fn();
-				const linkSuggestion = {
-					opensInNewTab: false,
-					title: '<Navigation />',
-					type: 'URL',
-					url: 'https://wordpress.local?p=1',
-				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
-				expect( setAttributes ).toHaveBeenCalledWith( {
-					opensInNewTab: false,
-					label: '&lt;Navigation /&gt;',
-					kind: 'custom',
-					url: 'https://wordpress.local?p=1',
-				} );
-			} );
 			// https://github.com/WordPress/gutenberg/pull/19679
 			it( 'url when escaped is still an actual link', () => {
 				const setAttributes = jest.fn();

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/navigation-submenu/view.js

@@ -3,6 +3,8 @@ const closeSubmenus = ( element ) => {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( ( toggle ) => {
 			toggle.setAttribute( 'aria-expanded', 'false' );
+			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
+			toggle.focus();
 		} );
 };
 
@@ -49,13 +51,16 @@ document.addEventListener( 'click', function ( event ) {
 		}
 	} );
 } );
-// Close on focus outside.
+// Close on focus outside or escape key.
 document.addEventListener( 'keyup', function ( event ) {
 	const submenuBlocks = document.querySelectorAll(
 		'.wp-block-navigation-submenu'
 	);
 	submenuBlocks.forEach( ( block ) => {
-		if ( ! block.contains( event.target ) ) {
+		if (
+			! block.contains( event.target ) ||
+			( block.contains( event.target ) && event.key === 'Escape' )
+		) {
 			closeSubmenus( block );
 		}
 	} );

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-author/index.php

@@ -15,10 +15,11 @@
  */
 function render_block_core_post_author( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+		$author_id = get_query_var( 'author' );
+	} else {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}

package/src/post-author-name/index.js

@@ -3,6 +3,7 @@
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 /**
  * WordPress dependencies
@@ -14,5 +15,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 };

package/src/post-author-name/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
-	return sprintf( '<div %1$s>', $wrapper_attributes ) . $author_name . '</div>';
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $author_name );
 }
 
 /**

package/src/post-author-name/transforms.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author-name', { textAlign } ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author', { textAlign } ),
+		},
+	],
+};
+
+export default transforms;

package/src/post-comments/index.php

@@ -78,7 +78,7 @@ add_action( 'init', 'register_block_core_post_comments' );
  */
 function post_comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-comments/style.scss

@@ -128,8 +128,12 @@
 	input:not([type="submit"]):not([type="checkbox"]) {
 		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 	}
+}
 
-	input[type="submit"] {
-		border: none;
-	}
+
+// Using :where to give this a low specificity so that element styles take precedence.
+// Needed for backwards compatibility.
+// Styles copied from button block styles.
+:where(.wp-block-post-comments input[type="submit"]) {
+	border: none;
 }

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

@@ -13,9 +13,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -28,7 +30,7 @@ export default function PostCommentsFormEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
-	const [ commentStatus ] = useEntityProp(
+	const [ commentStatus, setCommentStatus ] = useEntityProp(
 		'postType',
 		postType,
 		'comment_status',
@@ -55,6 +57,7 @@ export default function PostCommentsFormEdit( {
 	);
 
 	let warning = false;
+	let actions;
 	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
@@ -66,6 +69,18 @@ export default function PostCommentsFormEdit( {
 				),
 				postType
 			);
+			actions = [
+				<Button
+					key="enableComments"
+					onClick={ () => setCommentStatus( 'open' ) }
+					variant="primary"
+				>
+					{ _x(
+						'Enable comments',
+						'action that affects the current post'
+					) }
+				</Button>,
+			];
 			showPlaceholder = false;
 		} else if ( ! postTypeSupportsComments ) {
 			warning = sprintf(
@@ -95,7 +110,9 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ warning && <Warning>{ warning }</Warning> }
+				{ warning && (
+					<Warning actions={ actions }>{ warning }</Warning>
+				) }
 
 				{ showPlaceholder ? <CommentsForm /> : null }
 			</div>

package/src/post-comments-form/editor.scss

@@ -1,3 +1,7 @@
 .wp-block-post-comments-form * {
 	pointer-events: none;
+
+	&.block-editor-warning * {
+		pointer-events: auto;
+	}
 }

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

@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
@@ -27,7 +33,11 @@ const CommentsForm = () => {
 					<input
 						name="submit"
 						type="submit"
-						className="submit wp-block-button__link"
+						className={ classnames(
+							'submit',
+							'wp-block-button__link',
+							__experimentalGetElementClassName( 'button' )
+						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
 					/>

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

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-date/edit.js

@@ -18,13 +18,13 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
+	__experimentalPublishDateTimePicker as PublishDateTimePicker,
 } from '@wordpress/block-editor';
 import {
 	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	DateTimePicker,
 	PanelBody,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -101,13 +101,14 @@ export default function PostDateEdit( {
 					<ToolbarGroup>
 						<Dropdown
 							popoverProps={ { anchorRef: timeRef.current } }
-							renderContent={ () => (
-								<DateTimePicker
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
 									currentDate={ date }
 									onChange={ setDate }
 									is12Hour={ is12HourFormat(
 										siteTimeFormat
 									) }
+									onClose={ onClose }
 								/>
 							) }
 							renderToggle={ ( { isOpen, onToggle } ) => {