Skip to content

Commit c5d67ea

Browse files
adamsilversteinadamsilverstein
committed
Merge branch 'trunk' into 74366-add-retry-and-error-handling
2 parents ad49898 + b1870dd commit c5d67ea

Some content is hidden

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

56 files changed

+2587
-1387
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-editor/src/components/media-replace-flow/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,9 @@ const MediaReplaceFlow = ( {
239239
{ __( 'Use featured image' ) }
240240
</MenuItem>
241241
) }
242+
{ typeof children === 'function'
243+
? children( { onClose } )
244+
: children }
242245
{ mediaURL && onReset && (
243246
<MenuItem
244247
onClick={ () => {
@@ -249,9 +252,6 @@ const MediaReplaceFlow = ( {
249252
{ __( 'Reset' ) }
250253
</MenuItem>
251254
) }
252-
{ typeof children === 'function'
253-
? children( { onClose } )
254-
: children }
255255
</NavigableMenu>
256256
{ onSelectURL && (
257257
<form className="block-editor-media-flow__url-input">

‎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+
}

0 commit comments

Comments
 (0)