@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/src/pullquote/deprecated.js

@@ -19,6 +19,7 @@ import { select } from '@wordpress/data';
  * Internal dependencies
  */
 import { SOLID_COLOR_CLASS } from './shared';
+import migrateTextAlignAttributeToBlockSupport from '../utils/migrate-text-align';
 
 const blockAttributes = {
 	value: {
@@ -68,6 +69,117 @@ function multilineToInline( value ) {
 	return values.join( '<br>' );
 }
 
+const v6 = {
+	attributes: {
+		value: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'p',
+			role: 'content',
+		},
+		citation: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'cite',
+			role: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'left', 'right', 'wide', 'full' ],
+		background: {
+			backgroundImage: true,
+			backgroundSize: true,
+			__experimentalDefaultControls: {
+				backgroundImage: true,
+			},
+		},
+		color: {
+			gradients: true,
+			background: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalStyle: {
+			typography: {
+				fontSize: '1.5em',
+				lineHeight: '1.6',
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, citation, value } = attributes;
+		const shouldShowCitation = ! RichText.isEmpty( citation );
+
+		return (
+			<figure
+				{ ...useBlockProps.save( {
+					className: clsx( {
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					} ),
+				} ) }
+			>
+				<blockquote>
+					<RichText.Content tagName="p" value={ value } />
+					{ shouldShowCitation && (
+						<RichText.Content tagName="cite" value={ citation } />
+					) }
+				</blockquote>
+			</figure>
+		);
+	},
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	migrate: migrateTextAlignAttributeToBlockSupport,
+};
+
 // Version 5 created in #43210 / c4b2ca7f3f. Supports match block.json at the time.
 const v5 = {
 	attributes: {
@@ -156,10 +268,10 @@ const v5 = {
 		);
 	},
 	migrate( { value, ...attributes } ) {
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			...attributes,
-		};
+		} );
 	},
 };
 
@@ -291,7 +403,7 @@ const v4 = {
 			};
 		}
 
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -299,7 +411,7 @@ const v4 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -448,7 +560,7 @@ const v3 = {
 				};
 			}
 		}
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -456,7 +568,7 @@ const v3 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -566,7 +678,7 @@ const v2 = {
 			};
 		}
 
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -574,7 +686,7 @@ const v2 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -643,4 +755,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v5, v4, v3, v2, v1, v0 ];
+export default [ v6, v5, v4, v3, v2, v1, v0 ];

package/src/pullquote/edit.js

@@ -1,18 +1,8 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	AlignmentControl,
-	BlockControls,
-	RichText,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -20,31 +10,17 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import { Figure } from './figure';
 import { BlockQuote } from './blockquote';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-function PullQuoteEdit( {
-	attributes,
-	setAttributes,
-	isSelected,
-	insertBlocksAfter,
-} ) {
-	const { textAlign, citation, value } = attributes;
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+function PullQuoteEdit( props ) {
+	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
+	useDeprecatedTextAlign( props );
+	const { citation, value } = attributes;
+	const blockProps = useBlockProps();
 	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
 
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
 			<Figure { ...blockProps }>
 				<BlockQuote>
 					<RichText

package/src/pullquote/save.js

@@ -1,25 +1,14 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { textAlign, citation, value } = attributes;
+	const { citation, value } = attributes;
 	const shouldShowCitation = ! RichText.isEmpty( citation );
 
 	return (
-		<figure
-			{ ...useBlockProps.save( {
-				className: clsx( {
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				} ),
-			} ) }
-		>
+		<figure { ...useBlockProps.save() }>
 			<blockquote>
 				<RichText.Content tagName="p" value={ value } />
 				{ shouldShowCitation && (

package/src/search/index.php

@@ -192,7 +192,7 @@ function render_block_core_search( $attributes ) {
 	}
 
 	return sprintf(
-		'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
+		'<form role="search" method="get" action="%1$s" %2$s %3$s>%4$s</form>',
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
 		$form_directives,

package/src/style.scss

@@ -74,9 +74,8 @@
 @use "./social-links/style.scss" as *;
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
-@use "./tab/style.scss" as *;
+@use "./tab-list/style.scss" as *;
 @use "./tab-panel/style.scss" as *;
-@use "./tab-panels/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;

package/src/tab-list/README.md

@@ -15,42 +15,33 @@ Display the tab buttons for a tabbed interface.
 **[Parent](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#parent) blocks (direct):**
 - [`core/tabs`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tabs/)
 
-**[Allowed](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#allowed-blocks) inner blocks:**
-- [`core/tab`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab/)
-
 ## Attributes
 
 _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
 
-_This block has no custom attributes._
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `tabs` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `button` |
 
 ## Supports
 
 _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
 
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
 - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
 - [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false`
-- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
-  - `aspectRatio`: `false`
-  - `height`: `false`
-  - `minHeight`: `false`
-  - `width`: `false`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
-  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"}`
-  - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
-  - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true`
-  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
-  - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true`
+  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
+  - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false`
+  - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false`
+  - [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `padding`: `true`
-  - `margin`: `true`
   - `blockGap`: `true`
 
 ## Context
@@ -61,12 +52,23 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 
 - `core/tabs-list`
 
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **border**: `.wp-block-tab-list button`
+- **color**:
+  - background: `.wp-block-tab-list button`
+  - text: `.wp-block-tab-list button`
+- **spacing**:
+  - padding: `.wp-block-tab-list button`
+
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
 
 ```html
-<!-- wp:tab-list -->
+<!-- wp:tab-list {"tabs":[]} -->
 <!-- Content... -->
 <!-- /wp:tab-list -->
 ```

package/src/tab-list/block.json

@@ -8,23 +8,29 @@
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
-	"attributes": {},
+	"attributes": {
+		"tabs": {
+			"type": "array",
+			"source": "query",
+			"selector": "button",
+			"query": {
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			},
+			"default": []
+		}
+	},
 	"supports": {
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -38,30 +44,37 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalSkipSerialization": true
 		},
 		"layout": {
 			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"orientation": "horizontal"
+				"type": "flex"
 			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowWrap": false
 		},
 		"spacing": {
 			"padding": true,
-			"margin": true,
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "padding" ],
 			"__experimentalDefaultControls": {
 				"padding": true,
-				"margin": true,
 				"blockGap": true
 			}
 		}
 	},
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css"
+	"selectors": {
+		"border": ".wp-block-tab-list button",
+		"color": {
+			"background": ".wp-block-tab-list button",
+			"text": ".wp-block-tab-list button"
+		},
+		"spacing": {
+			"padding": ".wp-block-tab-list button"
+		}
+	},
+	"editorStyle": "wp-block-tab-list-editor",
+	"style": "wp-block-tab-list"
 }

package/src/tab-list/edit.js

@@ -1,12 +1,22 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,30 +24,152 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
-const TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];
+const EMPTY_ARRAY = [];
+
+function Edit( { attributes, clientId, context } ) {
+	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
+
+	const colorProps = useColorProps( attributes );
+	const borderProps = useBorderProps( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
 
-function Edit( { clientId } ) {
-	const tabsClientId = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockRootClientId( clientId ),
+	const { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getBlockAttributes } =
+				select( blockEditorStore );
+
+			const _tabsClientId = getBlockRootClientId( clientId );
+			const tabsAttributes = _tabsClientId
+				? getBlockAttributes( _tabsClientId )
+				: {};
+
+			return {
+				tabsClientId: _tabsClientId,
+				editorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,
+				activeTabIndex: tabsAttributes?.activeTabIndex ?? 0,
+			};
+		},
 		[ clientId ]
 	);
 
-	const blockProps = useBlockProps();
+	const effectiveActiveIndex = useMemo( () => {
+		return editorActiveTabIndex ?? activeTabIndex;
+	}, [ editorActiveTabIndex, activeTabIndex ] );
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+
+	const handleTabClick = useCallback(
+		( tabIndex ) => {
+			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabIndex,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/tab' ],
-		orientation: 'horizontal',
-		template: TAB_LIST_TEMPLATE,
-		templateLock: false,
-		renderAppender: false,
+	const handleLabelChange = useCallback(
+		( tabIndex, newLabel ) => {
+			const tab = tabsList[ tabIndex ];
+			if ( tab?.clientId ) {
+				updateBlockAttributes( tab.clientId, { label: newLabel } );
+			}
+		},
+		[ tabsList, updateBlockAttributes ]
+	);
+
+	const menuRef = useRef();
+	const prevTabCountRef = useRef( tabsList.length );
+
+	// When tabs are added or removed, focus the appropriate button.
+	useEffect( () => {
+		const prevCount = prevTabCountRef.current;
+		prevTabCountRef.current = tabsList.length;
+
+		if ( ! menuRef.current || tabsList.length === prevCount ) {
+			return;
+		}
+
+		const focusButtonAt = ( index ) => {
+			window.requestAnimationFrame( () => {
+				const buttons = menuRef.current?.querySelectorAll( 'button' );
+				const target = buttons?.[ index ];
+				if ( ! target ) {
+					return;
+				}
+				const richText = target.querySelector( '[contenteditable]' );
+				if ( richText ) {
+					richText.focus();
+				} else {
+					target.focus();
+				}
+			} );
+		};
+
+		if ( tabsList.length > prevCount ) {
+			// Tab added — focus the last (newly added) button.
+			focusButtonAt( tabsList.length - 1 );
+		} else {
+			// Tab removed — focus the new active button.
+			focusButtonAt( effectiveActiveIndex );
+		}
+	}, [ tabsList.length, effectiveActiveIndex ] );
+
+	const blockProps = useBlockProps( {
+		role: 'tablist',
+		ref: menuRef,
 	} );
 
+	const buttonClassName = clsx( colorProps.className, borderProps.className );
+
+	const buttonStyle = {
+		...colorProps.style,
+		...borderProps.style,
+		...spacingProps.style,
+	};
+
 	return (
 		<>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<div { ...innerBlocksProps } />
+			<div { ...blockProps }>
+				{ tabsList.map( ( tab, index ) => {
+					const isActive = index === effectiveActiveIndex;
+					return (
+						<button
+							key={ tab.clientId || index }
+							type="button"
+							className={ clsx( buttonClassName, {
+								'is-active': isActive,
+							} ) }
+							style={ buttonStyle }
+							tabIndex={ -1 }
+							onClick={ ( event ) => {
+								event.preventDefault();
+								handleTabClick( index );
+							} }
+						>
+							<RichText
+								tagName="span"
+								withoutInteractiveFormatting
+								placeholder={ __( 'Tab title' ) }
+								value={ tab.label }
+								onChange={ ( newLabel ) =>
+									handleLabelChange( index, newLabel )
+								}
+							/>
+						</button>
+					);
+				} ) }
+			</div>
 		</>
 	);
 }

package/src/tab-list/editor.scss

@@ -1,10 +1,17 @@
 .wp-block-tab-list {
-	// Allow the inner block list to be displayed in the flex layout, so the tab buttons appear as direct flex children in the editor.
-	> .block-editor-block-list__layout {
-		display: contents;
-	}
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 0.5em;
 
-	.block-editor-block-list__block:has(> .wp-block-tab) {
-		display: contents;
+	button {
+		&.is-active::before {
+			content: "";
+			position: absolute;
+			border-bottom: 2px solid currentColor;
+			pointer-events: none;
+			left: 0;
+			width: 100%;
+			bottom: 0;
+		}
 	}
 }