Skip to content

Commit b1870dd

Browse files
sethrubensteinsethrubensteinmikachanannezazu
authored
Feat/core tabs restructure (WordPress#74412)
* New, reworked structure and editing * Refactoring the entire tabs experience, rough right now, should have this cleaned up by end of week. * Greater granular flex styling, need to go back in and cleanup old styles * Full border styles for menu items * Style tweaks * Enhance tab functionality by updating the AddTabToolbarControl to manage tabs-menu selection and active tab index. Implement auto-edit mode for newly added tabs in the TabsMenu edit component. * Allow renaming of tab blocks, leaving note in deprecation upgrade to remove later * Style and dev cleanup * Default layouts for tabs-menu and keyboard handling * Tweaks * PHPCS cleanup * Dimensions block.json supports, correct format * Adding shadow support * Cleanup * Increased performance, move client side and server side tabs list generation all into context. * Cleanup * Cleanup on styles and blockgap * Lets back off on blockspacing for tabs-menu for now * Introduce new core/tabs-menu-item block (#14) * New block/core tabs menu item (#16) * Introducing new core/tabs-menu-item block, utilizes blockcontextprovider hack we use for templating blocks. *May rename the block to tabs-menu-item-template * Trying to get this working as I'd like * Introducing core/tabs-menu-item, a templating block for styling the interior element of tabs-menu * Style cleanup * Block cleanup for MVP * Add text align to tabs-menu-item * Now tabs-menu interior items can be styled using dimensions controls in tabs-menu * Cleanup * Remove refactor artifact * Cleanup and initializing new tab with a proper label * Tab removal button - Add "Remove Tab" toolbar button to tabs block - Code cleanup * Clearer labels on block toolbar buttons * Cleaning up tabs id, utilizing anchor instead of a custom attribute, injecting tabs id dynamically if none present early in core/tabs context. * new add tab controls per some internal prc user testing with editors * Leaving the add tab in place in tabs-menu-item, pulling from tabs-menu extra appender... for now * Cleanup, align with labels like core/accordion * Move add and remove tab into segmented block toolbar group * Sensible defaults for border on tabs-menu * Resolve phpcs issue * Cleanup on style * Introduce custom controls for moving tab * remove unused tabs styles, get rid of opacity on styles, simplify styles further, enhance block example. * Cleanup on block mover * Resolve some oustanding linting issues * Linting error resolution * Resolving scss linting issue * Update core blocks documentation to reflect changes in supported features for tabs and tab panels, including color and typography attributes. Hoping this resolves final PR checks. Co-authored-by: sethrubenstein <smrubenstein@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org>
1 parent 3ac9c02 commit b1870dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2310
-1329
lines changed

‎docs/reference-guides/core-blocks.md‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -969,10 +969,21 @@ Content for a tab in a tabbed interface. ([Source](https://github.com/WordPress/
969969
- **Name:** core/tab
970970
- **Experimental:** true
971971
- **Category:** design
972-
- **Parent:** core/tabs
973-
- **Supports:** anchor, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
972+
- **Parent:** core/tab-panels
973+
- **Supports:** anchor, color (background, text), layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
974974
- **Attributes:** label
975975

976+
## Tab Panels
977+
978+
Container for tab panel content in a tabbed interface. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab-panels))
979+
980+
- **Name:** core/tab-panels
981+
- **Experimental:** true
982+
- **Category:** design
983+
- **Parent:** core/tabs
984+
- **Allowed Blocks:** core/tab
985+
- **Supports:** color (background, heading, link, text), dimensions (~~aspectRatio~~, ~~height~~, ~~minHeight~~, ~~width~~), layout (allowJustification, default, ~~allowOrientation~~, ~~allowSizingOnChildren~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (margin, padding, ~~blockGap~~), typography (fontSize), ~~anchor~~, ~~html~~, ~~lock~~, ~~reusable~~
986+
976987
## Table
977988

978989
Create structured content in rows and columns to display information. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table))
@@ -999,9 +1010,31 @@ Display content in a tabbed interface to help users navigate detailed content wi
9991010
- **Name:** core/tabs
10001011
- **Experimental:** true
10011012
- **Category:** design
1002-
- **Allowed Blocks:** core/tab
1003-
- **Supports:** align, color (~~background~~, ~~text~~), interactivity, spacing (blockGap, margin, ~~padding~~), typography (fontSize), ~~html~~
1004-
- **Attributes:** activeTabIndex, customTabActiveColor, customTabActiveTextColor, customTabHoverColor, customTabHoverTextColor, customTabInactiveColor, customTabTextColor, orientation, tabActiveColor, tabActiveTextColor, tabHoverColor, tabHoverTextColor, tabInactiveColor, tabTextColor, tabsId
1013+
- **Allowed Blocks:** core/tabs-menu, core/tab-panels
1014+
- **Supports:** align, anchor, color (~~background~~, ~~text~~), interactivity, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowVerticalAlignment, default, ~~allowSwitching~~), renaming, spacing (blockGap, margin, padding), typography (fontSize), ~~html~~
1015+
- **Attributes:** activeTabIndex, editorActiveTabIndex
1016+
1017+
## Tabs Menu
1018+
1019+
Display the tab buttons for a tabbed interface. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs-menu))
1020+
1021+
- **Name:** core/tabs-menu
1022+
- **Experimental:** true
1023+
- **Category:** design
1024+
- **Parent:** core/tabs
1025+
- **Allowed Blocks:** core/tabs-menu-item
1026+
- **Supports:** color (background, text), dimensions (~~aspectRatio~~, ~~height~~, ~~minHeight~~, ~~width~~), layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~reusable~~
1027+
1028+
## Tab Menu Item
1029+
1030+
A single tab button in the tabs menu. Used as a template for styling all tab buttons. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs-menu-item))
1031+
1032+
- **Name:** core/tabs-menu-item
1033+
- **Experimental:** true
1034+
- **Category:** design
1035+
- **Parent:** core/tabs-menu
1036+
- **Supports:** color (background, text), layout (allowJustification, allowVerticalAlignment, default, ~~allowOrientation~~, ~~allowSwitching~~, ~~allowWrap~~), shadow, spacing (padding), typography (fontSize, textAlign), ~~html~~, ~~lock~~, ~~reusable~~
1037+
- **Attributes:** activeBackgroundColor, activeTextColor, customActiveBackgroundColor, customActiveTextColor, customHoverBackgroundColor, customHoverTextColor, hoverBackgroundColor, hoverTextColor
10051038

10061039
## Tag Cloud
10071040

‎packages/block-library/src/editor.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
@use "./social-links/editor.scss" as *;
4747
@use "./spacer/editor.scss" as *;
4848
@use "./table/editor.scss" as *;
49-
@use "./tabs/editor.scss" as *;
49+
@use "./tabs-menu/editor.scss" as *;
50+
@use "./tabs-menu-item/editor.scss" as *;
5051
@use "./template-part/editor.scss" as *;
5152
@use "./term-template/editor.scss" as *;
5253
@use "./text-columns/editor.scss" as *;

‎packages/block-library/src/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,12 @@ import * as socialLink from './social-link';
133133
import * as socialLinks from './social-links';
134134
import * as spacer from './spacer';
135135
import * as tab from './tab';
136+
import * as tabPanels from './tab-panels';
136137
import * as table from './table';
137138
import * as tableOfContents from './table-of-contents';
138139
import * as tabs from './tabs';
140+
import * as tabsMenu from './tabs-menu';
141+
import * as tabsMenuItem from './tabs-menu-item';
139142
import * as tagCloud from './tag-cloud';
140143
import * as templatePart from './template-part';
141144
import * as termCount from './term-count';
@@ -274,6 +277,9 @@ const getAllBlocks = () => {
274277
if ( window?.__experimentalEnableBlockExperiments ) {
275278
blocks.push( tab );
276279
blocks.push( tabs );
280+
blocks.push( tabsMenu );
281+
blocks.push( tabsMenuItem );
282+
blocks.push( tabPanels );
277283
}
278284

279285
if ( window?.__experimentalEnableFormBlocks ) {

‎packages/block-library/src/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,12 @@
7272
@use "./spacer/style.scss" as *;
7373
@use "./tag-cloud/style.scss" as *;
7474
@use "./tab/style.scss" as *;
75+
@use "./tab-panels/style.scss" as *;
7576
@use "./table/style.scss" as *;
7677
@use "./table-of-contents/style.scss" as *;
7778
@use "./tabs/style.scss" as *;
79+
@use "./tabs-menu/style.scss" as *;
80+
@use "./tabs-menu-item/style.scss" as *;
7881
@use "./term-count/style.scss" as *;
7982
@use "./term-description/style.scss" as *;
8083
@use "./term-name/style.scss" as *;

‎packages/block-library/src/tab-panels/block.json‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"__experimental": true,
4+
"apiVersion": 3,
5+
"name": "core/tab-panels",
6+
"title": "Tab Panels",
7+
"description": "Container for tab panel content in a tabbed interface.",
8+
"version": "1.0.0",
9+
"category": "design",
10+
"textdomain": "default",
11+
"parent": [
12+
"core/tabs"
13+
],
14+
"allowedBlocks": [
15+
"core/tab"
16+
],
17+
"attributes": {},
18+
"supports": {
19+
"anchor": false,
20+
"html": false,
21+
"reusable": false,
22+
"lock": false,
23+
"dimensions": {
24+
"aspectRatio": false,
25+
"height": false,
26+
"minHeight": false,
27+
"width": false
28+
},
29+
"color": {
30+
"background": true,
31+
"text": true,
32+
"heading": true,
33+
"link": true,
34+
"__experimentalDefaultControls": {
35+
"background": true,
36+
"text": true
37+
}
38+
},
39+
"spacing": {
40+
"blockGap": false,
41+
"padding": true,
42+
"margin": true
43+
},
44+
"typography": {
45+
"fontSize": true,
46+
"__experimentalFontFamily": true
47+
},
48+
"layout": {
49+
"default": {
50+
"type": "flex",
51+
"flexWrap": "nowrap",
52+
"justifyContent": "stretch",
53+
"orientation": "vertical"
54+
},
55+
"allowSwitching": false,
56+
"allowVerticalAlignment": false,
57+
"allowOrientation": false,
58+
"allowJustification": true,
59+
"allowSizingOnChildren": false
60+
},
61+
"__experimentalBorder": {
62+
"radius": true,
63+
"color": true,
64+
"width": true,
65+
"style": true
66+
}
67+
},
68+
"editorScript": "file:./index.js",
69+
"style": "file:./style-index.css"
70+
}

‎packages/block-library/src/tab-panels/edit.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
useBlockProps,
6+
useInnerBlocksProps,
7+
store as blockEditorStore,
8+
} from '@wordpress/block-editor';
9+
import { useSelect } from '@wordpress/data';
10+
11+
/**
12+
* Internal dependencies
13+
*/
14+
import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
15+
import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
16+
17+
const TAB_PANELS_TEMPLATE = [ [ 'core/tab', {} ] ];
18+
19+
export default function Edit( { clientId } ) {
20+
const blockProps = useBlockProps();
21+
22+
const innerBlocksProps = useInnerBlocksProps( blockProps, {
23+
template: TAB_PANELS_TEMPLATE,
24+
templateLock: false,
25+
renderAppender: false, // Appender handled by individual tab blocks
26+
} );
27+
28+
// Get the parent tabs block clientId
29+
const tabsClientId = useSelect(
30+
( select ) => {
31+
const { getBlockRootClientId } = select( blockEditorStore );
32+
return getBlockRootClientId( clientId );
33+
},
34+
[ clientId ]
35+
);
36+
37+
return (
38+
<>
39+
<AddTabToolbarControl tabsClientId={ tabsClientId } />
40+
<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
41+
<div { ...innerBlocksProps } />
42+
</>
43+
);
44+
}

‎packages/block-library/src/tab-panels/icon.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { SVG, Path } from '@wordpress/primitives';
5+
6+
export default (
7+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
8+
<Path d="M4 4H20V20H4V4ZM5.5 5.5V18.5H18.5V5.5H5.5Z" />
9+
</SVG>
10+
);

‎packages/block-library/src/tab-panels/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import initBlock from '../utils/init-block';
5+
import edit from './edit';
6+
import save from './save';
7+
import icon from './icon';
8+
9+
import metadata from './block.json';
10+
11+
const { name } = metadata;
12+
13+
export { metadata, name };
14+
15+
export const settings = {
16+
icon,
17+
edit,
18+
save,
19+
};
20+
21+
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/tab-panels/save.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
5+
6+
export default function save() {
7+
const blockProps = useBlockProps.save();
8+
const innerBlocksProps = useInnerBlocksProps.save( blockProps );
9+
10+
return <div { ...innerBlocksProps } />;
11+
}

‎packages/block-library/src/tab-panels/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wp-block-tab-panels {
2+
flex-grow: 1;
3+
min-width: 0;
4+
}

0 commit comments

Comments
 (0)