@wordpress/block-library 9.38.1-next.v.0 → 9.39.0

package/build-module/tabs/style-engine.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/tabs/style-engine.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGetGapCSSValue as getGapCSSValue,\n\tuseStyleOverride,\n} from '@wordpress/block-editor';\n\n/**\n * Gets the gap styles for the tab block.\n * @param {Object} props\n * @param {Object} props.attributes Block attributes\n * @return {Object} CSS custom properties for gap styles\n */\nfunction getGapStyles( { attributes } ) {\n\tconst { style, orientation } = attributes || {};\n\tconst { spacing } = style || {};\n\tconst { blockGap } = spacing || {};\n\t//--wp--style--tabs-list-gap-default should be used by themes that want to set a default\n\t// gap on the tabs list.\n\tconst fallbackValue = `var( --wp--style--tabs-gap-default, var( --wp--style--block-gap, 0.5em ) )`;\n\tlet listGapValue = fallbackValue;\n\tlet gapValue = fallbackValue;\n\n\t// Check for a value.\n\tif ( !! blockGap ) {\n\t\tlistGapValue =\n\t\t\ttypeof blockGap === 'string'\n\t\t\t\t? getGapCSSValue( blockGap )\n\t\t\t\t: getGapCSSValue( blockGap?.left ) || fallbackValue;\n\t\tgapValue =\n\t\t\ttypeof blockGap === 'string'\n\t\t\t\t? getGapCSSValue( blockGap )\n\t\t\t\t: getGapCSSValue( blockGap?.top ) || fallbackValue;\n\t}\n\n\tif ( orientation === 'vertical' ) {\n\t\tconst _listGapValue = listGapValue;\n\t\tconst _gapValue = gapValue;\n\t\tlistGapValue = _gapValue;\n\t\tgapValue = _listGapValue;\n\t}\n\n\t// The unstable tabs list gap calculation requires a real value (such as `0px`) and not `0`.\n\tconst gapMap = {\n\t\t'--wp--style--unstable-tabs-list-gap':\n\t\t\tlistGapValue === '0' ? '0px' : listGapValue,\n\t\t'--wp--style--unstable-tabs-gap': gapValue,\n\t};\n\n\treturn gapMap;\n}\n\n/**\n * Gets the color styles for the tab block.\n *\n * @param {Object} props\n * @param {Object} props.attributes Block attributes\n * @return {Object} CSS custom properties for color styles\n */\nfunction getColorStyles( { attributes } ) {\n\tconst {\n\t\tcustomTabInactiveColor,\n\t\tcustomTabHoverColor,\n\t\tcustomTabActiveColor,\n\t\tcustomTabTextColor,\n\t\tcustomTabActiveTextColor,\n\t\tcustomTabHoverTextColor,\n\t} = attributes || {};\n\n\t// Helper to normalize color objects (preset { slug } vs direct value).\n\tfunction getColorValue( color ) {\n\t\tif ( ! color ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( typeof color === 'object' && color.slug ) {\n\t\t\treturn `var(--wp--preset--color--${ color.slug })`;\n\t\t}\n\t\treturn color;\n\t}\n\n\tconst colorVarMap = {\n\t\t'--custom-tab-inactive-color': getColorValue( customTabInactiveColor ),\n\t\t'--custom-tab-active-color': getColorValue( customTabActiveColor ),\n\t\t'--custom-tab-hover-color': getColorValue( customTabHoverColor ),\n\t\t'--custom-tab-text-color': getColorValue( customTabTextColor ),\n\t\t'--custom-tab-active-text-color': getColorValue(\n\t\t\tcustomTabActiveTextColor\n\t\t),\n\t\t'--custom-tab-hover-text-color': getColorValue(\n\t\t\tcustomTabHoverTextColor\n\t\t),\n\t};\n\n\treturn colorVarMap;\n}\n\n/**\n * Gets the border styles for the tab block.\n *\n * @param {Object} props\n * @param {Object} props.attributes Block attributes\n * @return {Object} CSS custom properties for border styles\n */\nfunction getBorderStyles( { attributes } ) {\n\tconst { radius } = attributes?.style?.border || {};\n\n\tif ( ! radius ) {\n\t\treturn {};\n\t}\n\n\tlet radiusValue = radius;\n\n\tif ( typeof radius === 'object' ) {\n\t\tconst {\n\t\t\ttopLeft = '0',\n\t\t\ttopRight = '0',\n\t\t\tbottomRight = '0',\n\t\t\tbottomLeft = '0',\n\t\t} = radius;\n\t\tradiusValue = `${ topLeft } ${ topRight } ${ bottomRight } ${ bottomLeft }`;\n\t}\n\n\tconst borderMap = {\n\t\t'--tab-border-radius': radiusValue,\n\t};\n\n\treturn borderMap;\n}\n\n/**\n * Injects color CSS custom properties for the tabs block, mirroring the pattern\n * used by gap-styles (scoped to `#block-{ clientId }`). This replaces the prior\n * inline-style object return value approach so that these values participate in\n * style engine cascade like other dynamic style overrides.\n *\n * @param {Object} props\n * @param {Object} props.attributes Block attributes\n * @param {string} props.clientId   Block client ID\n * @return {null} No UI output\n */\nexport default function StyleEngine( { attributes, clientId } ) {\n\tconst gapVarMap = getGapStyles( { attributes } );\n\tconst colorVarMap = getColorStyles( { attributes } );\n\tconst borderVarMap = getBorderStyles( { attributes } );\n\n\tconst styleVarMap = {\n\t\t...gapVarMap,\n\t\t...colorVarMap,\n\t\t...borderVarMap,\n\t};\n\n\t// Build scoped CSS only for defined values to avoid unnecessary empty declarations.\n\tconst declarations = Object.entries( styleVarMap )\n\t\t.filter( ( [ , value ] ) => !! value )\n\t\t.map( ( [ name, value ] ) => `\\t${ name }: ${ value };` )\n\t\t.join( '\\n' );\n\n\tuseStyleOverride( {\n\t\tcss: clientId ? `#block-${ clientId } {\\n${ declarations }\\n}` : '',\n\t} );\n\n\treturn null;\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,gCAAgC;AAAA,EAChC;AAAA,OACM;AAQP,SAAS,aAAc,EAAE,WAAW,GAAI;AACvC,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc,CAAC;AAC9C,QAAM,EAAE,QAAQ,IAAI,SAAS,CAAC;AAC9B,QAAM,EAAE,SAAS,IAAI,WAAW,CAAC;AAGjC,QAAM,gBAAgB;AACtB,MAAI,eAAe;AACnB,MAAI,WAAW;AAGf,MAAK,CAAC,CAAE,UAAW;AAClB,mBACC,OAAO,aAAa,WACjB,eAAgB,QAAS,IACzB,eAAgB,UAAU,IAAK,KAAK;AACxC,eACC,OAAO,aAAa,WACjB,eAAgB,QAAS,IACzB,eAAgB,UAAU,GAAI,KAAK;AAAA,EACxC;AAEA,MAAK,gBAAgB,YAAa;AACjC,UAAM,gBAAgB;AACtB,UAAM,YAAY;AAClB,mBAAe;AACf,eAAW;AAAA,EACZ;AAGA,QAAM,SAAS;AAAA,IACd,uCACC,iBAAiB,MAAM,QAAQ;AAAA,IAChC,kCAAkC;AAAA,EACnC;AAEA,SAAO;AACR;AASA,SAAS,eAAgB,EAAE,WAAW,GAAI;AACzC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,cAAc,CAAC;AAGnB,WAAS,cAAe,OAAQ;AAC/B,QAAK,CAAE,OAAQ;AACd,aAAO;AAAA,IACR;AACA,QAAK,OAAO,UAAU,YAAY,MAAM,MAAO;AAC9C,aAAO,4BAA6B,MAAM,IAAK;AAAA,IAChD;AACA,WAAO;AAAA,EACR;AAEA,QAAM,cAAc;AAAA,IACnB,+BAA+B,cAAe,sBAAuB;AAAA,IACrE,6BAA6B,cAAe,oBAAqB;AAAA,IACjE,4BAA4B,cAAe,mBAAoB;AAAA,IAC/D,2BAA2B,cAAe,kBAAmB;AAAA,IAC7D,kCAAkC;AAAA,MACjC;AAAA,IACD;AAAA,IACA,iCAAiC;AAAA,MAChC;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AASA,SAAS,gBAAiB,EAAE,WAAW,GAAI;AAC1C,QAAM,EAAE,OAAO,IAAI,YAAY,OAAO,UAAU,CAAC;AAEjD,MAAK,CAAE,QAAS;AACf,WAAO,CAAC;AAAA,EACT;AAEA,MAAI,cAAc;AAElB,MAAK,OAAO,WAAW,UAAW;AACjC,UAAM;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,aAAa;AAAA,IACd,IAAI;AACJ,kBAAc,GAAI,OAAQ,IAAK,QAAS,IAAK,WAAY,IAAK,UAAW;AAAA,EAC1E;AAEA,QAAM,YAAY;AAAA,IACjB,uBAAuB;AAAA,EACxB;AAEA,SAAO;AACR;AAae,SAAR,YAA8B,EAAE,YAAY,SAAS,GAAI;AAC/D,QAAM,YAAY,aAAc,EAAE,WAAW,CAAE;AAC/C,QAAM,cAAc,eAAgB,EAAE,WAAW,CAAE;AACnD,QAAM,eAAe,gBAAiB,EAAE,WAAW,CAAE;AAErD,QAAM,cAAc;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACJ;AAGA,QAAM,eAAe,OAAO,QAAS,WAAY,EAC/C,OAAQ,CAAE,CAAE,EAAE,KAAM,MAAO,CAAC,CAAE,KAAM,EACpC,IAAK,CAAE,CAAE,MAAM,KAAM,MAAO,IAAM,IAAK,KAAM,KAAM,GAAI,EACvD,KAAM,IAAK;AAEb,mBAAkB;AAAA,IACjB,KAAK,WAAW,UAAW,QAAS;AAAA,EAAQ,YAAa;AAAA,KAAQ;AAAA,EAClE,CAAE;AAEF,SAAO;AACR;",
-  "names": []
-}

package/build-style/tabs/editor-rtl.css

@@ -1,26 +0,0 @@
-.wp-block-tabs.wp-block .wp-block-tabs__tab-item__inserter {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wp--style--unstable-tabs-gap);
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section {
-  flex-grow: 1;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:first-child {
-  margin-top: 0;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:last-child {
-  margin-bottom: 0;
-}
-.wp-block-tabs.wp-block.is-vertical > .wp-block-tab.wp-block {
-  flex-direction: row;
-}
-.wp-block-tabs.wp-block.is-vertical .wp-block-tabs__tab-item__inserter {
-  align-items: flex-start;
-  margin-left: -1px;
-}

package/build-style/tabs/editor.css

@@ -1,26 +0,0 @@
-.wp-block-tabs.wp-block .wp-block-tabs__tab-item__inserter {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wp--style--unstable-tabs-gap);
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section {
-  flex-grow: 1;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:first-child {
-  margin-top: 0;
-}
-.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:last-child {
-  margin-bottom: 0;
-}
-.wp-block-tabs.wp-block.is-vertical > .wp-block-tab.wp-block {
-  flex-direction: row;
-}
-.wp-block-tabs.wp-block.is-vertical .wp-block-tabs__tab-item__inserter {
-  align-items: flex-start;
-  margin-right: -1px;
-}

package/src/tab/tabs-list.js

@@ -1,122 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { decodeEntities } from '@wordpress/html-entities';
-import { RawHTML } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import slugFromLabel from './slug-from-label';
-
-function StaticLabel( { label, index } ) {
-	if ( label ) {
-		return (
-			<span>
-				<RawHTML>{ decodeEntities( label ) }</RawHTML>
-			</span>
-		);
-	}
-	return (
-		<span>
-			{ sprintf(
-				/* translators: %d is the tab index + 1 */
-				__( 'Tab %d' ),
-				index + 1
-			) }
-		</span>
-	);
-}
-
-export default function TabsList( {
-	siblingTabs,
-	currentClientId,
-	currentBlockIndex,
-	currentLabel,
-	tabItemColorProps,
-	onSelectTab,
-	onLabelChange,
-	labelRef,
-	focusRef,
-	labelElementRef,
-} ) {
-	return (
-		<div role="tablist" className="tabs__list">
-			{ siblingTabs.map( ( tab, index ) => {
-				const isCurrentTab = tab.clientId === currentClientId;
-				const isSiblingTabActive = index === currentBlockIndex;
-				const tabAttributes = tab.attributes || {};
-				const siblingLabel = tabAttributes.label || '';
-				const siblingAnchor =
-					tabAttributes.anchor ||
-					slugFromLabel( siblingLabel, index );
-				const siblingTabPanelId = siblingAnchor;
-				const siblingTabLabelId = `${ siblingTabPanelId }--tab`;
-
-				return (
-					<button
-						key={ tab.clientId }
-						aria-controls={ siblingTabPanelId }
-						aria-selected={ isSiblingTabActive }
-						id={ siblingTabLabelId }
-						role="tab"
-						className={ clsx(
-							'tabs__tab-label',
-							tabItemColorProps.className
-						) }
-						style={ {
-							...tabItemColorProps.style,
-						} }
-						tabIndex={ isSiblingTabActive ? 0 : -1 }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							onSelectTab( tab.clientId );
-						} }
-						onKeyDown={ ( event ) => {
-							// If shift is also pressed, do not select the block.
-							if ( event.key === 'Enter' && ! event.shiftKey ) {
-								event.preventDefault();
-								onSelectTab( tab.clientId );
-								if ( isCurrentTab ) {
-									const { requestAnimationFrame } = window;
-									focusRef.current = requestAnimationFrame(
-										() => {
-											labelElementRef.current?.focus();
-										}
-									);
-								}
-							}
-						} }
-					>
-						{ isCurrentTab ? (
-							<RichText
-								ref={ labelRef }
-								tagName="span"
-								withoutInteractiveFormatting
-								placeholder={ sprintf(
-									/* translators: %d is the tab index + 1 */
-									__( 'Tab %d…' ),
-									currentBlockIndex + 1
-								) }
-								value={ decodeEntities( currentLabel ) }
-								onChange={ onLabelChange }
-							/>
-						) : (
-							<StaticLabel
-								label={ siblingLabel }
-								index={ index }
-							/>
-						) }
-					</button>
-				);
-			} ) }
-		</div>
-	);
-}

package/src/tabs/editor.scss

@@ -1,30 +0,0 @@
-.wp-block-tabs.wp-block {
-	.wp-block-tabs__tab-item__inserter {
-		height: 100%;
-		display: flex;
-		align-items: center;
-	}
-	.wp-block-tab.wp-block {
-		display: flex;
-		flex-direction: column;
-		gap: var(--wp--style--unstable-tabs-gap);
-		& > section {
-			flex-grow: 1;
-			& > .wp-block:first-child {
-				margin-top: 0;
-			}
-			& > .wp-block:last-child {
-				margin-bottom: 0;
-			}
-		}
-	}
-	&.is-vertical {
-		& > .wp-block-tab.wp-block {
-			flex-direction: row;
-		}
-		.wp-block-tabs__tab-item__inserter {
-			align-items: flex-start;
-			margin-right: -1px; // Hack to get the inserter to align with the tab border
-		}
-	}
-}

package/src/tabs/style-engine.js

@@ -1,164 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalGetGapCSSValue as getGapCSSValue,
-	useStyleOverride,
-} from '@wordpress/block-editor';
-
-/**
- * Gets the gap styles for the tab block.
- * @param {Object} props
- * @param {Object} props.attributes Block attributes
- * @return {Object} CSS custom properties for gap styles
- */
-function getGapStyles( { attributes } ) {
-	const { style, orientation } = attributes || {};
-	const { spacing } = style || {};
-	const { blockGap } = spacing || {};
-	//--wp--style--tabs-list-gap-default should be used by themes that want to set a default
-	// gap on the tabs list.
-	const fallbackValue = `var( --wp--style--tabs-gap-default, var( --wp--style--block-gap, 0.5em ) )`;
-	let listGapValue = fallbackValue;
-	let gapValue = fallbackValue;
-
-	// Check for a value.
-	if ( !! blockGap ) {
-		listGapValue =
-			typeof blockGap === 'string'
-				? getGapCSSValue( blockGap )
-				: getGapCSSValue( blockGap?.left ) || fallbackValue;
-		gapValue =
-			typeof blockGap === 'string'
-				? getGapCSSValue( blockGap )
-				: getGapCSSValue( blockGap?.top ) || fallbackValue;
-	}
-
-	if ( orientation === 'vertical' ) {
-		const _listGapValue = listGapValue;
-		const _gapValue = gapValue;
-		listGapValue = _gapValue;
-		gapValue = _listGapValue;
-	}
-
-	// The unstable tabs list gap calculation requires a real value (such as `0px`) and not `0`.
-	const gapMap = {
-		'--wp--style--unstable-tabs-list-gap':
-			listGapValue === '0' ? '0px' : listGapValue,
-		'--wp--style--unstable-tabs-gap': gapValue,
-	};
-
-	return gapMap;
-}
-
-/**
- * Gets the color styles for the tab block.
- *
- * @param {Object} props
- * @param {Object} props.attributes Block attributes
- * @return {Object} CSS custom properties for color styles
- */
-function getColorStyles( { attributes } ) {
-	const {
-		customTabInactiveColor,
-		customTabHoverColor,
-		customTabActiveColor,
-		customTabTextColor,
-		customTabActiveTextColor,
-		customTabHoverTextColor,
-	} = attributes || {};
-
-	// Helper to normalize color objects (preset { slug } vs direct value).
-	function getColorValue( color ) {
-		if ( ! color ) {
-			return null;
-		}
-		if ( typeof color === 'object' && color.slug ) {
-			return `var(--wp--preset--color--${ color.slug })`;
-		}
-		return color;
-	}
-
-	const colorVarMap = {
-		'--custom-tab-inactive-color': getColorValue( customTabInactiveColor ),
-		'--custom-tab-active-color': getColorValue( customTabActiveColor ),
-		'--custom-tab-hover-color': getColorValue( customTabHoverColor ),
-		'--custom-tab-text-color': getColorValue( customTabTextColor ),
-		'--custom-tab-active-text-color': getColorValue(
-			customTabActiveTextColor
-		),
-		'--custom-tab-hover-text-color': getColorValue(
-			customTabHoverTextColor
-		),
-	};
-
-	return colorVarMap;
-}
-
-/**
- * Gets the border styles for the tab block.
- *
- * @param {Object} props
- * @param {Object} props.attributes Block attributes
- * @return {Object} CSS custom properties for border styles
- */
-function getBorderStyles( { attributes } ) {
-	const { radius } = attributes?.style?.border || {};
-
-	if ( ! radius ) {
-		return {};
-	}
-
-	let radiusValue = radius;
-
-	if ( typeof radius === 'object' ) {
-		const {
-			topLeft = '0',
-			topRight = '0',
-			bottomRight = '0',
-			bottomLeft = '0',
-		} = radius;
-		radiusValue = `${ topLeft } ${ topRight } ${ bottomRight } ${ bottomLeft }`;
-	}
-
-	const borderMap = {
-		'--tab-border-radius': radiusValue,
-	};
-
-	return borderMap;
-}
-
-/**
- * Injects color CSS custom properties for the tabs block, mirroring the pattern
- * used by gap-styles (scoped to `#block-{ clientId }`). This replaces the prior
- * inline-style object return value approach so that these values participate in
- * style engine cascade like other dynamic style overrides.
- *
- * @param {Object} props
- * @param {Object} props.attributes Block attributes
- * @param {string} props.clientId   Block client ID
- * @return {null} No UI output
- */
-export default function StyleEngine( { attributes, clientId } ) {
-	const gapVarMap = getGapStyles( { attributes } );
-	const colorVarMap = getColorStyles( { attributes } );
-	const borderVarMap = getBorderStyles( { attributes } );
-
-	const styleVarMap = {
-		...gapVarMap,
-		...colorVarMap,
-		...borderVarMap,
-	};
-
-	// Build scoped CSS only for defined values to avoid unnecessary empty declarations.
-	const declarations = Object.entries( styleVarMap )
-		.filter( ( [ , value ] ) => !! value )
-		.map( ( [ name, value ] ) => `\t${ name }: ${ value };` )
-		.join( '\n' );
-
-	useStyleOverride( {
-		css: clientId ? `#block-${ clientId } {\n${ declarations }\n}` : '',
-	} );
-
-	return null;
-}