diff --git a/docs/reference-guides/core-blocks/README.md b/docs/reference-guides/core-blocks/README.md index 056723b042cf80..5d467bf944d1dc 100644 --- a/docs/reference-guides/core-blocks/README.md +++ b/docs/reference-guides/core-blocks/README.md @@ -1006,7 +1006,7 @@ Display the tab buttons for a tabbed interface. - **Experimental:** true - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Parent:** core/tabs -- **Supports:** color (background, text), dimensions (~~aspectRatio~~, ~~height~~, ~~minHeight~~, ~~width~~), layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~reusable~~, ~~visibility~~ +- **Supports:** color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ - **Attributes:** tabs ## Tab Panel @@ -1017,7 +1017,7 @@ Content for a tab in a tabbed interface. - **Experimental:** true - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Parent:** core/tab-panels -- **Supports:** anchor, color (background, text), layout, renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~, ~~visibility~~ +- **Supports:** anchor, color (background, text), layout, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~visibility~~ - **Attributes:** label ## Tab Panels @@ -1029,7 +1029,7 @@ Container for tab panel content in a tabbed interface. - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Parent:** core/tabs - **Allowed Blocks:** core/tab-panel -- **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~~, ~~visibility~~ +- **Supports:** color (background, heading, link, text), spacing (padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ ## Table @@ -1058,7 +1058,7 @@ Display content in a tabbed interface to help users navigate detailed content wi - **Experimental:** true - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Allowed Blocks:** core/tab-list, core/tab-panels -- **Supports:** align, anchor, color (background, text), interactivity, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowVerticalAlignment, default, ~~allowSwitching~~), renaming, spacing (blockGap, margin, padding), typography (fontSize), ~~html~~ +- **Supports:** align, anchor, color (background, text), interactivity, layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize), ~~html~~ - **Attributes:** activeTabIndex, editorActiveTabIndex ## Tag Cloud diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index aabcea04e5dc43..d329da73767407 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -76,7 +76,6 @@ @use "./tag-cloud/style.scss" as *; @use "./tab-list/style.scss" as *; @use "./tab-panel/style.scss" as *; -@use "./tab-panels/style.scss" as *; @use "./table/style.scss" as *; @use "./table-of-contents/style.scss" as *; @use "./tabs/style.scss" as *; diff --git a/packages/block-library/src/tab-list/README.md b/packages/block-library/src/tab-list/README.md index 3a02088ffd4162..33af182042e98a 100644 --- a/packages/block-library/src/tab-list/README.md +++ b/packages/block-library/src/tab-list/README.md @@ -28,28 +28,20 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._ - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false` -- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false` - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false` - [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false` -- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions): - - `aspectRatio`: `false` - - `height`: `false` - - `minHeight`: `false` - - `width`: `false` - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true` - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true` - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): - - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"}` - - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false` - - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true` - - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true` - - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true` + - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}` + - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false` + - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false` + - [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false` - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): - `padding`: `true` - - `margin`: `true` - `blockGap`: `true` ## Context diff --git a/packages/block-library/src/tab-list/block.json b/packages/block-library/src/tab-list/block.json index 124d6ce6504bcb..34d54c4f90d9f2 100644 --- a/packages/block-library/src/tab-list/block.json +++ b/packages/block-library/src/tab-list/block.json @@ -25,15 +25,8 @@ }, "supports": { "html": false, - "reusable": false, "visibility": false, "lock": false, - "dimensions": { - "aspectRatio": false, - "height": false, - "minHeight": false, - "width": false - }, "color": { "background": true, "text": true, @@ -56,23 +49,18 @@ }, "layout": { "default": { - "type": "flex", - "flexWrap": "nowrap", - "orientation": "horizontal" + "type": "flex" }, - "allowSwitching": false, - "allowVerticalAlignment": true, - "allowJustification": true, - "allowOrientation": true + "allowVerticalAlignment": false, + "allowOrientation": false, + "allowWrap": false }, "spacing": { "padding": true, - "margin": true, "blockGap": true, "__experimentalSkipSerialization": [ "padding" ], "__experimentalDefaultControls": { "padding": true, - "margin": true, "blockGap": true } } @@ -87,7 +75,6 @@ "padding": ".wp-block-tab-list button" } }, - "editorScript": "file:./index.js", - "editorStyle": "file:./editor.css", - "style": "file:./style-index.css" + "editorStyle": "wp-block-tab-list-editor", + "style": "wp-block-tab-list" } diff --git a/packages/block-library/src/tab-panel/README.md b/packages/block-library/src/tab-panel/README.md index fd2305f704b829..944610f367cfb9 100644 --- a/packages/block-library/src/tab-panel/README.md +++ b/packages/block-library/src/tab-panel/README.md @@ -29,7 +29,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true` - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false` -- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false` - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true` - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true` @@ -37,10 +36,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): - `blockGap`: `true` - `padding`: `true` - - `margin`: `false` - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` -- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true` - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false` ## Context diff --git a/packages/block-library/src/tab-panel/block.json b/packages/block-library/src/tab-panel/block.json index 3bb6c2814b5868..c9745bc3267050 100644 --- a/packages/block-library/src/tab-panel/block.json +++ b/packages/block-library/src/tab-panel/block.json @@ -22,7 +22,6 @@ "supports": { "anchor": true, "html": false, - "reusable": false, "color": { "background": true, "text": true, @@ -34,8 +33,7 @@ "layout": true, "spacing": { "blockGap": true, - "padding": true, - "margin": false + "padding": true }, "typography": { "fontSize": true, @@ -45,12 +43,10 @@ "__experimentalFontFamily": true } }, - "renaming": true, "visibility": false }, "providesContext": { "core/tab-label": "label" }, - "editorScript": "file:./index.js", - "style": "file:./style-index.css" + "style": "wp-block-tab-panel" } diff --git a/packages/block-library/src/tab-panel/style.scss b/packages/block-library/src/tab-panel/style.scss index 509020336c1926..495a6c37ea8a24 100644 --- a/packages/block-library/src/tab-panel/style.scss +++ b/packages/block-library/src/tab-panel/style.scss @@ -1,23 +1,6 @@ .wp-block-tab-panel { - max-width: 100%; - flex-basis: 100%; - flex-grow: 1; - box-sizing: border-box; - - & > *:first-child { - margin-top: 0; - } - & > *:last-child { - margin-bottom: 0; - } - &[hidden], &:empty { display: none !important; } } - -.wp-block-tab-panel.wp-block.has-background, -.wp-block-tab-panel:not(.wp-block).has-background { - padding: var(--wp--preset--spacing--30); -} diff --git a/packages/block-library/src/tab-panels/README.md b/packages/block-library/src/tab-panels/README.md index 7d1d1a8e194f3c..bac8c2012ced97 100644 --- a/packages/block-library/src/tab-panels/README.md +++ b/packages/block-library/src/tab-panels/README.md @@ -28,34 +28,18 @@ _This block has no custom attributes._ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._ -- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `false` - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false` -- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false` - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false` - [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false` -- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions): - - `aspectRatio`: `false` - - `height`: `false` - - `minHeight`: `false` - - `width`: `false` - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true` - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true` - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true` - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true` - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): - - `blockGap`: `false` - `padding`: `true` - - `margin`: `true` - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` -- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): - - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","justifyContent":"stretch","orientation":"vertical"}` - - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false` - - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false` - - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false` - - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true` - - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `false` ## Block Markup diff --git a/packages/block-library/src/tab-panels/block.json b/packages/block-library/src/tab-panels/block.json index 9349999617a7ab..7e6a6139ed9ae2 100644 --- a/packages/block-library/src/tab-panels/block.json +++ b/packages/block-library/src/tab-panels/block.json @@ -11,17 +11,9 @@ "allowedBlocks": [ "core/tab-panel" ], "attributes": {}, "supports": { - "anchor": false, "html": false, - "reusable": false, "visibility": false, "lock": false, - "dimensions": { - "aspectRatio": false, - "height": false, - "minHeight": false, - "width": false - }, "color": { "background": true, "text": true, @@ -33,34 +25,17 @@ } }, "spacing": { - "blockGap": false, - "padding": true, - "margin": true + "padding": true }, "typography": { "fontSize": true, "__experimentalFontFamily": true }, - "layout": { - "default": { - "type": "flex", - "flexWrap": "nowrap", - "justifyContent": "stretch", - "orientation": "vertical" - }, - "allowSwitching": false, - "allowVerticalAlignment": false, - "allowOrientation": false, - "allowJustification": true, - "allowSizingOnChildren": false - }, "__experimentalBorder": { "radius": true, "color": true, "width": true, "style": true } - }, - "editorScript": "file:./index.js", - "style": "file:./style-index.css" + } } diff --git a/packages/block-library/src/tab-panels/style.scss b/packages/block-library/src/tab-panels/style.scss deleted file mode 100644 index 51159d6f86a22a..00000000000000 --- a/packages/block-library/src/tab-panels/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.wp-block-tab-panels { - flex-grow: 1; - min-width: 0; -} diff --git a/packages/block-library/src/tabs/README.md b/packages/block-library/src/tabs/README.md index 04a0e8bc66b013..b9242d5dc80d70 100644 --- a/packages/block-library/src/tabs/README.md +++ b/packages/block-library/src/tabs/README.md @@ -35,12 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true` - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true` - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): - - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","justifyContent":"stretch","verticalAlignment":"stretch","orientation":"vertical"}` - - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false` - - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true` - - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true` - - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true` - - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true` + - [`allowEditing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowediting): `false` - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false` - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true` - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): @@ -49,7 +44,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - `padding`: `true` - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` -- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true` ## Context diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json index b35e14d4f33502..e09b6f12409e24 100644 --- a/packages/block-library/src/tabs/block.json +++ b/packages/block-library/src/tabs/block.json @@ -30,18 +30,7 @@ } }, "layout": { - "default": { - "type": "flex", - "flexWrap": "nowrap", - "justifyContent": "stretch", - "verticalAlignment": "stretch", - "orientation": "vertical" - }, - "allowSwitching": false, - "allowVerticalAlignment": true, - "allowJustification": true, - "allowOrientation": true, - "allowSizingOnChildren": true + "allowEditing": false }, "html": false, "interactivity": true, @@ -53,16 +42,13 @@ "typography": { "fontSize": true, "__experimentalFontFamily": true - }, - "renaming": true + } }, "providesContext": { "core/tabs-activeTabIndex": "activeTabIndex", "core/tabs-editorActiveTabIndex": "editorActiveTabIndex" }, "usesContext": [ "core/tabs-list", "core/tabs-id" ], - "editorScript": "file:./index.js", - "editorStyle": "file:./index.css", - "style": "file:./style-index.css", + "style": "wp-block-tabs", "viewScriptModule": "@wordpress/block-library/tabs/view" } diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js index 1ddabebb9eda39..4d90a06076b3a6 100644 --- a/packages/block-library/src/tabs/edit.js +++ b/packages/block-library/src/tabs/edit.js @@ -32,7 +32,7 @@ const EMPTY_ARRAY = []; */ const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ]; -function Edit( { clientId, attributes, setAttributes } ) { +function Edit( { clientId, attributes } ) { const { anchor, activeTabIndex, editorActiveTabIndex } = attributes; const { tabPanels, tabListClientId } = useSelect( @@ -93,11 +93,7 @@ function Edit( { clientId, attributes, setAttributes } ) { return (
- + { innerBlockProps.children }
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php index 59842ac6141239..33e04e576e509f 100644 --- a/packages/block-library/src/tabs/index.php +++ b/packages/block-library/src/tabs/index.php @@ -96,30 +96,17 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte return ''; } - $is_vertical = false; - $tag_processor = new WP_HTML_Tag_Processor( $content ); $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) ); $tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' ); - // Inspect inside the tab-list to see if its vertical or not. - $tag_processor->set_bookmark( 'core/tabs_wrapper' ); - while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs-list' ) ) ) { - if ( $tag_processor->has_class( 'is-vertical' ) ) { - $is_vertical = true; - break; - } - } - $tag_processor->seek( 'core/tabs_wrapper' ); - $tag_processor->set_attribute( 'data-wp-context', wp_json_encode( array( 'tabsId' => $tabs_id, 'activeTabIndex' => $active_tab_index, - 'isVertical' => $is_vertical, ) ) ); diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js index 4aba2d0b7b36a8..66cc3e0bd3ace3 100644 --- a/packages/block-library/src/tabs/view.js +++ b/packages/block-library/src/tabs/view.js @@ -102,24 +102,16 @@ const { actions: privateActions, state: privateState } = store( * @param {KeyboardEvent} event The keydown event. */ handleTabKeyDown: withSyncEvent( ( event ) => { - const context = getContext(); - const { isVertical } = context; const { tabIndex } = privateState; if ( tabIndex === null ) { return; } - if ( event.key === 'ArrowRight' && ! isVertical ) { - event.preventDefault(); - privateActions.moveFocus( tabIndex + 1 ); - } else if ( event.key === 'ArrowLeft' && ! isVertical ) { - event.preventDefault(); - privateActions.moveFocus( tabIndex - 1 ); - } else if ( event.key === 'ArrowDown' && isVertical ) { + if ( event.key === 'ArrowRight' ) { event.preventDefault(); privateActions.moveFocus( tabIndex + 1 ); - } else if ( event.key === 'ArrowUp' && isVertical ) { + } else if ( event.key === 'ArrowLeft' ) { event.preventDefault(); privateActions.moveFocus( tabIndex - 1 ); }