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

package/src/site-title/deprecated.js

@@ -2,88 +2,6 @@
  * 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: {
@@ -141,4 +59,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1 ];
+export default [ v1 ];

package/src/site-title/edit.js

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

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

@@ -18,7 +18,32 @@
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex"
 	],
-	"attributes": {},
+	"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"
+		}
+	},
 	"supports": {
 		"html": false,
 		"reusable": false,

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

@@ -9,7 +9,10 @@ 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 {
@@ -160,12 +163,32 @@ 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
@@ -177,6 +200,91 @@ 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>
 		</>
 	);
 }

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

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useBlockProps,
+	withColors,
 	store as blockEditorStore,
 	RichText,
 } from '@wordpress/block-editor';
@@ -21,9 +22,19 @@ import { useCallback, useMemo } from '@wordpress/element';
 import slugFromLabel from '../tab/slug-from-label';
 import Controls from './controls';
 
-export default function Edit( {
+function Edit( {
+	attributes,
+	setAttributes,
 	context,
 	clientId,
+	activeBackgroundColor,
+	setActiveBackgroundColor,
+	activeTextColor,
+	setActiveTextColor,
+	hoverBackgroundColor,
+	setHoverBackgroundColor,
+	hoverTextColor,
+	setHoverTextColor,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	// Context from tabs-menu (per-item context via BlockContextProvider)
@@ -127,6 +138,47 @@ export default function Edit( {
 		]
 	);
 
+	// Build CSS custom properties for active/hover color states
+	const customColorStyles = useMemo( () => {
+		const styles = {};
+
+		// Active/hover colors from custom attributes
+		const activeBg =
+			activeBackgroundColor?.color ||
+			attributes.customActiveBackgroundColor;
+		const activeText =
+			activeTextColor?.color || attributes.customActiveTextColor;
+		const hoverBg =
+			hoverBackgroundColor?.color ||
+			attributes.customHoverBackgroundColor;
+		const hoverText =
+			hoverTextColor?.color || attributes.customHoverTextColor;
+
+		if ( activeBg ) {
+			styles[ '--custom-tab-active-color' ] = activeBg;
+		}
+		if ( activeText ) {
+			styles[ '--custom-tab-active-text-color' ] = activeText;
+		}
+		if ( hoverBg ) {
+			styles[ '--custom-tab-hover-color' ] = hoverBg;
+		}
+		if ( hoverText ) {
+			styles[ '--custom-tab-hover-text-color' ] = hoverText;
+		}
+
+		return styles;
+	}, [
+		activeBackgroundColor?.color,
+		attributes.customActiveBackgroundColor,
+		activeTextColor?.color,
+		attributes.customActiveTextColor,
+		hoverBackgroundColor?.color,
+		attributes.customHoverBackgroundColor,
+		hoverTextColor?.color,
+		attributes.customHoverTextColor,
+	] );
+
 	const tabPanelId = tabId || `tab-${ tabIndex }`;
 	const tabLabelId = `${ tabPanelId }--tab`;
 
@@ -136,6 +188,7 @@ export default function Edit( {
 			'is-active': isActiveTab,
 			'is-selected': isSelectedTab,
 		} ),
+		style: customColorStyles,
 		'aria-controls': tabPanelId,
 		'aria-selected': isActiveTab,
 		id: tabLabelId,
@@ -147,11 +200,24 @@ export default function Edit( {
 	return (
 		<>
 			<Controls
-				tabsClientId={ tabsClientId }
-				tabClientId={ tabClientId }
-				tabIndex={ tabIndex }
-				tabsCount={ tabsList.length }
-				tabsMenuClientId={ tabsMenuClientId }
+				{ ...{
+					attributes,
+					setAttributes,
+					clientId,
+					tabsClientId,
+					tabClientId,
+					tabIndex,
+					tabsCount: tabsList.length,
+					tabsMenuClientId,
+					activeBackgroundColor,
+					setActiveBackgroundColor,
+					activeTextColor,
+					setActiveTextColor,
+					hoverBackgroundColor,
+					setHoverBackgroundColor,
+					hoverTextColor,
+					setHoverTextColor,
+				} }
 			/>
 			<div { ...blockProps }>
 				<RichText
@@ -169,3 +235,10 @@ export default function Edit( {
 		</>
 	);
 }
+
+export default withColors(
+	'activeBackgroundColor',
+	'activeTextColor',
+	'hoverBackgroundColor',
+	'hoverTextColor'
+)( Edit );

package/src/tabs-menu-item/editor.scss

@@ -1,5 +1,6 @@
 .wp-block-tabs-menu-item {
 	&.is-selected {
+		outline: 2px solid var(--wp-admin-theme-color, #007cba);
 		outline-offset: 2px;
 	}
 }
@@ -11,4 +12,9 @@
 	.wp-block-tabs-menu-item {
 		flex-basis: 100% !important;
 	}
+
+	&:hover > .wp-block-tabs-menu-item {
+		background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+		color: var(--custom-tab-hover-text-color, #000) !important;
+	}
 }

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

@@ -3,9 +3,34 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	// Build CSS custom properties for active/hover colors
+	const customColorStyles = {};
+
+	// Active/hover colors from custom attributes
+	if ( attributes.customActiveBackgroundColor ) {
+		customColorStyles[ '--custom-tab-active-color' ] =
+			attributes.customActiveBackgroundColor;
+	}
+	if ( attributes.customActiveTextColor ) {
+		customColorStyles[ '--custom-tab-active-text-color' ] =
+			attributes.customActiveTextColor;
+	}
+	if ( attributes.customHoverBackgroundColor ) {
+		customColorStyles[ '--custom-tab-hover-color' ] =
+			attributes.customHoverBackgroundColor;
+	}
+	if ( attributes.customHoverTextColor ) {
+		customColorStyles[ '--custom-tab-hover-text-color' ] =
+			attributes.customHoverTextColor;
+	}
+
+	// useBlockProps.save includes all core style engine classes and styles
+	// The button content is replaced by PHP during rendering, so we output
+	// an empty button as a template.
 	const blockProps = useBlockProps.save( {
 		className: 'wp-block-tabs-menu-item__template',
+		style: customColorStyles,
 		type: 'button',
 		role: 'tab',
 	} );

package/src/tabs-menu-item/style.scss

@@ -15,7 +15,8 @@
 	-webkit-appearance: none;
 
 	margin: 0;
-	padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
+	padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+	padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
 
 	// Inherit typography from parent
 	font-size: inherit;
@@ -26,13 +27,23 @@
 	text-transform: inherit;
 	text-align: inherit;
 
+	&:focus {
+		outline: none;
+	}
+
 	&:focus-visible {
+		outline: 2px solid var(--tab-border-color-active, #000);
 		outline-offset: 2px;
 	}
 
+	&:hover {
+		background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+		color: var(--custom-tab-hover-text-color, #000) !important;
+	}
+
 	&[aria-selected="true"],
 	&.is-active {
-		background-color: #000;
-		color: #fff;
+		background-color: var(--custom-tab-active-color, #000) !important;
+		color: var(--custom-tab-active-text-color, #fff) !important;
 	}
 }

package/build/post-navigation-link/deprecated.cjs

@@ -1,100 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-library/src/post-navigation-link/deprecated.js
-var deprecated_exports = {};
-__export(deprecated_exports, {
-  default: () => deprecated_default
-});
-module.exports = __toCommonJS(deprecated_exports);
-var import_migrate_text_align = __toESM(require("../utils/migrate-text-align.cjs"));
-var v1 = {
-  attributes: {
-    textAlign: {
-      type: "string"
-    },
-    type: {
-      type: "string",
-      default: "next"
-    },
-    label: {
-      type: "string",
-      role: "content"
-    },
-    showTitle: {
-      type: "boolean",
-      default: false
-    },
-    linkLabel: {
-      type: "boolean",
-      default: false
-    },
-    arrow: {
-      type: "string",
-      default: "none"
-    },
-    taxonomy: {
-      type: "string",
-      default: ""
-    }
-  },
-  supports: {
-    anchor: true,
-    reusable: false,
-    html: false,
-    color: {
-      link: true
-    },
-    typography: {
-      fontSize: true,
-      lineHeight: true,
-      __experimentalFontFamily: true,
-      __experimentalFontWeight: true,
-      __experimentalFontStyle: true,
-      __experimentalTextTransform: true,
-      __experimentalTextDecoration: true,
-      __experimentalLetterSpacing: true,
-      __experimentalDefaultControls: {
-        fontSize: true
-      }
-    },
-    interactivity: {
-      clientNavigation: true
-    }
-  },
-  migrate: import_migrate_text_align.default,
-  isEligible(attributes) {
-    return !!attributes.textAlign || !!attributes.className?.match(
-      /\bhas-text-align-(left|center|right)\b/
-    );
-  },
-  save: () => null
-};
-var deprecated_default = [v1];
-//# sourceMappingURL=deprecated.cjs.map

package/build/post-navigation-link/deprecated.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/post-navigation-link/deprecated.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport migrateTextAlign from '../utils/migrate-text-align';\n\nconst v1 = {\n\tattributes: {\n\t\ttextAlign: {\n\t\t\ttype: 'string',\n\t\t},\n\t\ttype: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'next',\n\t\t},\n\t\tlabel: {\n\t\t\ttype: 'string',\n\t\t\trole: 'content',\n\t\t},\n\t\tshowTitle: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\tlinkLabel: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\tarrow: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'none',\n\t\t},\n\t\ttaxonomy: {\n\t\t\ttype: 'string',\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsupports: {\n\t\tanchor: true,\n\t\treusable: false,\n\t\thtml: false,\n\t\tcolor: {\n\t\t\tlink: true,\n\t\t},\n\t\ttypography: {\n\t\t\tfontSize: true,\n\t\t\tlineHeight: true,\n\t\t\t__experimentalFontFamily: true,\n\t\t\t__experimentalFontWeight: true,\n\t\t\t__experimentalFontStyle: true,\n\t\t\t__experimentalTextTransform: true,\n\t\t\t__experimentalTextDecoration: true,\n\t\t\t__experimentalLetterSpacing: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tfontSize: true,\n\t\t\t},\n\t\t},\n\t\tinteractivity: {\n\t\t\tclientNavigation: true,\n\t\t},\n\t},\n\tmigrate: migrateTextAlign,\n\tisEligible( attributes ) {\n\t\treturn (\n\t\t\t!! attributes.textAlign ||\n\t\t\t!! attributes.className?.match(\n\t\t\t\t/\\bhas-text-align-(left|center|right)\\b/\n\t\t\t)\n\t\t);\n\t},\n\tsave: () => null,\n};\n\nexport default [ v1 ];\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gCAA6B;AAE7B,IAAM,KAAK;AAAA,EACV,YAAY;AAAA,IACX,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACP;AAAA,IACA,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,IACA,YAAY;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,0BAA0B;AAAA,MAC1B,0BAA0B;AAAA,MAC1B,yBAAyB;AAAA,MACzB,6BAA6B;AAAA,MAC7B,8BAA8B;AAAA,MAC9B,6BAA6B;AAAA,MAC7B,+BAA+B;AAAA,QAC9B,UAAU;AAAA,MACX;AAAA,IACD;AAAA,IACA,eAAe;AAAA,MACd,kBAAkB;AAAA,IACnB;AAAA,EACD;AAAA,EACA,SAAS,0BAAAA;AAAA,EACT,WAAY,YAAa;AACxB,WACC,CAAC,CAAE,WAAW,aACd,CAAC,CAAE,WAAW,WAAW;AAAA,MACxB;AAAA,IACD;AAAA,EAEF;AAAA,EACA,MAAM,MAAM;AACb;AAEA,IAAO,qBAAQ,CAAE,EAAG;",
-  "names": ["migrateTextAlign"]
-}