From 787476a310c74504284708848b00aede05837bd0 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 1 Oct 2026 18:22:28 +0800 Subject: [PATCH] Tab List: Add background image, size, and gradient support --- docs/reference-guides/core-blocks/README.md | 2 +- packages/block-library/src/tab-list/README.md | 5 +++++ packages/block-library/src/tab-list/block.json | 7 +++++++ packages/block-library/src/tab-list/edit.jsx | 9 ++++++++- packages/block-library/src/tab-list/index.php | 4 ++-- packages/block-library/src/tab-list/save.jsx | 9 ++++++++- 6 files changed, 31 insertions(+), 5 deletions(-) diff --git a/docs/reference-guides/core-blocks/README.md b/docs/reference-guides/core-blocks/README.md index a474ad07aa1032..2333a54fc07d1b 100644 --- a/docs/reference-guides/core-blocks/README.md +++ b/docs/reference-guides/core-blocks/README.md @@ -961,7 +961,7 @@ Display the tab buttons for a tabbed interface. - **Name:** [core/tab-list](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-list/) - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Parent:** core/tabs -- **Supports:** ariaLabel, color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), shadow, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ +- **Supports:** ariaLabel, background (backgroundImage, backgroundSize, gradient), color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), shadow, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ - **Attributes:** tabs ## Tab Panel diff --git a/packages/block-library/src/tab-list/README.md b/packages/block-library/src/tab-list/README.md index b24fb605e4e663..a57824f0116a76 100644 --- a/packages/block-library/src/tab-list/README.md +++ b/packages/block-library/src/tab-list/README.md @@ -29,6 +29,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true` - [`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` +- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background): + - `backgroundImage`: `true` + - `backgroundSize`: `true` + - `gradient`: `true` - [`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` @@ -56,6 +60,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._ +- **background**: `.wp-block-tab-list button` - **border**: `.wp-block-tab-list button` - **shadow**: `.wp-block-tab-list button` - **color**: diff --git a/packages/block-library/src/tab-list/block.json b/packages/block-library/src/tab-list/block.json index 95fa9eb3d7e0f0..af3da8f82e7a40 100644 --- a/packages/block-library/src/tab-list/block.json +++ b/packages/block-library/src/tab-list/block.json @@ -28,6 +28,12 @@ "ariaLabel": true, "visibility": false, "lock": false, + "background": { + "backgroundImage": true, + "backgroundSize": true, + "gradient": true, + "__experimentalSkipSerialization": true + }, "color": { "background": true, "text": true, @@ -71,6 +77,7 @@ } }, "selectors": { + "background": ".wp-block-tab-list button", "border": ".wp-block-tab-list button", "shadow": ".wp-block-tab-list button", "color": { diff --git a/packages/block-library/src/tab-list/edit.jsx b/packages/block-library/src/tab-list/edit.jsx index 28479138895492..72b04fe0c97692 100644 --- a/packages/block-library/src/tab-list/edit.jsx +++ b/packages/block-library/src/tab-list/edit.jsx @@ -5,6 +5,7 @@ import { useBlockProps, store as blockEditorStore, RichText, + useBackgroundProps, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, @@ -32,6 +33,7 @@ function Edit( { } ) { const { ariaLabel } = attributes; + const backgroundProps = useBackgroundProps( attributes ); const colorProps = useColorProps( attributes ); const borderProps = useBorderProps( attributes ); const spacingProps = getSpacingClassesAndStyles( attributes ); @@ -148,9 +150,14 @@ function Edit( { className: layoutClassNames, } ); - const buttonClassName = clsx( colorProps.className, borderProps.className ); + const buttonClassName = clsx( + backgroundProps.className, + colorProps.className, + borderProps.className + ); const buttonStyle = { + ...backgroundProps.style, ...colorProps.style, ...borderProps.style, ...spacingProps.style, diff --git a/packages/block-library/src/tab-list/index.php b/packages/block-library/src/tab-list/index.php index f45de5def38e91..f65e86873759dd 100644 --- a/packages/block-library/src/tab-list/index.php +++ b/packages/block-library/src/tab-list/index.php @@ -9,8 +9,8 @@ * Render callback for core/tab-list. * * Injects IAPI directives into the saved button HTML. The buttons already - * carry color/border/padding styles from save.jsx; this callback adds - * tab-specific attributes (id, aria-controls, context) and interactivity + * carry background/color/border/padding styles from save.jsx; this callback + * adds tab-specific attributes (id, aria-controls, context) and interactivity * directives using data from the tabs-list context. * * @since 7.1.0 diff --git a/packages/block-library/src/tab-list/save.jsx b/packages/block-library/src/tab-list/save.jsx index d9655b9644741b..06f7fbf84b7d72 100644 --- a/packages/block-library/src/tab-list/save.jsx +++ b/packages/block-library/src/tab-list/save.jsx @@ -2,6 +2,7 @@ import clsx from 'clsx'; import { RichText, useBlockProps, + getBackgroundClassesAndStyles, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, @@ -14,14 +15,20 @@ export default function save( { attributes } ) { role: 'tablist', } ); + const backgroundProps = getBackgroundClassesAndStyles( attributes ); const colorProps = getColorClassesAndStyles( attributes ); const borderProps = getBorderClassesAndStyles( attributes ); const spacingProps = getSpacingClassesAndStyles( attributes ); const shadowProps = getShadowClassesAndStyles( attributes ); - const buttonClassName = clsx( colorProps.className, borderProps.className ); + const buttonClassName = clsx( + backgroundProps.className, + colorProps.className, + borderProps.className + ); const buttonStyle = { + ...backgroundProps.style, ...colorProps.style, ...borderProps.style, ...spacingProps.style,