@wordpress/block-library 9.38.0 → 9.39.0

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",

package/src/tabs/controls.js

@@ -2,161 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, PanelBody, TextControl } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import {
-	ContrastChecker,
-	InspectorControls,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
 
-function ContrastCheckerMatrix( { attributes } ) {
+export default function Controls( { attributes, setAttributes, clientId } ) {
 	const {
-		className,
-		fontSize,
-		tabActiveColor,
-		customTabActiveColor,
-		tabActiveTextColor,
-		customTabActiveTextColor,
-		tabInactiveColor,
-		customTabInactiveColor,
-		tabTextColor,
-		customTabTextColor,
-		tabHoverColor,
-		customTabHoverColor,
-		tabHoverTextColor,
-		customTabHoverTextColor,
-	} = attributes;
-
-	const activeBackground = useMemo( () => {
-		if ( className?.includes( 'is-style-links' ) ) {
-			return '#fff';
-		}
-		if ( tabActiveColor?.color ) {
-			return tabActiveColor.color;
-		}
-		return customTabActiveColor;
-	}, [ tabActiveColor, customTabActiveColor, className ] );
-
-	const activeText = useMemo( () => {
-		if ( tabActiveTextColor?.color ) {
-			return tabActiveTextColor.color;
-		}
-		return customTabActiveTextColor;
-	}, [ tabActiveTextColor, customTabActiveTextColor ] );
-
-	const inactiveBackground = useMemo( () => {
-		if ( className?.includes( 'is-style-links' ) ) {
-			return '#fff';
-		}
-		if ( tabInactiveColor?.color ) {
-			return tabInactiveColor.color;
-		}
-		return customTabInactiveColor;
-	}, [ tabInactiveColor, customTabInactiveColor, className ] );
-
-	const inactiveText = useMemo( () => {
-		if ( tabTextColor?.color ) {
-			return tabTextColor.color;
-		}
-		return customTabTextColor;
-	}, [ tabTextColor, customTabTextColor ] );
-
-	const hoverBackground = useMemo( () => {
-		if ( tabHoverColor?.color ) {
-			return tabHoverColor.color;
-		}
-		return customTabHoverColor;
-	}, [ tabHoverColor, customTabHoverColor ] );
-
-	const hoverText = useMemo( () => {
-		if ( tabHoverTextColor?.color ) {
-			return tabHoverTextColor.color;
-		}
-		return customTabHoverTextColor;
-	}, [ tabHoverTextColor, customTabHoverTextColor ] );
-
-	return (
-		<>
-			<ContrastChecker
-				backgroundColor={ activeBackground }
-				fontSize={ fontSize }
-				textColor={ activeText }
-			/>
-			<ContrastChecker
-				backgroundColor={ inactiveBackground }
-				fontSize={ fontSize }
-				textColor={ inactiveText }
-			/>
-			<ContrastChecker
-				backgroundColor={ hoverBackground }
-				fontSize={ fontSize }
-				textColor={ hoverText }
-			/>
-		</>
-	);
-}
-
-export default function Controls( {
-	attributes,
-	setAttributes,
-	clientId,
-	tabInactiveColor,
-	setTabInactiveColor,
-	tabHoverColor,
-	setTabHoverColor,
-	tabActiveColor,
-	setTabActiveColor,
-	tabTextColor,
-	setTabTextColor,
-	tabActiveTextColor,
-	setTabActiveTextColor,
-	tabHoverTextColor,
-	setTabHoverTextColor,
-} ) {
-	const {
-		customTabInactiveColor,
-		customTabActiveColor,
-		customTabHoverColor,
-		customTabTextColor,
-		customTabActiveTextColor,
-		customTabHoverTextColor,
-		orientation,
 		metadata = {
 			name: '',
 		},
 	} = attributes;
-	/**
-	 * Get the color settings for the block.
-	 */
-	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	return (
 		<>
-			<AddTabToolbarControl
-				tabsClientId={ clientId }
-				attributes={ attributes }
-			/>
+			<AddTabToolbarControl tabsClientId={ clientId } />
+			<RemoveTabToolbarControl tabsClientId={ clientId } />
 			<InspectorControls>
-				<PanelBody title={ __( 'Tabs Settings' ) }>
-					<ToggleControl
-						label={ __( 'Vertical Tabs' ) }
-						checked={ 'vertical' === orientation }
-						onChange={ () =>
-							setAttributes( {
-								orientation:
-									'vertical' === orientation
-										? 'horizontal'
-										: 'vertical',
-							} )
-						}
-					/>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						label={ __( 'Tabs Title' ) }
 						help={ __(
@@ -173,87 +40,6 @@ export default function Controls( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					settings={ [
-						{
-							label: __( 'Tab Active Background' ),
-							colorValue:
-								tabActiveColor?.color ?? customTabActiveColor,
-							onColorChange: ( value ) => {
-								setTabActiveColor( value );
-								setAttributes( {
-									customTabActiveColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Active Text' ),
-							colorValue:
-								tabActiveTextColor?.color ??
-								customTabActiveTextColor,
-							onColorChange: ( value ) => {
-								setTabActiveTextColor( value );
-								setAttributes( {
-									customTabActiveTextColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Inactive Background' ),
-							colorValue:
-								tabInactiveColor?.color ??
-								customTabInactiveColor,
-							onColorChange: ( value ) => {
-								setTabInactiveColor( value );
-								setAttributes( {
-									customTabInactiveColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Inactive Text' ),
-							colorValue:
-								tabTextColor?.color ?? customTabTextColor,
-							onColorChange: ( value ) => {
-								setTabTextColor( value );
-								setAttributes( {
-									customTabTextColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Hover Background' ),
-							colorValue:
-								tabHoverColor?.color ?? customTabHoverColor,
-							onColorChange: ( value ) => {
-								setTabHoverColor( value );
-								setAttributes( {
-									customTabHoverColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Hover Text' ),
-							colorValue:
-								tabHoverTextColor?.color ??
-								customTabHoverTextColor,
-							onColorChange: ( value ) => {
-								setTabHoverTextColor( value );
-								setAttributes( {
-									customTabHoverTextColor: value,
-								} );
-							},
-						},
-					] }
-					panelId={ clientId }
-					disableCustomColors={ false }
-					__experimentalIsRenderedInSidebar
-					__next40pxDefaultSize
-					{ ...colorSettings }
-				/>
-				<ContrastCheckerMatrix attributes={ attributes } />
-			</InspectorControls>
 		</>
 	);
 }