Removes button component from block and initial styles for tab labels

WordPress · Jul 22, 2024 · 4fd35fd · 4fd35fd
1 parent 584c27e
commit 4fd35fd
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -925,7 +925,7 @@ Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tre
 -	**Experimental:** true
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
--	**Supports:** align (full, wide), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
+-	**Supports:** align (full, wide), color (text, ~~background~~), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
 -	**Attributes:** activeTab
 
 ## Tag Cloud

diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
@@ -19,6 +19,10 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"text": true
+		},
 		"html": false,
 		"interactivity": true,
 		"layout": {

diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
@@ -13,15 +13,27 @@ import {
 	store as blockEditorStore,
 	RichText,
 } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-const initialTabsTemplate = [
+const TABS_TEMPLATE = [
 	[ 'core/tab', { title: 'Tab 1' } ],
 	[ 'core/tab', { title: 'Tab 2' } ],
 ];
 
+const ALLOWED_FORMATS = [
+	'core/bold',
+	'core/code',
+	'core/image',
+	'core/italic',
+	'core/keyboard',
+	'core/language',
+	'core/strikethrough',
+	'core/subscript',
+	'core/superscript',
+	'core/text-color',
+];
+
 export default function Edit( { attributes, clientId, setAttributes } ) {
 	const { activeTab } = attributes;
 	const innerBlocks = useSelect(
@@ -33,11 +45,11 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 
 	const innerBlockProps = useInnerBlocksProps(
 		{
-			className: 'wp-block-tabs__tab-content',
+			className: 'wp-block-tabs__content',
 		},
 		{
 			renderAppender: InnerBlocks.ButtonBlockAppender,
-			template: initialTabsTemplate,
+			template: TABS_TEMPLATE,
 		}
 	);
 
@@ -75,16 +87,16 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 							className="wp-block-tabs__list-item"
 							role="presentation"
 						>
-							<Button
+							<button
 								className={ clsx( 'wp-block-tabs__tab', {
 									'is-active': isActive,
 								} ) }
 								onClick={ () => setActiveTab( block.clientId ) }
-								variant="link"
 								role="tab"
 								tabIndex={ tabIndex }
 							>
 								<RichText
+									allowedFormats={ ALLOWED_FORMATS }
 									tagName="span"
 									value={ block.attributes.title }
 									onChange={ ( value ) =>
@@ -93,7 +105,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 										} )
 									}
 								/>
-							</Button>
+							</button>
 						</li>
 					);
 				} ) }

diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
@@ -2,5 +2,27 @@
 	display: flex;
 	gap: 10px;
 	list-style: none;
+	margin: 0;
 	padding: 0;
 }
+
+.wp-block-tabs__tab {
+	box-shadow: none;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	font-size: var(--wp--preset--font-size--normal, inherit);
+	margin: 0;
+	opacity: 0.5;
+	outline: none;
+	padding: $grid-unit;
+
+	&.is-active {
+		border-bottom: currentColor 2px solid;
+		opacity: 1;
+	}
+}
+
+.wp-block-tabs__content {
+	border-top: var(--wp--preset--color--accent) 2px solid;
+}