@wordpress/block-library 8.27.2 → 8.28.1

package/src/buttons/edit.js

@@ -14,15 +14,8 @@ import {
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { name as buttonBlockName } from '../button';
-
-const ALLOWED_BLOCKS = [ buttonBlockName ];
-
 const DEFAULT_BLOCK = {
-	name: buttonBlockName,
+	name: 'core/button',
 	attributesToCopy: [
 		'backgroundColor',
 		'border',
@@ -48,24 +41,22 @@ function ButtonsEdit( { attributes, className } ) {
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;
 		const buttonVariations = select( blocksStore ).getBlockVariations(
-			buttonBlockName,
+			'core/button',
 			'inserter'
 		);
 		return {
-			preferredStyle:
-				preferredStyleVariations?.value?.[ buttonBlockName ],
+			preferredStyle: preferredStyleVariations?.value?.[ 'core/button' ],
 			hasButtonVariations: buttonVariations.length > 0,
 		};
 	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
 		defaultBlock: DEFAULT_BLOCK,
 		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
 		directInsert: ! hasButtonVariations,
 		template: [
 			[
-				buttonBlockName,
+				'core/button',
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],

package/src/buttons/edit.native.js

@@ -21,11 +21,8 @@ import { alignmentHelpers } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { name as buttonBlockName } from '../button/';
 import styles from './editor.scss';
 
-const ALLOWED_BLOCKS = [ buttonBlockName ];
-
 const layoutProp = { type: 'default', alignments: [] };
 
 const POPOVER_PROPS = {
@@ -76,7 +73,7 @@ export default function ButtonsEdit( {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
+		return preferredStyleVariations?.value?.[ 'core/button' ];
 	}, [] );
 
 	const { getBlockOrder } = useSelect( blockEditorStore );
@@ -147,10 +144,9 @@ export default function ButtonsEdit( {
 			) }
 			{ resizeObserver }
 			<InnerBlocks
-				allowedBlocks={ ALLOWED_BLOCKS }
 				template={ [
 					[
-						buttonBlockName,
+						'core/button',
 						{
 							className:
 								preferredStyle &&

package/src/calendar/block.json

@@ -37,6 +37,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-calendar"

package/src/categories/block.json

@@ -51,6 +51,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-categories-editor",

package/src/code/block.json

@@ -56,6 +56,9 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-code"

package/src/column/block.json

@@ -37,6 +37,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"blockGap": true,
 			"padding": true,
@@ -68,6 +69,9 @@
 				"fontSize": true
 			}
 		},
-		"layout": true
+		"layout": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }

package/src/columns/block.json

@@ -4,6 +4,7 @@
 	"name": "core/columns",
 	"title": "Columns",
 	"category": "design",
+	"allowedBlocks": [ "core/column" ],
 	"description": "Display content in multiple columns, with blocks added to each column.",
 	"textdomain": "default",
 	"attributes": {
@@ -78,7 +79,11 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"shadow": true
 	},
 	"editorStyle": "wp-block-columns-editor",
 	"style": "wp-block-columns"

package/src/columns/edit.js

@@ -23,7 +23,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
@@ -40,26 +40,8 @@ import {
 	toWidthPrecision,
 } from './utils';
 
-/**
- * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
- * The contents of the array should never change.
- * The array should contain the name of each block that is allowed.
- * In columns block, the only block we allow is 'core/column'.
- *
- * @constant
- * @type {string[]}
- */
-const ALLOWED_BLOCKS = [ 'core/column' ];
-
-function ColumnsEditContainer( {
-	attributes,
-	setAttributes,
-	updateAlignment,
-	updateColumns,
-	clientId,
-} ) {
+function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
-
 	const { count, canInsertColumnBlock, minCount } = useSelect(
 		( select ) => {
 			const {
@@ -94,6 +76,11 @@ function ColumnsEditContainer( {
 		[ clientId ]
 	);
 
+	const registry = useRegistry();
+	const { getBlocks, getBlockOrder } = useSelect( blockEditorStore );
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
@@ -103,12 +90,93 @@ function ColumnsEditContainer( {
 		className: classes,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
 		renderAppender: false,
 		templateLock,
 	} );
 
+	/**
+	 * Update all child Column blocks with a new vertical alignment setting
+	 * based on whatever alignment is passed in. This allows change to parent
+	 * to overide anything set on a individual column basis.
+	 *
+	 * @param {string} newVerticalAlignment The vertical alignment setting.
+	 */
+	function updateAlignment( newVerticalAlignment ) {
+		const innerBlockClientIds = getBlockOrder( clientId );
+
+		// Update own and child Column block vertical alignments.
+		// This is a single action; the batching prevents creating multiple history records.
+		registry.batch( () => {
+			setAttributes( { verticalAlignment: newVerticalAlignment } );
+			updateBlockAttributes( innerBlockClientIds, {
+				verticalAlignment: newVerticalAlignment,
+			} );
+		} );
+	}
+
+	/**
+	 * Updates the column count, including necessary revisions to child Column
+	 * blocks to grant required or redistribute available space.
+	 *
+	 * @param {number} previousColumns Previous column count.
+	 * @param {number} newColumns      New column count.
+	 */
+	function updateColumns( previousColumns, newColumns ) {
+		let innerBlocks = getBlocks( clientId );
+		const hasExplicitWidths = hasExplicitPercentColumnWidths( innerBlocks );
+
+		// Redistribute available width for existing inner blocks.
+		const isAddingColumn = newColumns > previousColumns;
+
+		if ( isAddingColumn && hasExplicitWidths ) {
+			// If adding a new column, assign width to the new column equal to
+			// as if it were `1 / columns` of the total available space.
+			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+
+			// Redistribute in consideration of pending block insertion as
+			// constraining the available working width.
+			const widths = getRedistributedColumnWidths(
+				innerBlocks,
+				100 - newColumnWidth
+			);
+
+			innerBlocks = [
+				...getMappedColumnWidths( innerBlocks, widths ),
+				...Array.from( {
+					length: newColumns - previousColumns,
+				} ).map( () => {
+					return createBlock( 'core/column', {
+						width: `${ newColumnWidth }%`,
+					} );
+				} ),
+			];
+		} else if ( isAddingColumn ) {
+			innerBlocks = [
+				...innerBlocks,
+				...Array.from( {
+					length: newColumns - previousColumns,
+				} ).map( () => {
+					return createBlock( 'core/column' );
+				} ),
+			];
+		} else if ( newColumns < previousColumns ) {
+			// The removed column will be the last of the inner blocks.
+			innerBlocks = innerBlocks.slice(
+				0,
+				-( previousColumns - newColumns )
+			);
+			if ( hasExplicitWidths ) {
+				// Redistribute as if block is already removed.
+				const widths = getRedistributedColumnWidths( innerBlocks, 100 );
+
+				innerBlocks = getMappedColumnWidths( innerBlocks, widths );
+			}
+		}
+
+		replaceInnerBlocks( clientId, innerBlocks );
+	}
+
 	return (
 		<>
 			<BlockControls>
@@ -118,7 +186,7 @@ function ColumnsEditContainer( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ canInsertColumnBlock && (
 						<>
 							<RangeControl
@@ -164,104 +232,6 @@ function ColumnsEditContainer( {
 	);
 }
 
-const ColumnsEditContainerWrapper = withDispatch(
-	( dispatch, ownProps, registry ) => ( {
-		/**
-		 * Update all child Column blocks with a new vertical alignment setting
-		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
-		 *
-		 * @param {string} verticalAlignment the vertical alignment setting
-		 */
-		updateAlignment( verticalAlignment ) {
-			const { clientId, setAttributes } = ownProps;
-			const { updateBlockAttributes } = dispatch( blockEditorStore );
-			const { getBlockOrder } = registry.select( blockEditorStore );
-
-			// Update own alignment.
-			setAttributes( { verticalAlignment } );
-
-			// Update all child Column Blocks to match.
-			const innerBlockClientIds = getBlockOrder( clientId );
-			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
-				updateBlockAttributes( innerBlockClientId, {
-					verticalAlignment,
-				} );
-			} );
-		},
-
-		/**
-		 * Updates the column count, including necessary revisions to child Column
-		 * blocks to grant required or redistribute available space.
-		 *
-		 * @param {number} previousColumns Previous column count.
-		 * @param {number} newColumns      New column count.
-		 */
-		updateColumns( previousColumns, newColumns ) {
-			const { clientId } = ownProps;
-			const { replaceInnerBlocks } = dispatch( blockEditorStore );
-			const { getBlocks } = registry.select( blockEditorStore );
-
-			let innerBlocks = getBlocks( clientId );
-			const hasExplicitWidths =
-				hasExplicitPercentColumnWidths( innerBlocks );
-
-			// Redistribute available width for existing inner blocks.
-			const isAddingColumn = newColumns > previousColumns;
-
-			if ( isAddingColumn && hasExplicitWidths ) {
-				// If adding a new column, assign width to the new column equal to
-				// as if it were `1 / columns` of the total available space.
-				const newColumnWidth = toWidthPrecision( 100 / newColumns );
-
-				// Redistribute in consideration of pending block insertion as
-				// constraining the available working width.
-				const widths = getRedistributedColumnWidths(
-					innerBlocks,
-					100 - newColumnWidth
-				);
-
-				innerBlocks = [
-					...getMappedColumnWidths( innerBlocks, widths ),
-					...Array.from( {
-						length: newColumns - previousColumns,
-					} ).map( () => {
-						return createBlock( 'core/column', {
-							width: `${ newColumnWidth }%`,
-						} );
-					} ),
-				];
-			} else if ( isAddingColumn ) {
-				innerBlocks = [
-					...innerBlocks,
-					...Array.from( {
-						length: newColumns - previousColumns,
-					} ).map( () => {
-						return createBlock( 'core/column' );
-					} ),
-				];
-			} else if ( newColumns < previousColumns ) {
-				// The removed column will be the last of the inner blocks.
-				innerBlocks = innerBlocks.slice(
-					0,
-					-( previousColumns - newColumns )
-				);
-				if ( hasExplicitWidths ) {
-					// Redistribute as if block is already removed.
-					const widths = getRedistributedColumnWidths(
-						innerBlocks,
-						100
-					);
-
-					innerBlocks = getMappedColumnWidths( innerBlocks, widths );
-				}
-			}
-
-			replaceInnerBlocks( clientId, innerBlocks );
-		},
-	} )
-)( ColumnsEditContainer );
-
 function Placeholder( { clientId, name, setAttributes } ) {
 	const { blockType, defaultVariation, variations } = useSelect(
 		( select ) => {
@@ -315,9 +285,7 @@ const ColumnsEdit = ( props ) => {
 			select( blockEditorStore ).getBlocks( clientId ).length > 0,
 		[ clientId ]
 	);
-	const Component = hasInnerBlocks
-		? ColumnsEditContainerWrapper
-		: Placeholder;
+	const Component = hasInnerBlocks ? ColumnsEditContainer : Placeholder;
 
 	return <Component { ...props } />;
 };

package/src/columns/edit.native.js

@@ -59,17 +59,6 @@ import {
 } from './columnCalculations.native';
 import ColumnsPreview from '../column/column-preview';
 
-/**
- * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
- * The contents of the array should never change.
- * The array should contain the name of each block that is allowed.
- * In columns block, the only block we allow is 'core/column'.
- *
- * @constant
- * @type {string[]}
- */
-const ALLOWED_BLOCKS = [ 'core/column' ];
-
 /**
  * Number of columns to assume for template in case the user opts to skip
  * template option selection.
@@ -275,7 +264,6 @@ function ColumnsEditContainer( {
 							columnsInRow > 1 ? 'horizontal' : undefined
 						}
 						horizontal={ columnsInRow > 1 }
-						allowedBlocks={ ALLOWED_BLOCKS }
 						contentResizeMode="stretch"
 						onAddBlock={ onAddBlock }
 						onDeleteBlock={

package/src/comment-author-avatar/block.json

@@ -39,6 +39,9 @@
 			"__experimentalSkipSerialization": true,
 			"margin": true,
 			"padding": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

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

@@ -48,6 +48,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/comment-date/block.json

@@ -44,6 +44,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/comment-edit-link/block.json

@@ -44,6 +44,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/comment-template/block.json

@@ -28,6 +28,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-comment-template"

package/src/comments-pagination/block.json

@@ -5,6 +5,11 @@
 	"title": "Comments Pagination",
 	"category": "theme",
 	"parent": [ "core/comments" ],
+	"allowedBlocks": [
+		"core/comments-pagination-previous",
+		"core/comments-pagination-numbers",
+		"core/comments-pagination-next"
+	],
 	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
 	"textdomain": "default",
 	"attributes": {
@@ -48,6 +53,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-comments-pagination-editor",

package/src/comments-pagination/edit.js

@@ -22,11 +22,6 @@ const TEMPLATE = [
 	[ 'core/comments-pagination-numbers' ],
 	[ 'core/comments-pagination-next' ],
 ];
-const ALLOWED_BLOCKS = [
-	'core/comments-pagination-previous',
-	'core/comments-pagination-numbers',
-	'core/comments-pagination-next',
-];
 
 export default function QueryPaginationEdit( {
 	attributes: { paginationArrow },
@@ -52,7 +47,6 @@ export default function QueryPaginationEdit( {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: ALLOWED_BLOCKS,
 	} );
 
 	// Get the Discussion settings

package/src/comments-pagination-next/block.json

@@ -35,6 +35,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

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

@@ -30,6 +30,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/comments-pagination-previous/block.json

@@ -35,6 +35,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/comments-title/block.json

@@ -61,6 +61,9 @@
 				"__experimentalFontStyle": true,
 				"__experimentalFontWeight": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/cover/block.json

@@ -132,6 +132,9 @@
 		},
 		"layout": {
 			"allowJustification": false
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

package/src/cover/edit/inspector-controls.js

@@ -167,7 +167,7 @@ export default function CoverInspectorControls( {
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Media settings' ) }>
+					<PanelBody title={ __( 'Settings' ) }>
 						{ isImageBackground && (
 							<>
 								<ToggleControl
@@ -188,7 +188,8 @@ export default function CoverInspectorControls( {
 						{ showFocalPointPicker && (
 							<FocalPointPicker
 								__nextHasNoMarginBottom
-								label={ __( 'Focal point picker' ) }
+								__next40pxDefaultSize
+								label={ __( 'Focal point' ) }
 								url={ url }
 								value={ focalPoint }
 								onDragStart={ imperativeFocalPointPreview }

package/src/cover/test/edit.js

@@ -163,7 +163,7 @@ describe( 'Cover block', () => {
 				await setup();
 				expect(
 					screen.queryByRole( 'button', {
-						name: 'Media settings',
+						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
 			} );
@@ -175,7 +175,7 @@ describe( 'Cover block', () => {
 				await selectBlock( 'Block: Cover' );
 				expect(
 					screen.getByRole( 'button', {
-						name: 'Media settings',
+						name: 'Settings',
 					} )
 				).toBeInTheDocument();
 			} );

package/src/details/block.json

@@ -58,6 +58,9 @@
 		},
 		"layout": {
 			"allowEditing": false
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-details-editor",

package/src/editor.scss

@@ -54,6 +54,7 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
+@import "./post-content/editor.scss";
 
 @import "./editor-elements.scss";
 

package/src/embed/block.json

@@ -44,6 +44,9 @@
 		"align": true,
 		"spacing": {
 			"margin": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-embed-editor",

package/src/embed/editor.scss

@@ -16,9 +16,15 @@
 	.components-placeholder__error {
 		word-break: break-word;
 	}
+}
+
+.wp-block-embed__learn-more {
+	margin-top: 1em;
 
-	.components-placeholder__learn-more {
-		margin-top: 1em;
+	@at-root .wp-block-post-content & {
+		a {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }