@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.2.0

package/src/tabs/README.md

@@ -1,8 +1,6 @@
 # Tabs
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Display content in a tabbed interface to help users navigate detailed content with ease.
 
 - **Name:** `core/tabs`
@@ -54,18 +52,29 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `core/tabs-list`
 - `core/tabs-id`
 
-**Provides context:**
-
-- `core/tabs-activeTabIndex` → attribute `activeTabIndex`
-- `core/tabs-editorActiveTabIndex` → attribute `editorActiveTabIndex`
-
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
 
 ```html
-<!-- wp:tabs {"activeTabIndex":0} -->
-<!-- Content... -->
+<!-- wp:tabs -->
+<div class="wp-block-tabs"><!-- wp:tab-list -->
+<div role="tablist" class="wp-block-tab-list"><button type="button" role="tab">Tab 1</button><button type="button" role="tab">Tab 2</button></div>
+<!-- /wp:tab-list -->
+
+<!-- wp:tab-panels -->
+<div class="wp-block-tab-panels"><!-- wp:tab-panel {"label":"Tab 1"} -->
+<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
+<p>Panel 1</p>
+<!-- /wp:paragraph --></section>
+<!-- /wp:tab-panel -->
+
+<!-- wp:tab-panel {"label":"Tab 2"} -->
+<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
+<p>Panel 2</p>
+<!-- /wp:paragraph --></section>
+<!-- /wp:tab-panel --></div>
+<!-- /wp:tab-panels --></div>
 <!-- /wp:tabs -->
 ```
 

package/src/tabs/block.json

@@ -1,6 +1,5 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"__experimental": true,
 	"apiVersion": 3,
 	"name": "core/tabs",
 	"title": "Tabs",
@@ -44,10 +43,6 @@
 			"__experimentalFontFamily": true
 		}
 	},
-	"providesContext": {
-		"core/tabs-activeTabIndex": "activeTabIndex",
-		"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
-	},
 	"usesContext": [ "core/tabs-list", "core/tabs-id" ],
 	"style": "wp-block-tabs",
 	"viewScriptModule": "@wordpress/block-library/tabs/view"

package/src/tabs/edit.js

@@ -1,14 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	BlockContextProvider,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -16,8 +9,6 @@ import { useMemo } from '@wordpress/element';
 import TabToolbarControls from './tab-toolbar-controls';
 import useTabListItemsSync from './use-tab-list-items-sync';
 
-const EMPTY_ARRAY = [];
-
 /**
  * Only the two structural child blocks are specified here — without inner
  * block entries for core/tab-list or core/tab-panels.
@@ -32,54 +23,8 @@ const EMPTY_ARRAY = [];
  */
 const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];
 
-function Edit( { clientId, attributes } ) {
-	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
-
-	const { tabPanels, tabListClientId } = useSelect(
-		( select ) => {
-			const { getBlocks } = select( blockEditorStore );
-			const innerBlocks = getBlocks( clientId );
-
-			const tabPanelsBlock = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panels'
-			);
-			const tabList = innerBlocks.find(
-				( block ) => block.name === 'core/tab-list'
-			);
-
-			return {
-				tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
-				tabListClientId: tabList?.clientId ?? null,
-			};
-		},
-		[ clientId ]
-	);
-
-	useTabListItemsSync( { tabPanels, tabListClientId } );
-
-	/**
-	 * Memoize context value to prevent unnecessary re-renders.
-	 */
-	const contextValue = useMemo( () => {
-		/**
-		 * Compute tabs list from innerblocks to provide via context.
-		 * This traverses the tab-panels block to find all tab-panel blocks
-		 * and extracts their label and anchor for the tab-list to consume.
-		 */
-		const tabList = tabPanels.map( ( tab, index ) => ( {
-			id: tab.attributes.anchor || `tab-${ index }`,
-			label: tab.attributes.label || '',
-			clientId: tab.clientId,
-			index,
-		} ) );
-
-		return {
-			'core/tabs-list': tabList,
-			'core/tabs-id': anchor,
-			'core/tabs-activeTabIndex': activeTabIndex,
-			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
-		};
-	}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );
+function Edit( { clientId } ) {
+	useTabListItemsSync( clientId );
 
 	const blockProps = useBlockProps();
 
@@ -91,12 +36,10 @@ function Edit( { clientId, attributes } ) {
 	} );
 
 	return (
-		<BlockContextProvider value={ contextValue }>
-			<div { ...innerBlockProps }>
-				<TabToolbarControls tabsClientId={ clientId } />
-				{ innerBlockProps.children }
-			</div>
-		</BlockContextProvider>
+		<div { ...innerBlockProps }>
+			<TabToolbarControls tabsClientId={ clientId } />
+			{ innerBlockProps.children }
+		</div>
 	);
 }
 

package/src/tabs/use-tab-list-items-sync.js

@@ -5,6 +5,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
+const EMPTY_ARRAY = [];
+
 /**
  * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.
  *
@@ -12,11 +14,29 @@ import { useEffect } from '@wordpress/element';
  * label edit), this hook updates the `tabs` attribute on the core/tab-list
  * block so that save.js can render the correct buttons.
  *
- * @param {Object}      props
- * @param {Array}       props.tabPanels       Raw core/tab-panel block objects.
- * @param {string|null} props.tabListClientId Client ID of the core/tab-list block.
+ * @param {string} tabsClientId Client ID of the core/tabs block.
  */
-export default function useTabListItemsSync( { tabPanels, tabListClientId } ) {
+export default function useTabListItemsSync( tabsClientId ) {
+	const { tabPanels, tabListClientId } = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( tabsClientId );
+
+			const tabPanelsBlock = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			const tabList = innerBlocks.find(
+				( block ) => block.name === 'core/tab-list'
+			);
+
+			return {
+				tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
+				tabListClientId: tabList?.clientId ?? null,
+			};
+		},
+		[ tabsClientId ]
+	);
+
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const { getBlockAttributes } = useSelect( blockEditorStore );

package/src/template-part/index.php

@@ -150,22 +150,7 @@ function render_block_core_template_part( $attributes ) {
 	}
 
 	// Run through the actions that are typically taken on the_content.
-	$content                       = shortcode_unautop( $content );
-	$content                       = do_shortcode( $content );
-	$seen_ids[ $template_part_id ] = true;
-	$content                       = do_blocks( $content );
-	unset( $seen_ids[ $template_part_id ] );
-	$content = wptexturize( $content );
-	$content = convert_smilies( $content );
-	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
-
-	/**
-	 * Handle embeds for block template parts.
-	 *
-	 * @global WP_Embed $wp_embed WordPress Embed object.
-	 */
-	global $wp_embed;
-	$content = $wp_embed->autoembed( $content );
+	$content = _wp_apply_block_content_filters( $content, "template_part_{$area}", $seen_ids, $template_part_id );
 
 	if ( empty( $attributes['tagName'] ) || tag_escape( $attributes['tagName'] ) !== $attributes['tagName'] ) {
 		$area_tag = 'div';

package/src/term-name/README.md

@@ -15,7 +15,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `textAlign` | `string` | — | — |
 | `level` | `number` | `0` | — |
 | `isLink` | `boolean` | `false` | — |
 | `levelOptions` | `array` | — | — |
@@ -35,6 +34,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/term-name/block.json

@@ -9,9 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "termId", "taxonomy" ],
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"level": {
 			"type": "number",
 			"default": 0
@@ -43,6 +40,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/term-name/deprecated.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 0,
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return !! attributes.textAlign;
+	},
+	save: () => null,
+};
+
+export default [ v1 ];

package/src/term-name/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	BlockControls,
-	AlignmentControl,
 	InspectorControls,
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
@@ -32,18 +26,14 @@ export default function TermNameEdit( {
 	setAttributes,
 	context: { termId, taxonomy },
 } ) {
-	const { textAlign, level = 0, isLink, levelOptions } = attributes;
+	const { level = 0, isLink, levelOptions } = attributes;
 	const { term } = useTermName( termId, taxonomy );
 
 	const termName = term?.name
 		? decodeEntities( term.name )
 		: __( 'Term Name' );
 
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -71,12 +61,6 @@ export default function TermNameEdit( {
 						setAttributes( { level: newLevel } );
 					} }
 				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
 			</BlockControls>
 			<InspectorControls>
 				<ToolsPanel

package/src/term-name/index.js

@@ -9,6 +9,7 @@ import { termName as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -17,6 +18,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/utils/media-control.scss

@@ -16,7 +16,7 @@
 
 		button.components-button {
 			color: $gray-900;
-			box-shadow: inset 0 0 0 1px $gray-400;
+			border-color: $gray-400;
 			width: 100%;
 			display: block;
 			height: $grid-unit-50;
@@ -25,10 +25,6 @@
 			&:hover {
 				color: var(--wp-admin-theme-color);
 			}
-
-			&:focus {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
 		}
 	}
 }