@wordpress/block-library 8.12.0 → 8.12.2

package/src/navigation/view.js

@@ -0,0 +1,74 @@
+// Open on click functionality.
+function closeSubmenus( element ) {
+	element
+		.querySelectorAll( '[aria-expanded="true"]' )
+		.forEach( function ( toggle ) {
+			toggle.setAttribute( 'aria-expanded', 'false' );
+		} );
+}
+
+function toggleSubmenuOnClick( event ) {
+	const buttonToggle = event.target.closest( '[aria-expanded]' );
+	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+
+	if ( isSubmenuOpen === 'true' ) {
+		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
+	} else {
+		// Close all sibling submenus.
+		const parentElement = buttonToggle.closest(
+			'.wp-block-navigation-item'
+		);
+		const navigationParent = buttonToggle.closest(
+			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
+		);
+		navigationParent
+			.querySelectorAll( '.wp-block-navigation-item' )
+			.forEach( function ( child ) {
+				if ( child !== parentElement ) {
+					closeSubmenus( child );
+				}
+			} );
+		// Open submenu.
+		buttonToggle.setAttribute( 'aria-expanded', 'true' );
+	}
+}
+
+// Necessary for some themes such as TT1 Blocks, where
+// scripts could be loaded before the body.
+window.addEventListener( 'load', () => {
+	const submenuButtons = document.querySelectorAll(
+		'.wp-block-navigation-submenu__toggle'
+	);
+
+	submenuButtons.forEach( function ( button ) {
+		button.addEventListener( 'click', toggleSubmenuOnClick );
+	} );
+
+	// Close on click outside.
+	document.addEventListener( 'click', function ( event ) {
+		const navigationBlocks = document.querySelectorAll(
+			'.wp-block-navigation'
+		);
+		navigationBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			}
+		} );
+	} );
+	// Close on focus outside or escape key.
+	document.addEventListener( 'keyup', function ( event ) {
+		const submenuBlocks = document.querySelectorAll(
+			'.wp-block-navigation-item.has-child'
+		);
+		submenuBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			} else if ( event.key === 'Escape' ) {
+				const toggle = block.querySelector( '[aria-expanded="true"]' );
+				closeSubmenus( block );
+				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+				toggle?.focus();
+			}
+		} );
+	} );
+} );

package/src/page-list/block.json

@@ -33,7 +33,6 @@
 		"openSubmenusOnClick"
 	],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {

package/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph block should render without crashing and match snapshot 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "p",
+      }
+    }
+    deleteEnter={true}
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={16}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholder="Start writing…"
+    placeholderTextColor="gray"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;

package/src/paragraph/test/edit.native.js

@@ -40,9 +40,9 @@ const getTestComponentWithContent = ( content ) => {
 };
 
 describe( 'Paragraph block', () => {
-	it( 'renders without crashing', () => {
+	it( 'should render without crashing and match snapshot', () => {
 		const screen = getTestComponentWithContent( '' );
-		expect( screen.container ).toBeTruthy();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
 	it( 'should bold text', async () => {
@@ -251,7 +251,7 @@ describe( 'Paragraph block', () => {
 			'wordpress.org'
 		);
 		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Add link text' ),
+			screen.getByPlaceholderText( 'Add link text', { hidden: true } ),
 			'WordPress'
 		);
 		jest.useFakeTimers();

package/src/pattern/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/pattern",
-	"title": "Pattern",
+	"title": "Pattern placeholder",
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {
@@ -13,10 +13,6 @@
 	"attributes": {
 		"slug": {
 			"type": "string"
-		},
-		"syncStatus": {
-			"type": [ "string", "boolean" ],
-			"enum": [ "full", "partial" ]
 		}
 	}
 }

package/src/pattern/edit.js

@@ -7,35 +7,26 @@ import { useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	useBlockProps,
-	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 const PatternEdit = ( { attributes, clientId } ) => {
-	const { slug, syncStatus } = attributes;
-	const { selectedPattern, innerBlocks } = useSelect(
-		( select ) => {
-			return {
-				selectedPattern:
-					select( blockEditorStore ).__experimentalGetParsedPattern(
-						slug
-					),
-				innerBlocks:
-					select( blockEditorStore ).getBlock( clientId )
-						?.innerBlocks,
-			};
-		},
-		[ slug, clientId ]
+	const selectedPattern = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedPattern(
+				attributes.slug
+			),
+		[ attributes.slug ]
 	);
-	const {
-		replaceBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+
+	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
+	// This change won't be saved.
+	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks && ! innerBlocks?.length ) {
+		if ( selectedPattern?.blocks ) {
 			// We batch updates to block list settings to avoid triggering cascading renders
 			// for each container block included in a tree and optimize initial render.
 			// Since the above uses microtasks, we need to use a microtask here as well,
@@ -48,36 +39,19 @@ const PatternEdit = ( { attributes, clientId } ) => {
 					cloneBlock( block )
 				);
 				__unstableMarkNextChangeAsNotPersistent();
-				if ( syncStatus === 'partial' ) {
-					replaceInnerBlocks( clientId, clonedBlocks );
-					return;
-				}
 				replaceBlocks( clientId, clonedBlocks );
 			} );
 		}
 	}, [
 		clientId,
 		selectedPattern?.blocks,
-		replaceInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
-		innerBlocks,
-		syncStatus,
 		replaceBlocks,
 	] );
 
-	const blockProps = useBlockProps( {
-		className: slug?.replace( '/', '-' ),
-	} );
-
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: syncStatus === 'partial' ? 'contentOnly' : false,
-	} );
-
-	if ( syncStatus !== 'partial' ) {
-		return <div { ...blockProps } />;
-	}
+	const props = useBlockProps();
 
-	return <div { ...innerBlocksProps } />;
+	return <div { ...props } />;
 };
 
 export default PatternEdit;

package/src/pattern/index.js

@@ -3,14 +3,13 @@
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import PatternEditV1 from './v1/edit';
-import PatternEditV2 from './edit';
+import PatternEdit from './edit';
 
 const { name } = metadata;
 export { metadata, name };
 
-export const settings = window?.__experimentalEnablePatternEnhancements
-	? { edit: PatternEditV2 }
-	: { edit: PatternEditV1 };
+export const settings = {
+	edit: PatternEdit,
+};
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/pattern/index.php

@@ -39,19 +39,7 @@ function render_block_core_pattern( $attributes ) {
 	}
 
 	$pattern = $registry->get_registered( $slug );
-
-	// Currently all existing blocks should be returned here without a wp-block-pattern wrapper
-	// as the syncStatus attribute is only used if the gutenberg-pattern-enhancements experiment
-	// is enabled.
-	if ( ! isset( $attributes['syncStatus'] ) ) {
-		return do_blocks( $pattern['content'] );
-	}
-
-	$block_classnames = 'wp-block-pattern ' . str_replace( '/', '-', $attributes['slug'] );
-	$classnames       = isset( $attributes['className'] ) ? $attributes['className'] . ' ' . $block_classnames : $block_classnames;
-	$wrapper          = '<div class="' . esc_attr( $classnames ) . '">%s</div>';
-
-	return sprintf( $wrapper, do_blocks( $pattern['content'] ) );
+	return do_blocks( $pattern['content'] );
 }
 
 add_action( 'init', 'register_block_core_pattern' );

package/src/post-author/block.json

@@ -35,7 +35,6 @@
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-author/edit.js

@@ -93,14 +93,14 @@ function PostAuthorEdit( {
 	};
 
 	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
+	const showAuthorControl =
+		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ !! postId &&
-						! isDescendentOfQueryLoop &&
-						authorOptions.length &&
+					{ showAuthorControl &&
 						( ( showCombobox && (
 							<ComboboxControl
 								__nextHasNoMarginBottom

package/src/post-author-biography/block.json

@@ -13,7 +13,6 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
-		"anchor": true,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/post-author-name/block.json

@@ -21,7 +21,6 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-comments-count/block.json

@@ -14,7 +14,6 @@
 	},
 	"usesContext": [ "postId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-comments-form/block.json

@@ -13,7 +13,6 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

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

@@ -14,7 +14,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

package/src/post-content/block.json

@@ -8,10 +8,9 @@
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
-		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
-		"__experimentalLayout": true,
+		"layout": true,
 		"dimensions": {
 			"minHeight": true
 		},

package/src/post-date/block.json

@@ -24,7 +24,6 @@
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-excerpt/block.json

@@ -24,7 +24,6 @@
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

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

@@ -56,7 +56,6 @@
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
-		"anchor": true,
 		"color": {
 			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,

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

@@ -31,7 +31,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/post-template/block.json

@@ -19,8 +19,7 @@
 		"reusable": false,
 		"html": false,
 		"align": [ "wide", "full" ],
-		"anchor": true,
-		"__experimentalLayout": true,
+		"layout": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/post-template/edit.js

@@ -222,7 +222,10 @@ export default function PostTemplateEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( __unstableLayoutClassNames ),
+		className: classnames( __unstableLayoutClassNames, {
+			[ `columns-${ columnCount }` ]:
+				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
+		} ),
 	} );
 
 	if ( ! posts ) {

package/src/post-template/index.php

@@ -72,6 +72,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		$classnames .= ' has-link-color';
 	}
 
+	// Ensure backwards compatibility by flagging the number of columns via classname when using grid layout.
+	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
+		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 
 	$content = '';

package/src/post-terms/block.json

@@ -28,7 +28,6 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-terms/edit.js

@@ -69,10 +69,6 @@ export default function PostTermsEdit( {
 		} ),
 	} );
 
-	if ( ! hasPost || ! term ) {
-		return <div { ...blockProps }>{ blockInformation.title }</div>;
-	}
-
 	return (
 		<>
 			<BlockControls>
@@ -96,7 +92,7 @@ export default function PostTermsEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ isLoading && <Spinner /> }
+				{ isLoading && hasPost && <Spinner /> }
 				{ ! isLoading && hasPostTerms && ( isSelected || prefix ) && (
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
@@ -111,7 +107,11 @@ export default function PostTermsEdit( {
 						tagName="span"
 					/>
 				) }
-				{ ! isLoading &&
+				{ ( ! hasPost || ! term ) && (
+					<span>{ blockInformation.title }</span>
+				) }
+				{ hasPost &&
+					! isLoading &&
 					hasPostTerms &&
 					postTerms
 						.map( ( postTerm ) => (
@@ -132,7 +132,8 @@ export default function PostTermsEdit( {
 								{ curr }
 							</>
 						) ) }
-				{ ! isLoading &&
+				{ hasPost &&
+					! isLoading &&
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }

package/src/post-terms/hooks.js

@@ -16,9 +16,9 @@ export default function enhanceVariations( settings, name ) {
 	}
 	const variations = settings.variations.map( ( variation ) => ( {
 		...variation,
-		...( variationIconMap[ variation.name ] && {
-			icon: variationIconMap[ variation.name ],
-		} ),
+		...{
+			icon: variationIconMap[ variation.name ] ?? postCategories,
+		},
 	} ) );
 	return {
 		...settings,

package/src/post-time-to-read/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/post-title/block.json

@@ -31,7 +31,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-title/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	HeadingLevelDropdown,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
@@ -22,9 +23,8 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 import { useCanEditEntity } from '../utils/hooks';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
@@ -34,7 +34,7 @@ export default function PostTitleEdit( {
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
 } ) {
-	const TagName = 0 === level ? 'p' : 'h' + level;
+	const TagName = 'h' + level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	/**
 	 * Hack: useCanEditEntity may trigger an OPTIONS request to the REST API via the canUser resolver.
@@ -120,7 +120,7 @@ export default function PostTitleEdit( {
 			{ blockEditingMode === 'default' && (
 				<BlockControls group="block">
 					<HeadingLevelDropdown
-						selectedLevel={ level }
+						value={ level }
 						onChange={ ( newLevel ) =>
 							setAttributes( { level: newLevel } )
 						}

package/src/post-title/index.php

@@ -28,7 +28,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
-		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
+		$tag_name = 'h' . $attributes['level'];
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {

package/src/preformatted/test/edit.native.js

@@ -24,24 +24,12 @@ import PreformattedEdit from '../edit';
 setupCoreBlocks();
 
 describe( 'Preformatted', () => {
-	it( 'renders without crashing', () => {
-		const screen = render(
-			<PreformattedEdit
-				attributes={ {} }
-				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ jest.fn() }
-			/>
-		);
-
-		expect( screen.container ).toBeDefined();
-	} );
-
 	it( 'should match snapshot when content is empty', () => {
 		const screen = render(
 			<PreformattedEdit
 				attributes={ {} }
 				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ ( styles1 ) => styles1 }
+				getStylesFromColorScheme={ jest.fn() }
 			/>
 		);
 		expect( screen.toJSON() ).toMatchSnapshot();

package/src/query/block.json

@@ -43,9 +43,8 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
-		"__experimentalLayout": true
+		"layout": true
 	},
 	"editorStyle": "wp-block-query-editor"
 }