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

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

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	withColors,
 	store as blockEditorStore,
 	RichText,
 } from '@wordpress/block-editor';
@@ -22,19 +21,9 @@ import { useCallback, useMemo } from '@wordpress/element';
 import slugFromLabel from '../tab/slug-from-label';
 import Controls from './controls';
 
-function Edit( {
-	attributes,
-	setAttributes,
+export default function Edit( {
 	context,
 	clientId,
-	activeBackgroundColor,
-	setActiveBackgroundColor,
-	activeTextColor,
-	setActiveTextColor,
-	hoverBackgroundColor,
-	setHoverBackgroundColor,
-	hoverTextColor,
-	setHoverTextColor,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	// Context from tabs-menu (per-item context via BlockContextProvider)
@@ -138,47 +127,6 @@ 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`;
 
@@ -188,7 +136,6 @@ function Edit( {
 			'is-active': isActiveTab,
 			'is-selected': isSelectedTab,
 		} ),
-		style: customColorStyles,
 		'aria-controls': tabPanelId,
 		'aria-selected': isActiveTab,
 		id: tabLabelId,
@@ -200,24 +147,11 @@ function Edit( {
 	return (
 		<>
 			<Controls
-				{ ...{
-					attributes,
-					setAttributes,
-					clientId,
-					tabsClientId,
-					tabClientId,
-					tabIndex,
-					tabsCount: tabsList.length,
-					tabsMenuClientId,
-					activeBackgroundColor,
-					setActiveBackgroundColor,
-					activeTextColor,
-					setActiveTextColor,
-					hoverBackgroundColor,
-					setHoverBackgroundColor,
-					hoverTextColor,
-					setHoverTextColor,
-				} }
+				tabsClientId={ tabsClientId }
+				tabClientId={ tabClientId }
+				tabIndex={ tabIndex }
+				tabsCount={ tabsList.length }
+				tabsMenuClientId={ tabsMenuClientId }
 			/>
 			<div { ...blockProps }>
 				<RichText
@@ -235,10 +169,3 @@ function Edit( {
 		</>
 	);
 }
-
-export default withColors(
-	'activeBackgroundColor',
-	'activeTextColor',
-	'hoverBackgroundColor',
-	'hoverTextColor'
-)( Edit );

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

@@ -1,6 +1,5 @@
 .wp-block-tabs-menu-item {
 	&.is-selected {
-		outline: 2px solid var(--wp-admin-theme-color, #007cba);
 		outline-offset: 2px;
 	}
 }
@@ -12,9 +11,4 @@
 	.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,34 +3,9 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-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.
+export default function save() {
 	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,8 +15,7 @@
 	-webkit-appearance: none;
 
 	margin: 0;
-	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));
+	padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
 
 	// Inherit typography from parent
 	font-size: inherit;
@@ -27,23 +26,13 @@
 	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: var(--custom-tab-active-color, #000) !important;
-		color: var(--custom-tab-active-text-color, #fff) !important;
+		background-color: #000;
+		color: #fff;
 	}
 }