Skip to content

Commit b5550d0

Browse files
sethrubensteinsethrubenstein
committed
merge complete
1 parent 1490580 commit b5550d0

37 files changed

+2195
-1
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -954,6 +954,17 @@ Add white space between blocks and customize its height. ([Source](https://githu
954954
- **Supports:** anchor, interactivity (clientNavigation), spacing (margin)
955955
- **Attributes:** height, width
956956

957+
## Tab
958+
959+
Content for a tab in a tabbed interface. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab))
960+
961+
- **Name:** core/tab
962+
- **Experimental:** true
963+
- **Category:** design
964+
- **Parent:** core/tabs
965+
- **Supports:** anchor, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
966+
- **Attributes:** label
967+
957968
## Table
958969

959970
Create structured content in rows and columns to display information. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table))
@@ -973,6 +984,17 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
973984
- **Supports:** ariaLabel, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
974985
- **Attributes:** headings, maxLevel, onlyIncludeCurrentPage, ordered
975986

987+
## Tabs
988+
989+
Display content in a tabbed interface to help users navigate detailed content with ease. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs))
990+
991+
- **Name:** core/tabs
992+
- **Experimental:** true
993+
- **Category:** design
994+
- **Allowed Blocks:** core/tab
995+
- **Supports:** align, color (~~background~~, ~~text~~), interactivity, spacing (blockGap, margin, ~~padding~~), typography (fontSize), ~~html~~
996+
- **Attributes:** activeTabIndex, customTabActiveColor, customTabActiveTextColor, customTabHoverColor, customTabHoverTextColor, customTabInactiveColor, customTabTextColor, orientation, tabActiveColor, tabActiveTextColor, tabHoverColor, tabHoverTextColor, tabInactiveColor, tabTextColor, tabsId
997+
976998
## Tag Cloud
977999

9781000
A cloud of popular keywords, each sized by how often it appears. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tag-cloud))

‎packages/block-library/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
"./image/view": "./build-module/image/view.js",
4444
"./navigation/view": "./build-module/navigation/view.js",
4545
"./query/view": "./build-module/query/view.js",
46-
"./search/view": "./build-module/search/view.js"
46+
"./search/view": "./build-module/search/view.js",
47+
"./tabs/view": "./build-module/tabs/view.js"
4748
},
4849
"wpStyleEntryPoints": [
4950
"src/*.scss",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
@use "./social-links/editor.scss" as *;
4646
@use "./spacer/editor.scss" as *;
4747
@use "./table/editor.scss" as *;
48+
@use "./tabs/editor.scss" as *;
4849
@use "./tag-cloud/editor.scss" as *;
4950
@use "./template-part/editor.scss" as *;
5051
@use "./term-template/editor.scss" as *;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,10 @@ import * as siteTitle from './site-title';
125125
import * as socialLink from './social-link';
126126
import * as socialLinks from './social-links';
127127
import * as spacer from './spacer';
128+
import * as tab from './tab';
128129
import * as table from './table';
129130
import * as tableOfContents from './table-of-contents';
131+
import * as tabs from './tabs';
130132
import * as tagCloud from './tag-cloud';
131133
import * as templatePart from './template-part';
132134
import * as termCount from './term-count';
@@ -263,6 +265,8 @@ const getAllBlocks = () => {
263265

264266
if ( window?.__experimentalEnableBlockExperiments ) {
265267
blocks.push( breadcrumbs );
268+
blocks.push( tab );
269+
blocks.push( tabs );
266270
}
267271

268272
if ( window?.__experimentalEnableFormBlocks ) {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,10 @@
6868
@use "./social-links/style.scss" as *;
6969
@use "./spacer/style.scss" as *;
7070
@use "./tag-cloud/style.scss" as *;
71+
@use "./tab/style.scss" as *;
7172
@use "./table/style.scss" as *;
7273
@use "./table-of-contents/style.scss" as *;
74+
@use "./tabs/style.scss" as *;
7375
@use "./term-count/style.scss" as *;
7476
@use "./term-description/style.scss" as *;
7577
@use "./term-name/style.scss" as *;

‎packages/block-library/src/tab/add-tab-toolbar-control.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { createBlock } from '@wordpress/blocks';
5+
import {
6+
BlockControls,
7+
store as blockEditorStore,
8+
} from '@wordpress/block-editor';
9+
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
10+
import { __ } from '@wordpress/i18n';
11+
import { useDispatch } from '@wordpress/data';
12+
13+
/**
14+
* "Add Tab" button in the block toolbar for the tab block.
15+
* @param {Object} props
16+
* @param {Object} props.attributes The block attributes.
17+
* @param {string} props.tabsClientId The client ID of the parent tabs block.
18+
* @return {JSX.Element} The toolbar control element.
19+
*/
20+
export default function AddTabToolbarControl( { attributes, tabsClientId } ) {
21+
const { insertBlock } = useDispatch( blockEditorStore );
22+
23+
const { className, fontFamily, fontSize } = attributes;
24+
25+
const addTab = () => {
26+
const newTabBlock = createBlock( 'core/tab', {
27+
label: __( 'New Tab' ),
28+
className,
29+
fontFamily,
30+
fontSize,
31+
} );
32+
insertBlock( newTabBlock, undefined, tabsClientId );
33+
};
34+
35+
return (
36+
<BlockControls group="block">
37+
<ToolbarGroup>
38+
<ToolbarButton
39+
className="components-toolbar__control"
40+
label={ __( 'Add Tab' ) }
41+
onClick={ addTab }
42+
showTooltip
43+
text={ __( 'Add Tab' ) }
44+
/>
45+
</ToolbarGroup>
46+
</BlockControls>
47+
);
48+
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"__experimental": true,
4+
"apiVersion": 3,
5+
"name": "core/tab",
6+
"title": "Tab",
7+
"description": "Content for a tab in a tabbed interface.",
8+
"version": "1.0.0",
9+
"category": "design",
10+
"textdomain": "default",
11+
"attributes": {
12+
"label": {
13+
"type": "string",
14+
"default": ""
15+
}
16+
},
17+
"parent": [
18+
"core/tabs"
19+
],
20+
"supports": {
21+
"anchor": true,
22+
"html": false,
23+
"reusable": false,
24+
"layout": {
25+
"allowSwitching": true,
26+
"allowInheriting": false,
27+
"allowVerticalAlignment": true,
28+
"allowJustification": true,
29+
"allowOrientation": true,
30+
"allowSizingOnChildren": true
31+
},
32+
"spacing": {
33+
"blockGap": true,
34+
"padding": true,
35+
"margin": false
36+
},
37+
"typography": {
38+
"fontSize": true,
39+
"__experimentalFontFamily": true,
40+
"__experimentalDefaultControls": {
41+
"fontSize": true,
42+
"__experimentalFontFamily": true
43+
},
44+
"__experimentalSkipSerialization": true
45+
}
46+
},
47+
"providesContext": {
48+
"core/tab-label": "label"
49+
},
50+
"editorScript": "file:./index.js",
51+
"style": "file:./style-index.css"
52+
}

‎packages/block-library/src/tab/controls.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
InspectorControls,
6+
store as blockEditorStore,
7+
} from '@wordpress/block-editor';
8+
import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
9+
import { __ } from '@wordpress/i18n';
10+
import { useDispatch } from '@wordpress/data';
11+
import { decodeEntities } from '@wordpress/html-entities';
12+
13+
/**
14+
* Internal dependencies
15+
*/
16+
import AddTabToolbarControl from './add-tab-toolbar-control';
17+
import slugFromLabel from './slug-from-label';
18+
19+
export default function Controls( {
20+
attributes,
21+
setAttributes,
22+
tabsClientId,
23+
blockIndex,
24+
isDefaultTab,
25+
} ) {
26+
const { label } = attributes;
27+
28+
const { updateBlockAttributes } = useDispatch( blockEditorStore );
29+
30+
return (
31+
<>
32+
<AddTabToolbarControl
33+
tabsClientId={ tabsClientId }
34+
attributes={ attributes }
35+
/>
36+
<InspectorControls>
37+
<PanelBody title={ __( 'Tab Settings' ) }>
38+
<TextControl
39+
label={ __( 'Tab Label' ) }
40+
value={ decodeEntities( label ) }
41+
onChange={ ( value ) => {
42+
setAttributes( {
43+
label: value,
44+
anchor: slugFromLabel( value, blockIndex ),
45+
} );
46+
} }
47+
__next40pxDefaultSize
48+
__nextHasNoMarginBottom
49+
/>
50+
<ToggleControl
51+
label={ __( 'Is Default Tab' ) }
52+
checked={ isDefaultTab }
53+
onChange={ ( value ) => {
54+
updateBlockAttributes( tabsClientId, {
55+
activeTabIndex: value ? blockIndex : 0,
56+
} );
57+
} }
58+
help={ __(
59+
'If toggled, this tab will be selected when the page loads.'
60+
) }
61+
__nextHasNoMarginBottom
62+
/>
63+
</PanelBody>
64+
</InspectorControls>
65+
</>
66+
);
67+
}

0 commit comments

Comments
 (0)