@wordpress/block-library 9.30.0 → 9.30.1-next.6870dfe5b.0

package/src/navigation-link/page-creator.js

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	TextControl,
+	Notice,
+	CheckboxControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
+
+/**
+ * Component for creating new pages within the Navigation Link UI.
+ *
+ * @param {Object}   props                Component props.
+ * @param {string}   props.postType       The post type to create.
+ * @param {Function} props.onBack         Callback when user wants to go back.
+ * @param {Function} props.onPageCreated  Callback when page is successfully created.
+ * @param {string}   [props.initialTitle] Initial title to pre-fill the form.
+ */
+export function LinkUIPageCreator( {
+	postType,
+	onBack,
+	onPageCreated,
+	initialTitle = '',
+} ) {
+	const [ title, setTitle ] = useState( initialTitle );
+	const [ shouldPublish, setShouldPublish ] = useState( false );
+
+	// Check if the title is valid for submission
+	const isTitleValid = title.trim().length > 0;
+
+	// Get the last created entity record (without ID) to track creation state
+	const { lastError, isSaving } = useSelect(
+		( select ) => ( {
+			lastError: select( coreStore ).getLastEntitySaveError(
+				'postType',
+				postType
+			),
+			isSaving: select( coreStore ).isSavingEntityRecord(
+				'postType',
+				postType
+			),
+		} ),
+		[ postType ]
+	);
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function createPage( event ) {
+		event.preventDefault();
+		if ( isSaving || ! isTitleValid ) {
+			return;
+		}
+
+		try {
+			const savedRecord = await saveEntityRecord(
+				'postType',
+				postType,
+				{
+					title,
+					status: shouldPublish ? 'publish' : 'draft',
+				},
+				{ throwOnError: true }
+			);
+
+			if ( savedRecord ) {
+				// Create the page link object from the saved record
+				const pageLink = {
+					id: savedRecord.id,
+					type: postType,
+					title: decodeEntities( savedRecord.title.rendered ),
+					url: savedRecord.link,
+					kind: 'post-type',
+				};
+
+				onPageCreated( pageLink );
+			}
+		} catch ( error ) {
+			// Error handling is done via the data store selectors
+		}
+	}
+
+	const isSubmitDisabled = isSaving || ! isTitleValid;
+
+	return (
+		<DialogWrapper
+			className="link-ui-page-creator"
+			title={ __( 'Create page' ) }
+			description={ __( 'Create a new page to add to your Navigation.' ) }
+			onBack={ onBack }
+		>
+			<VStack className="link-ui-page-creator__inner" spacing={ 4 }>
+				<form onSubmit={ createPage }>
+					<VStack spacing={ 4 }>
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Title' ) }
+							onChange={ setTitle }
+							placeholder={ __( 'No title' ) }
+							value={ title }
+						/>
+
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Publish immediately' ) }
+							help={ __(
+								'If unchecked, the page will be created as a draft.'
+							) }
+							checked={ shouldPublish }
+							onChange={ setShouldPublish }
+						/>
+
+						{ lastError && (
+							<Notice status="error" isDismissible={ false }>
+								{ lastError.message }
+							</Notice>
+						) }
+
+						<HStack spacing={ 2 } justify="flex-end">
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ onBack }
+								disabled={ isSaving }
+								accessibleWhenDisabled
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+								isBusy={ isSaving }
+								aria-disabled={ isSubmitDisabled }
+							>
+								{ __( 'Create page' ) }
+							</Button>
+						</HStack>
+					</VStack>
+				</form>
+			</VStack>
+		</DialogWrapper>
+	);
+}

package/src/navigation-link/style.scss

@@ -16,7 +16,7 @@
 }
 
 .link-ui-tools {
-	border-top: 1px solid $gray-100;
+	outline: 1px solid $gray-100;
 	padding: $grid-unit-10;
 }
 

package/src/post-comments-form/style.scss

@@ -1,16 +1,16 @@
 // Allow these default styles to be overridden by global styles.
-:where(.wp-block-post-comments-form) {
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:not([type="submit"])) {
+	border-width: 1px;
+	border-style: solid;
+	border-color: $gray-600;
+	font-size: 1em;
+	font-family: inherit;
+}
 
-	textarea,
-	input:where(:not([type="submit"]):not([type="checkbox"])) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:where(:not([type="submit"]):not([type="checkbox"]))) {
+	padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 }
 
 .wp-block-post-comments-form {

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;