diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3abd1d9e6abb0..7988bfe1d7bc5 100644 --- 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 index 92422411ce30e..49e2b2e551c93 100644 --- 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 index d0f0f583e8980..2bc9d781be195 100644 --- 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" > - + ); } ) } diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss index 84ef2377c87af..b4e7b4197e64e 100644 --- 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; +}