@wordpress/block-library 9.38.1-next.v.0 → 9.39.0

package/src/tab/remove-tab-toolbar-control.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * "Remove Tab" button in the block toolbar for the tab block.
+ * Removes the currently active tab from the tab-panels block.
+ *
+ * @param {Object} props
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {JSX.Element} The toolbar control element.
+ */
+export default function RemoveTabToolbarControl( { tabsClientId } ) {
+	const {
+		removeBlock,
+		updateBlockAttributes,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Find the tab-panels block, active tab, and tab count within the tabs block
+	const { activeTabClientId, tabCount, editorActiveTabIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return {
+					activeTabClientId: null,
+					tabCount: 0,
+					editorActiveTabIndex: 0,
+				};
+			}
+			const { getBlocks, getBlockAttributes } =
+				select( blockEditorStore );
+			const tabsAttributes = getBlockAttributes( tabsClientId );
+			const activeIndex =
+				tabsAttributes?.editorActiveTabIndex ??
+				tabsAttributes?.activeTabIndex ??
+				0;
+			const innerBlocks = getBlocks( tabsClientId );
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			const tabs = tabPanels?.innerBlocks || [];
+			const activeTab = tabs[ activeIndex ];
+			return {
+				activeTabClientId: activeTab?.clientId || null,
+				tabCount: tabs.length,
+				editorActiveTabIndex: activeIndex,
+			};
+		},
+		[ tabsClientId ]
+	);
+
+	const removeTab = () => {
+		if ( ! activeTabClientId || tabCount <= 1 ) {
+			return;
+		}
+
+		// Calculate new active index after removal
+		const newActiveIndex =
+			editorActiveTabIndex >= tabCount - 1
+				? tabCount - 2 // If removing last tab, select the previous one
+				: editorActiveTabIndex; // Otherwise keep the same index (next tab shifts into position)
+
+		// Update the active tab index before removing
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newActiveIndex,
+		} );
+
+		// Remove the tab
+		removeBlock( activeTabClientId, false );
+
+		// Select the tabs block after removal
+		if ( tabsClientId ) {
+			selectBlock( tabsClientId );
+		}
+	};
+
+	// Don't show the button if there's only one tab or no active tab
+	const isDisabled = tabCount <= 1 || ! activeTabClientId;
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Remove the current tab' ) }
+					onClick={ removeTab }
+					showTooltip
+					text={ __( 'Remove Tab' ) }
+					disabled={ isDisabled }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/tab/save.js

@@ -3,14 +3,12 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function Save( { attributes } ) {
+export default function save( { attributes } ) {
 	const { anchor } = attributes;
 
 	const tabPanelId = anchor;
 
-	// eslint-disable-next-line react-compiler/react-compiler
 	const blockProps = useBlockProps.save();
-	// eslint-disable-next-line react-compiler/react-compiler
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
 	return <section { ...innerBlocksProps } id={ tabPanelId } />;

package/src/tab/style.scss

@@ -4,6 +4,13 @@
 	flex-grow: 1;
 	box-sizing: border-box;
 
+	& > *:first-child {
+		margin-top: 0;
+	}
+	& > *:last-child {
+		margin-bottom: 0;
+	}
+
 	&[hidden],
 	&:empty {
 		display: none !important;
@@ -13,7 +20,7 @@
 	}
 }
 
-.wp-block-tab.wp-block section.has-background,
+.wp-block-tab.wp-block.has-background,
 .wp-block-tab:not(.wp-block).has-background {
 	padding: var(--wp--preset--spacing--30);
 }

package/src/tab-panels/block.json

@@ -0,0 +1,70 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tab-panels",
+	"title": "Tab Panels",
+	"description": "Container for tab panel content in a tabbed interface.",
+	"version": "1.0.0",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [
+		"core/tabs"
+	],
+	"allowedBlocks": [
+		"core/tab"
+	],
+	"attributes": {},
+	"supports": {
+		"anchor": false,
+		"html": false,
+		"reusable": false,
+		"lock": false,
+		"dimensions": {
+			"aspectRatio": false,
+			"height": false,
+			"minHeight": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"heading": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"blockGap": false,
+			"padding": true,
+			"margin": 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"
+}

package/src/tab-panels/edit.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+
+const TAB_PANELS_TEMPLATE = [ [ 'core/tab', {} ] ];
+
+export default function Edit( { clientId } ) {
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TAB_PANELS_TEMPLATE,
+		templateLock: false,
+		renderAppender: false, // Appender handled by individual tab blocks
+	} );
+
+	// Get the parent tabs block clientId
+	const tabsClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/tab-panels/icon.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 4H20V20H4V4ZM5.5 5.5V18.5H18.5V5.5H5.5Z" />
+	</SVG>
+);

package/src/tab-panels/index.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import save from './save';
+import icon from './icon';
+
+import metadata from './block.json';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/tab-panels/save.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
+}

package/src/tab-panels/style.scss

@@ -0,0 +1,4 @@
+.wp-block-tab-panels {
+	flex-grow: 1;
+	min-width: 0;
+}

package/src/tabs/block.json

@@ -8,97 +8,53 @@
 	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
-	"allowedBlocks": [ "core/tab" ],
+	"allowedBlocks": [
+		"core/tabs-menu",
+		"core/tab-panels"
+	],
 	"attributes": {
-		"tabsId": {
-			"type": "string",
-			"default": ""
-		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal",
-			"enum": [ "horizontal", "vertical" ]
-		},
 		"activeTabIndex": {
 			"type": "number",
 			"default": 0
 		},
-		"tabInactiveColor": {
-			"type": "string"
-		},
-		"customTabInactiveColor": {
-			"type": "string"
-		},
-		"tabHoverColor": {
-			"type": "string"
-		},
-		"customTabHoverColor": {
-			"type": "string"
-		},
-		"tabActiveColor": {
-			"type": "string"
-		},
-		"customTabActiveColor": {
-			"type": "string"
-		},
-		"tabTextColor": {
-			"type": "string"
-		},
-		"customTabTextColor": {
-			"type": "string"
-		},
-		"tabActiveTextColor": {
-			"type": "string"
-		},
-		"customTabActiveTextColor": {
-			"type": "string"
-		},
-		"tabHoverTextColor": {
-			"type": "string"
-		},
-		"customTabHoverTextColor": {
-			"type": "string"
+		"editorActiveTabIndex": {
+			"type": "number",
+			"role": "local"
 		}
 	},
-	"styles": [
-		{
-			"name": "tab",
-			"label": "Tabs",
-			"isDefault": true
-		},
-		{
-			"name": "links",
-			"label": "Links"
-		},
-		{
-			"name": "button",
-			"label": "Button"
-		}
-	],
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"color": {
 			"text": false,
 			"background": false
 		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"justifyContent": "stretch",
+				"verticalAlignment": "stretch",
+				"orientation": "vertical"
+			},
+			"allowSwitching": false,
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowOrientation": true,
+			"allowSizingOnChildren": true
+		},
 		"html": false,
 		"interactivity": true,
 		"spacing": {
-			"blockGap": [ "horizontal", "vertical" ],
+			"blockGap": true,
 			"margin": true,
-			"padding": false
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
 		},
-		"__experimentalBorder": {
-			"radius": true,
-			"__experimentalSkipSerialization": true,
-			"__experimentalDefaultControls": {
-				"radius": true
-			}
-		}
+		"renaming": true
 	},
 	"example": {
 		"attributes": {
@@ -106,42 +62,57 @@
 		},
 		"innerBlocks": [
 			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 1"
-				},
+				"name": "core/tabs-menu",
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"name": "core/tabs-menu-item",
+						"attributes": {}
+					}
+				]
+			},
+			{
+				"name": "core/tab-panels",
+				"attributes": {},
 				"innerBlocks": [
 					{
-						"name": "core/paragraph",
+						"name": "core/tab",
 						"attributes": {
-							"content": "Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod. Aliqua aliqua sunt consequat consequat in duis deserunt."
+							"label": "Tab 1"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/paragraph",
+								"attributes": {
+									"content": "Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod."
+								}
+							}
+						]
+					},
+					{
+						"name": "core/tab",
+						"attributes": {
+							"label": "Tab 2"
 						}
 					},
 					{
-						"name": "core/paragraph",
+						"name": "core/tab",
 						"attributes": {
-							"content": "Adipisicing ullamco nisi in eu laborum adipisicing aliquip aliqua. Fugiat labore officia consequat nisi veniam velit commodo cillum enim duis quis ad."
+							"label": "Tab 3"
 						}
 					}
 				]
-			},
-			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 2"
-				}
-			},
-			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 3"
-				}
 			}
 		]
 	},
 	"providesContext": {
-		"core/tabs-id": "tabsId"
+		"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",