@wordpress/block-library 9.30.0 → 9.30.1-next.6f42e1382.0

package/src/search/edit.js

@@ -228,7 +228,17 @@ export default function SearchEdit( {
 		);
 		const textFieldStyles = {
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 			...typographyProps.style,
 			textDecoration: undefined,
@@ -269,7 +279,17 @@ export default function SearchEdit( {
 			...colorProps.style,
 			...typographyProps.style,
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 		};
 		const handleButtonClick = () => {
@@ -495,8 +515,13 @@ export default function SearchEdit( {
 		</>
 	);
 
+	const isNonZeroBorderRadius = ( radius ) =>
+		radius !== undefined && parseInt( radius, 10 ) !== 0;
+
 	const padBorderRadius = ( radius ) =>
-		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
+		isNonZeroBorderRadius( radius )
+			? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`
+			: undefined;
 
 	const getWrapperStyles = () => {
 		const styles = isButtonPositionInside
@@ -512,10 +537,7 @@ export default function SearchEdit( {
 						borderProps.style?.borderBottomRightRadius,
 			  };
 
-		const isNonZeroBorderRadius =
-			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
-
-		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
+		if ( isButtonPositionInside ) {
 			// We have button inside wrapper and a border radius value to apply.
 			// Add default padding so we don't get "fat" corners.
 			//
@@ -524,15 +546,24 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const { topLeft, topRight, bottomLeft, bottomRight } =
-					borderRadius;
+				const {
+					borderTopLeftRadius,
+					borderTopRightRadius,
+					borderBottomLeftRadius,
+					borderBottomRightRadius,
+				} = borderProps.style;
 
 				return {
 					...styles,
-					borderTopLeftRadius: padBorderRadius( topLeft ),
-					borderTopRightRadius: padBorderRadius( topRight ),
-					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
-					borderBottomRightRadius: padBorderRadius( bottomRight ),
+					borderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),
+					borderTopRightRadius:
+						padBorderRadius( borderTopRightRadius ),
+					borderBottomLeftRadius: padBorderRadius(
+						borderBottomLeftRadius
+					),
+					borderBottomRightRadius: padBorderRadius(
+						borderBottomRightRadius
+					),
 				};
 			}
 

package/src/search/index.php

@@ -372,6 +372,13 @@ function styles_for_block_core_search( $attributes ) {
 		if ( is_array( $border_radius ) ) {
 			// Apply styles for individual corner border radii.
 			foreach ( $border_radius as $key => $value ) {
+				// Get border-radius CSS variable from preset value if provided.
+				if ( is_string( $value ) && str_contains( $value, 'var:preset|border-radius|' ) ) {
+					$index_to_splice = strrpos( $value, '|' ) + 1;
+					$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
+					$value           = "var(--wp--preset--border-radius--$slug)";
+				}
+
 				if ( null !== $value ) {
 					// Convert camelCase key to kebab-case.
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
@@ -387,7 +394,7 @@ function styles_for_block_core_search( $attributes ) {
 
 					// Add adjusted border radius styles for the wrapper element
 					// if button is positioned inside.
-					if ( $is_button_inside && intval( $value ) !== 0 ) {
+					if ( $is_button_inside && ( intval( $value ) !== 0 || str_contains( $value, 'var(--wp--preset--border-radius--' ) ) ) {
 						$wrapper_styles[] = sprintf(
 							'border-%s-radius: calc(%s + %s);',
 							esc_attr( $name ),
@@ -399,7 +406,14 @@ function styles_for_block_core_search( $attributes ) {
 			}
 		} else {
 			// Numeric check is for backwards compatibility purposes.
-			$border_radius   = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
+			$border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
+			// Get border-radius CSS variable from preset value if provided.
+			if ( is_string( $border_radius ) && str_contains( $border_radius, 'var:preset|border-radius|' ) ) {
+				$index_to_splice = strrpos( $border_radius, '|' ) + 1;
+				$slug            = _wp_to_kebab_case( substr( $border_radius, $index_to_splice ) );
+				$border_radius   = "var(--wp--preset--border-radius--$slug)";
+			}
+
 			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
 			$input_styles[]  = $border_style;
 			$button_styles[] = $border_style;

package/src/search/style.scss

@@ -37,21 +37,6 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	width: 100%;
 }
 
-.wp-block-search__input {
-	padding: $grid-unit-10;
-	flex-grow: 1;
-	margin-left: 0;
-	margin-right: 0;
-	min-width: 3rem;
-	border: 1px solid $gray-600;
-	// !important used to forcibly prevent undesired application of
-	// text-decoration styles on the input field.
-	text-decoration: unset !important;
-
-	// Hides a redundant extra search icon on Mobile Safari.
-	appearance: initial;
-}
-
 .wp-block-search.wp-block-search__button-only {
 	.wp-block-search__button {
 		margin-left: 0;
@@ -104,12 +89,26 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	letter-spacing: inherit;
 	text-transform: inherit;
 	font-style: inherit;
+	padding: $grid-unit-10;
+	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
+	// !important used to forcibly prevent undesired application of
+	// text-decoration styles on the input field.
+	text-decoration: unset !important;
+
+	// Hides a redundant extra search icon on Mobile Safari.
+	appearance: initial;
 }
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
-	border: 1px solid $gray-600;
+	border-width: 1px;
+	border-style: solid;
+	border-color: $gray-600;
 	background-color: $white;
 	box-sizing: border-box;
 

package/src/social-links/block.json

@@ -94,7 +94,8 @@
 				"width": true,
 				"style": true
 			}
-		}
+		},
+		"contentRole": true
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/style.scss

@@ -68,6 +68,8 @@
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
+@import "./term-template/style.scss";
+@import "./terms-query/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";

package/src/table-of-contents/block.json

@@ -22,6 +22,10 @@
 		},
 		"maxLevel": {
 			"type": "number"
+		},
+		"ordered": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/table-of-contents/edit.js

@@ -20,10 +20,16 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { store as noticeStore } from '@wordpress/notices';
-import { tableOfContents as icon } from '@wordpress/icons';
+import {
+	tableOfContents as icon,
+	formatListBullets,
+	formatListBulletsRTL,
+	formatListNumbered,
+	formatListNumberedRTL,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,13 +49,19 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * @param {HeadingData[]}                props.attributes.headings               The list of data for each heading in the post.
  * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).
  * @param {number|undefined}             props.attributes.maxLevel               The maximum heading level to include, or null to include all levels.
+ * @param {boolean}                      props.attributes.ordered                Whether to display as an ordered list (true) or unordered list (false).
  * @param {string}                       props.clientId                          The client id.
  * @param {(attributes: Object) => void} props.setAttributes                     The set attributes function.
  *
  * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
-	attributes: { headings = [], onlyIncludeCurrentPage, maxLevel },
+	attributes: {
+		headings = [],
+		onlyIncludeCurrentPage,
+		maxLevel,
+		ordered = true,
+	},
 	clientId,
 	setAttributes,
 } ) {
@@ -86,27 +98,48 @@ export default function TableOfContentsEdit( {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const headingTree = linearToNestedHeadingList( headings );
 
-	const toolbarControls = canInsertList && (
+	const toolbarControls = (
 		<BlockControls>
 			<ToolbarGroup>
 				<ToolbarButton
-					onClick={ () =>
-						replaceBlocks(
-							clientId,
-							createBlock( 'core/list', {
-								ordered: true,
-								values: renderToString(
-									<TableOfContentsList
-										nestedHeadingList={ headingTree }
-									/>
-								),
-							} )
-						)
+					icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+					title={ __( 'Unordered' ) }
+					description={ __( 'Convert to unordered list' ) }
+					onClick={ () => setAttributes( { ordered: false } ) }
+					isActive={ ordered === false }
+				/>
+				<ToolbarButton
+					icon={
+						isRTL() ? formatListNumberedRTL : formatListNumbered
 					}
-				>
-					{ __( 'Convert to static list' ) }
-				</ToolbarButton>
+					title={ __( 'Ordered' ) }
+					description={ __( 'Convert to ordered list' ) }
+					onClick={ () => setAttributes( { ordered: true } ) }
+					isActive={ ordered === true }
+				/>
 			</ToolbarGroup>
+			{ canInsertList && (
+				<ToolbarGroup>
+					<ToolbarButton
+						onClick={ () =>
+							replaceBlocks(
+								clientId,
+								createBlock( 'core/list', {
+									ordered,
+									values: renderToString(
+										<TableOfContentsList
+											nestedHeadingList={ headingTree }
+											ordered={ ordered }
+										/>
+									),
+								} )
+							)
+						}
+					>
+						{ __( 'Convert to static list' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 		</BlockControls>
 	);
 
@@ -118,6 +151,7 @@ export default function TableOfContentsEdit( {
 					setAttributes( {
 						onlyIncludeCurrentPage: false,
 						maxLevel: undefined,
+						ordered: true,
 					} );
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
@@ -210,16 +244,19 @@ export default function TableOfContentsEdit( {
 		);
 	}
 
+	const ListTag = ordered ? 'ol' : 'ul';
+
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol>
+				<ListTag>
 					<TableOfContentsList
 						nestedHeadingList={ headingTree }
 						disableLinkActivation
 						onClick={ showRedirectionPreventedNotice }
+						ordered={ ordered }
 					/>
-				</ol>
+				</ListTag>
 			</nav>
 			{ toolbarControls }
 			{ inspectorControls }

package/src/table-of-contents/list.tsx

@@ -14,10 +14,12 @@ export default function TableOfContentsList( {
 	nestedHeadingList,
 	disableLinkActivation,
 	onClick,
+	ordered = true,
 }: {
 	nestedHeadingList: NestedHeadingData[];
 	disableLinkActivation?: boolean;
 	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+	ordered?: boolean;
 } ): ReactElement {
 	return (
 		<>
@@ -42,11 +44,13 @@ export default function TableOfContentsList( {
 					<span className={ ENTRY_CLASS_NAME }>{ content }</span>
 				);
 
+				const NestedListTag = ordered ? 'ol' : 'ul';
+
 				return (
 					<li key={ index }>
 						{ entry }
 						{ node.children ? (
-							<ol>
+							<NestedListTag>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
 									disableLinkActivation={
@@ -58,8 +62,9 @@ export default function TableOfContentsList( {
 											? onClick
 											: undefined
 									}
+									ordered={ ordered }
 								/>
-							</ol>
+							</NestedListTag>
 						) : null }
 					</li>
 				);

package/src/table-of-contents/save.js

@@ -9,17 +9,21 @@ import { useBlockProps } from '@wordpress/block-editor';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 
-export default function save( { attributes: { headings = [] } } ) {
+export default function save( {
+	attributes: { headings = [], ordered = true },
+} ) {
 	if ( headings.length === 0 ) {
 		return null;
 	}
+	const ListTag = ordered ? 'ol' : 'ul';
 	return (
 		<nav { ...useBlockProps.save() }>
-			<ol>
+			<ListTag>
 				<TableOfContentsList
 					nestedHeadingList={ linearToNestedHeadingList( headings ) }
+					ordered={ ordered }
 				/>
-			</ol>
+			</ListTag>
 		</nav>
 	);
 }

package/src/term-template/block.json

@@ -0,0 +1,73 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/term-template",
+	"title": "Term Template",
+	"category": "theme",
+	"ancestor": [ "core/terms-query" ],
+	"description": "Contains the block elements used to render a taxonomy term, like the name, description, and more.",
+	"textdomain": "default",
+	"usesContext": [ "termQuery" ],
+	"attributes": {
+		"namespace": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"align": [ "wide", "full" ],
+		"layout": {
+			"allowSwitching": true,
+			"allowEditing": true,
+			"default": {
+				"type": "flex"
+			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true,
+				"padding": false,
+				"margin": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	},
+	"style": "wp-block-term-template",
+	"variations": "file:./variations.js"
+}