@wordpress/block-library 9.40.1 → 9.40.2-next.v.202602241322.0

package/src/query-title/deprecated.js

@@ -2,6 +2,79 @@
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 1,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			padding: true,
+			margin: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	save: () => null,
+};
 
 const v1 = {
 	attributes: {
@@ -48,4 +121,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/query-title/edit.js

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
@@ -27,21 +21,19 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { useArchiveLabel } from './use-archive-label';
 import { usePostTypeLabel } from './use-post-type-label';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 const SUPPORTED_TYPES = [ 'archive', 'search', 'post-type' ];
 
-export default function QueryTitleEdit( {
-	attributes: {
-		type,
-		level,
-		levelOptions,
-		textAlign,
-		showPrefix,
-		showSearchTerm,
-	},
-	setAttributes,
-	context: { query },
-} ) {
+export default function QueryTitleEdit( props ) {
+	useDeprecatedTextAlign( props );
+
+	const {
+		attributes: { type, level, levelOptions, showPrefix, showSearchTerm },
+		setAttributes,
+		context: { query },
+	} = props;
+
 	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
 	const { postTypeLabel } = usePostTypeLabel( query?.postType );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -49,9 +41,7 @@ export default function QueryTitleEdit( {
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 
 	const blockProps = useBlockProps( {
-		className: clsx( 'wp-block-query-title__placeholder', {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
+		className: 'wp-block-query-title__placeholder',
 	} );
 
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
@@ -239,12 +229,6 @@ export default function QueryTitleEdit( {
 						setAttributes( { level: newLevel } )
 					}
 				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
 			</BlockControls>
 			{ titleElement }
 		</>

package/src/site-tagline/block.json

@@ -8,9 +8,6 @@
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"level": {
 			"type": "number",
 			"default": 0
@@ -23,7 +20,11 @@
 	"example": {
 		"viewportWidth": 350,
 		"attributes": {
-			"textAlign": "center"
+			"style": {
+				"typography": {
+					"textAlign": "center"
+				}
+			}
 		}
 	},
 	"supports": {
@@ -49,6 +50,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,

package/src/site-tagline/deprecated.js

@@ -2,6 +2,75 @@
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+		},
+		levelOptions: {
+			type: 'array',
+			default: [ 0, 1, 2, 3, 4, 5, 6 ],
+		},
+	},
+	supports: {
+		anchor: true,
+		reusable: false,
+		html: false,
+		color: {
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	save: () => null,
+};
 
 const v1 = {
 	attributes: {
@@ -46,4 +115,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/site-tagline/edit.js

@@ -1,15 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
-	AlignmentControl,
 	useBlockProps,
 	BlockControls,
 	HeadingLevelDropdown,
@@ -17,13 +11,13 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
+
+export default function SiteTaglineEdit( props ) {
+	useDeprecatedTextAlign( props );
 
-export default function SiteTaglineEdit( {
-	attributes,
-	setAttributes,
-	insertBlocksAfter,
-} ) {
-	const { textAlign, level, levelOptions } = attributes;
+	const { attributes, setAttributes, insertBlocksAfter } = props;
+	const { level, levelOptions } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -52,11 +46,10 @@ export default function SiteTaglineEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
-		} ),
+		className:
+			! canUserEdit && ! tagline && 'wp-block-site-tagline__placeholder',
 	} );
+
 	const siteTaglineContent = canUserEdit ? (
 		<RichText
 			allowedFormats={ [] }
@@ -86,12 +79,6 @@ export default function SiteTaglineEdit( {
 						setAttributes( { level: newLevel } )
 					}
 				/>
-				<AlignmentControl
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-					value={ textAlign }
-				/>
 			</BlockControls>
 			{ siteTaglineContent }
 		</>

package/src/site-title/block.json

@@ -15,9 +15,6 @@
 			"type": "array",
 			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
 		},
-		"textAlign": {
-			"type": "string"
-		},
 		"isLink": {
 			"type": "boolean",
 			"default": true,
@@ -56,6 +53,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,

package/src/site-title/deprecated.js

@@ -2,6 +2,88 @@
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 1,
+		},
+		levelOptions: {
+			type: 'array',
+			default: [ 0, 1, 2, 3, 4, 5, 6 ],
+		},
+		isLink: {
+			type: 'boolean',
+			default: true,
+			role: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			default: '_self',
+			role: 'content',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			padding: true,
+			margin: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	save: () => null,
+};
 
 const v1 = {
 	attributes: {
@@ -59,4 +141,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/site-title/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -11,7 +6,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
-	AlignmentControl,
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
@@ -30,13 +24,14 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-export default function SiteTitleEdit( {
-	attributes,
-	setAttributes,
-	insertBlocksAfter,
-} ) {
-	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
+export default function SiteTitleEdit( props ) {
+	useDeprecatedTextAlign( props );
+
+	const { attributes, setAttributes, insertBlocksAfter } = props;
+
+	const { level, levelOptions, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -64,10 +59,8 @@ export default function SiteTitleEdit( {
 
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
-		} ),
+		className:
+			! canUserEdit && ! title && 'wp-block-site-title__placeholder',
 	} );
 	const siteTitleContent = canUserEdit ? (
 		<TagName { ...blockProps }>
@@ -114,12 +107,6 @@ export default function SiteTitleEdit( {
 							setAttributes( { level: newLevel } )
 						}
 					/>
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
 				</BlockControls>
 			) }
 			<InspectorControls>

package/src/tabs-menu-item/block.json

@@ -18,32 +18,7 @@
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex"
 	],
-	"attributes": {
-		"activeBackgroundColor": {
-			"type": "string"
-		},
-		"customActiveBackgroundColor": {
-			"type": "string"
-		},
-		"activeTextColor": {
-			"type": "string"
-		},
-		"customActiveTextColor": {
-			"type": "string"
-		},
-		"hoverBackgroundColor": {
-			"type": "string"
-		},
-		"customHoverBackgroundColor": {
-			"type": "string"
-		},
-		"hoverTextColor": {
-			"type": "string"
-		},
-		"customHoverTextColor": {
-			"type": "string"
-		}
-	},
+	"attributes": {},
 	"supports": {
 		"html": false,
 		"reusable": false,

package/src/tabs-menu-item/controls.js

@@ -9,10 +9,7 @@ import clsx from 'clsx';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	BlockControls,
-	InspectorControls,
 	store as blockEditorStore,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
 import {
@@ -163,32 +160,12 @@ function TabBlockMover( {
 }
 
 export default function Controls( {
-	attributes,
-	setAttributes,
-	clientId,
 	tabsClientId,
 	tabClientId,
 	tabIndex,
 	tabsCount,
 	tabsMenuClientId,
-	activeBackgroundColor,
-	setActiveBackgroundColor,
-	activeTextColor,
-	setActiveTextColor,
-	hoverBackgroundColor,
-	setHoverBackgroundColor,
-	hoverTextColor,
-	setHoverTextColor,
 } ) {
-	const {
-		customActiveBackgroundColor,
-		customActiveTextColor,
-		customHoverBackgroundColor,
-		customHoverTextColor,
-	} = attributes;
-
-	const colorSettings = useMultipleOriginColorsAndGradients();
-
 	return (
 		<>
 			<TabBlockMover
@@ -200,91 +177,6 @@ export default function Controls( {
 			/>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					settings={ [
-						{
-							label: __( 'Active background' ),
-							colorValue:
-								activeBackgroundColor?.color ??
-								customActiveBackgroundColor,
-							onColorChange: ( value ) => {
-								setActiveBackgroundColor( value );
-								setAttributes( {
-									customActiveBackgroundColor: value,
-								} );
-							},
-							resetAllFilter: () => {
-								setActiveBackgroundColor( undefined );
-								setAttributes( {
-									customActiveBackgroundColor: undefined,
-								} );
-							},
-							clearable: true,
-						},
-						{
-							label: __( 'Active text' ),
-							colorValue:
-								activeTextColor?.color ?? customActiveTextColor,
-							onColorChange: ( value ) => {
-								setActiveTextColor( value );
-								setAttributes( {
-									customActiveTextColor: value,
-								} );
-							},
-							resetAllFilter: () => {
-								setActiveTextColor( undefined );
-								setAttributes( {
-									customActiveTextColor: undefined,
-								} );
-							},
-							clearable: true,
-						},
-						{
-							label: __( 'Hover background' ),
-							colorValue:
-								hoverBackgroundColor?.color ??
-								customHoverBackgroundColor,
-							onColorChange: ( value ) => {
-								setHoverBackgroundColor( value );
-								setAttributes( {
-									customHoverBackgroundColor: value,
-								} );
-							},
-							resetAllFilter: () => {
-								setHoverBackgroundColor( undefined );
-								setAttributes( {
-									customHoverBackgroundColor: undefined,
-								} );
-							},
-							clearable: true,
-						},
-						{
-							label: __( 'Hover text' ),
-							colorValue:
-								hoverTextColor?.color ?? customHoverTextColor,
-							onColorChange: ( value ) => {
-								setHoverTextColor( value );
-								setAttributes( {
-									customHoverTextColor: value,
-								} );
-							},
-							resetAllFilter: () => {
-								setHoverTextColor( undefined );
-								setAttributes( {
-									customHoverTextColor: undefined,
-								} );
-							},
-							clearable: true,
-						},
-					] }
-					panelId={ clientId }
-					disableCustomColors={ false }
-					__experimentalIsRenderedInSidebar
-					__next40pxDefaultSize
-					{ ...colorSettings }
-				/>
-			</InspectorControls>
 		</>
 	);
 }