Tab List: Add background image, size, and gradient support

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

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**:

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": {

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,

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

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,