Skip to content

Block Library: Fix Tabs block losing added tabs when the editor is reopened #78250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
talldan merged 3 commits into from
May 14, 2026
Merged

Block Library: Fix Tabs block losing added tabs when the editor is reopened #78250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a212a85
Block Library: Fix Tabs block losing added tabs on editor reopen
Mustafabharmal May 13, 2026
0414a34
Block Library: Add default template for tab-list block
Mustafabharmal May 13, 2026
9eb3c44
Merge branch 'trunk' into fix/tabs-block-added-tabs-disappear-78241
Mustafabharmal May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/block-library/src/tab-list/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';

const TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];

function Edit( { clientId } ) {
const tabsClientId = useSelect(
( select ) =>
Expand All @@ -26,6 +28,7 @@ function Edit( { clientId } ) {
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: [ 'core/tab' ],
orientation: 'horizontal',
template: TAB_LIST_TEMPLATE,
templateLock: false,
renderAppender: false,
} );
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/tab-panels/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,23 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';

const TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel', {} ] ];
/**
* Initial template applied only when the block is first inserted (i.e. when
* inner blocks are empty). templateLock is false, so this is never applied to
* existing blocks that already have tab panels saved.
*/
const TAB_PANELS_TEMPLATE = [
[ 'core/tab-panel', { label: __( 'Tab' ) } ],
[ 'core/tab-panel', { label: __( 'Tab' ) } ],
];

export default function Edit( { clientId } ) {
const blockProps = useBlockProps();
Expand Down
44 changes: 13 additions & 31 deletions packages/block-library/src/tabs/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useMemo, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -19,36 +18,19 @@ import useTabListSync from './use-tab-list-sync';

const EMPTY_ARRAY = [];

const TABS_TEMPLATE = [
[
'core/tab-list',
{},
[
[ 'core/tab', {} ],
[ 'core/tab', {} ],
],
],
[
'core/tab-panels',
{},
[
[
'core/tab-panel',
{
label: __( 'Tab' ),
},
[ [ 'core/paragraph' ] ],
],
[
'core/tab-panel',
{
label: __( 'Tab' ),
},
[ [ 'core/paragraph' ] ],
],
],
],
];
/**
* Only the two structural child blocks are specified here — without inner
* block entries for core/tab-list or core/tab-panels.
*
* If inner blocks were included in this template, `synchronizeBlocksWithTemplate`
* (called whenever templateLock === 'all') would recurse into the containers and
* truncate them to the template count, causing data loss when a saved block with
* more than two tabs is re-opened in the editor.
*
* Initial tab/panel creation is delegated to the tab-panels template in
* tab-panels/edit.js (templateLock: false, applied only when empty).
*/
const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];

function Edit( { clientId, attributes, setAttributes } ) {
const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
Expand Down
Loading