@wordpress/block-library 6.0.1 → 6.0.5

package/src/quote/deprecated.js

@@ -96,6 +96,16 @@ const deprecated = [
 			},
 		},
 
+		migrate( attributes ) {
+			if ( ! isNaN( parseInt( attributes.style ) ) ) {
+				return {
+					...omit( attributes, [ 'style' ] ),
+				};
+			}
+
+			return attributes;
+		},
+
 		save( { attributes } ) {
 			const { align, value, citation, style } = attributes;
 

package/src/quote/theme.scss

@@ -23,6 +23,7 @@
 		padding-left: 0;
 	}
 
+	&.is-style-plain,
 	&.is-style-large,
 	&.is-large {
 		border: none;

package/src/reset.scss

@@ -8,8 +8,6 @@
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
 html :where(.editor-styles-wrapper) {
-	padding: 8px;
-
 	/**
 	* The following styles revert to the browser defaults overriding the WPAdmin styles.
 	* This is only needed while the block editor is not being loaded in an iframe.
@@ -24,13 +22,6 @@ html :where(.editor-styles-wrapper) {
 	// So to match browser defaults, we provide a white default here as well.
 	background: #fff;
 
-	// For full-wide blocks, we compensate for the base padding.
-	// These margins should match the padding value above.
-	.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] {
-		margin-left: -8px;
-		margin-right: -8px;
-	}
-
 	.wp-align-wrapper {
 		max-width: $content-width;
 

package/src/search/edit.js

@@ -14,7 +14,10 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseColorProps as useColorProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -58,6 +61,7 @@ export default function SearchEdit( {
 	setAttributes,
 	toggleSelection,
 	isSelected,
+	clientId,
 } ) {
 	const {
 		label,
@@ -72,6 +76,31 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
+	const insertedInNavigationBlock = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
+				blockEditorStore
+			);
+			return (
+				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
+					?.length && wasBlockJustInserted( clientId )
+			);
+		},
+		[ clientId ]
+	);
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	useEffect( () => {
+		if ( ! insertedInNavigationBlock ) return;
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( {
+			showLabel: false,
+			buttonUseIcon: true,
+			buttonPosition: 'button-inside',
+		} );
+	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
 	const borderColor = style?.border?.color;
 	const borderProps = useBorderProps( attributes );

package/src/search/edit.native.js

@@ -49,6 +49,7 @@ export default function SearchEdit( {
 	setAttributes,
 	className,
 	blockWidth,
+	style,
 } ) {
 	const [ isButtonSelected, setIsButtonSelected ] = useState( false );
 	const [ isLabelSelected, setIsLabelSelected ] = useState( false );
@@ -222,12 +223,18 @@ export default function SearchEdit( {
 			styles.plainTextInput,
 			styles.plainTextInputDark
 		),
+		style?.baseColors?.color && { color: style?.baseColors?.color?.text },
 	];
 
-	const placeholderStyle = usePreferredColorSchemeStyle(
-		styles.plainTextPlaceholder,
-		styles.plainTextPlaceholderDark
-	);
+	const placeholderStyle = {
+		...usePreferredColorSchemeStyle(
+			styles.plainTextPlaceholder,
+			styles.plainTextPlaceholderDark
+		),
+		...( style?.baseColors?.color && {
+			color: style?.baseColors?.color?.text,
+		} ),
+	};
 
 	const searchBarStyle = [
 		styles.searchBarContainer,
@@ -332,18 +339,45 @@ export default function SearchEdit( {
 			? ''
 			: __( 'Add button text' );
 
+	const baseButtonStyles = {
+		...style?.baseColors?.blocks?.[ 'core/button' ]?.color,
+		...attributes?.style?.color,
+		...( style?.color && { text: style.color } ),
+	};
+
+	const richTextButtonContainerStyle = [
+		styles.buttonContainer,
+		isLongButton && styles.buttonContainerWide,
+		baseButtonStyles?.background && {
+			backgroundColor: baseButtonStyles.background,
+			borderWidth: 0,
+		},
+		style?.backgroundColor && {
+			backgroundColor: style.backgroundColor,
+			borderWidth: 0,
+		},
+	];
+
+	const richTextButtonStyle = {
+		...styles.richTextButton,
+		...( baseButtonStyles?.text && {
+			color: baseButtonStyles.text,
+			placeholderColor: baseButtonStyles.text,
+		} ),
+	};
+
+	const iconStyles = {
+		...styles.icon,
+		...( baseButtonStyles?.text && { fill: baseButtonStyles.text } ),
+	};
+
 	const renderButton = () => {
 		return (
-			<View
-				style={ [
-					styles.buttonContainer,
-					isLongButton && styles.buttonContainerWide,
-				] }
-			>
+			<View style={ richTextButtonContainerStyle }>
 				{ buttonUseIcon && (
 					<Icon
 						icon={ search }
-						{ ...styles.icon }
+						{ ...iconStyles }
 						onLayout={ onLayoutButton }
 					/>
 				) }
@@ -364,7 +398,7 @@ export default function SearchEdit( {
 							className="wp-block-search__button"
 							identifier="text"
 							tagName="p"
-							style={ styles.richTextButton }
+							style={ richTextButtonStyle }
 							placeholder={ buttonPlaceholderText }
 							value={ buttonText }
 							withoutInteractiveFormatting

package/src/search/style.scss

@@ -1,69 +1,71 @@
-.wp-block-search {
+.wp-block-search__button {
+	background: #f7f7f7;
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+	color: #32373c;
+	margin-left: 0.625em;
+	word-break: normal;
+	font-size: inherit;
+	font-family: inherit;
+	line-height: inherit;
 
-	.wp-block-search__button {
-		background: #f7f7f7;
-		border: 1px solid #ccc;
-		padding: 0.375em 0.625em;
-		color: #32373c;
-		margin-left: 0.625em;
-		word-break: normal;
-
-		&.has-icon {
-			line-height: 0;
-		}
-
-		svg {
-			min-width: 1.5em;
-			min-height: 1.5em;
-			fill: currentColor;
-		}
+	&.has-icon {
+		line-height: 0;
 	}
 
-	.wp-block-search__inside-wrapper {
-		display: flex;
-		flex: auto;
-		flex-wrap: nowrap;
-		max-width: 100%;
+	svg {
+		min-width: 1.5em;
+		min-height: 1.5em;
+		fill: currentColor;
 	}
+}
 
-	.wp-block-search__label {
-		width: 100%;
-	}
+.wp-block-search__inside-wrapper {
+	display: flex;
+	flex: auto;
+	flex-wrap: nowrap;
+	max-width: 100%;
+}
 
-	.wp-block-search__input {
-		padding: 8px;
-		flex-grow: 1;
-		min-width: 3em;
-		border: 1px solid #949494;
-	}
+.wp-block-search__label {
+	width: 100%;
+}
 
-	&.wp-block-search__button-only {
-		.wp-block-search__button {
-			margin-left: 0;
-		}
-	}
+.wp-block-search__input {
+	padding: 8px;
+	flex-grow: 1;
+	min-width: 3em;
+	border: 1px solid #949494;
+	font-size: inherit;
+	font-family: inherit;
+	line-height: inherit;
+}
 
-	&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-		padding: 4px;
-		border: 1px solid #949494;
+.wp-block-search.wp-block-search__button-only {
+	.wp-block-search__button {
+		margin-left: 0;
+	}
+}
 
-		.wp-block-search__input {
-			border-radius: 0;
-			border: none;
-			padding: 0 0 0 0.25em;
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 4px;
+	border: 1px solid #949494;
 
-			&:focus {
-				outline: none;
-			}
-		}
+	.wp-block-search__input {
+		border-radius: 0;
+		border: none;
+		padding: 0 0 0 0.25em;
 
-		.wp-block-search__button {
-			padding: 0.125em 0.5em;
+		&:focus {
+			outline: none;
 		}
 	}
 
-	&.aligncenter .wp-block-search__inside-wrapper {
-		margin: auto;
+	.wp-block-search__button {
+		padding: 0.125em 0.5em;
 	}
 }
 
+.wp-block-search.aligncenter .wp-block-search__inside-wrapper {
+	margin: auto;
+}

package/src/search/test/__snapshots__/edit.native.js.snap

@@ -94,7 +94,11 @@ exports[`Search Block renders block with button inside option 1`] = `
         scrollEnabled={false}
         style={
           Array [
-            false,
+            Array [
+              false,
+              undefined,
+              undefined,
+            ],
             undefined,
           ]
         }
@@ -106,6 +110,8 @@ exports[`Search Block renders block with button inside option 1`] = `
         Array [
           undefined,
           false,
+          undefined,
+          undefined,
         ]
       }
     >
@@ -269,7 +275,11 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         scrollEnabled={false}
         style={
           Array [
-            undefined,
+            Array [
+              undefined,
+              undefined,
+              undefined,
+            ],
             undefined,
           ]
         }
@@ -281,6 +291,8 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         Array [
           undefined,
           false,
+          undefined,
+          undefined,
         ]
       }
     >
@@ -326,7 +338,11 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         scrollEnabled={false}
         style={
           Array [
-            undefined,
+            Array [
+              undefined,
+              undefined,
+              undefined,
+            ],
             undefined,
           ]
         }
@@ -338,6 +354,8 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         Array [
           undefined,
           false,
+          undefined,
+          undefined,
         ]
       }
     >
@@ -501,7 +519,11 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         scrollEnabled={false}
         style={
           Array [
-            undefined,
+            Array [
+              undefined,
+              undefined,
+              undefined,
+            ],
             undefined,
           ]
         }
@@ -513,6 +535,8 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         Array [
           undefined,
           false,
+          undefined,
+          undefined,
         ]
       }
     >
@@ -667,7 +691,11 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
       scrollEnabled={false}
       style={
         Array [
-          undefined,
+          Array [
+            undefined,
+            undefined,
+            undefined,
+          ],
           undefined,
         ]
       }

package/src/search/test/edit.native.js

@@ -13,6 +13,10 @@ import { Icon } from '@wordpress/components';
  */
 import SearchEdit from '../edit.native.js';
 
+// react-native-aztec shouldn't be mocked because these tests are based on
+// snapshot testing where we want to keep the original component.
+jest.unmock( '@wordpress/react-native-aztec' );
+
 const defaultAttributes = {
 	label: 'Search',
 	buttonText: 'Search Button',

package/src/separator/separator-settings.js

@@ -7,6 +7,7 @@ import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 const SeparatorSettings = ( { color, setColor } ) => (
 	<InspectorControls>
 		<PanelColorSettings
+			__experimentalHasMultipleOrigins
 			title={ __( 'Color' ) }
 			colorSettings={ [
 				{

package/src/separator/style.scss

@@ -15,7 +15,6 @@
 		background: none !important;
 		border: none;
 		text-align: center;
-		width: none;
 		line-height: 1;
 		height: auto;
 

package/src/site-logo/block.json

@@ -21,6 +21,12 @@
 			"default": "_self"
 		}
 	},
+	"example": {
+		"viewportWidth": 500,
+		"attributes": {
+			"width": 350
+		}
+	},
 	"supports": {
 		"html": false,
 		"align": true,

package/src/site-logo/edit.js

@@ -11,20 +11,19 @@ import { isBlobURL } from '@wordpress/blob';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	Notice,
+	MenuItem,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
 	Spinner,
 	ToggleControl,
 	ToolbarButton,
-	ToolbarGroup,
 	Placeholder,
+	Button,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	BlockControls,
-	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
@@ -35,7 +34,9 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { crop, siteLogo as icon } from '@wordpress/icons';
+import { crop, upload } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -309,7 +310,6 @@ export default function LogoEdit( {
 } ) {
 	const { width } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
-	const [ error, setError ] = useState();
 	const ref = useRef();
 
 	const {
@@ -373,7 +373,6 @@ export default function LogoEdit( {
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image
 			setLogo( undefined );
-			setError( null );
 			setLogoUrl( media.url );
 			return;
 		}
@@ -386,8 +385,9 @@ export default function LogoEdit( {
 		setLogoUrl( undefined );
 	};
 
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		setError( message[ 2 ] ? message[ 2 ] : null );
+		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
 	};
 
 	const controls = canUserEdit && logoUrl && (
@@ -398,16 +398,12 @@ export default function LogoEdit( {
 				accept={ ACCEPT_MEDIA_STRING }
 				onSelect={ onSelectLogo }
 				onError={ onUploadError }
-			/>
-			<ToolbarGroup>
-				<ToolbarButton onClick={ onRemoveLogo }>
-					{ __( 'Reset' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+			>
+				<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
+			</MediaReplaceFlow>
 		</BlockControls>
 	);
 
-	const label = __( 'Site Logo' );
 	let logoImage;
 	const isLoading = siteLogoId === undefined || isRequestingMediaItem;
 	if ( isLoading ) {
@@ -429,23 +425,52 @@ export default function LogoEdit( {
 			/>
 		);
 	}
+	const placeholder = ( content ) => {
+		const placeholderClassName = classnames(
+			'block-editor-media-placeholder',
+			className
+		);
+
+		return (
+			<Placeholder
+				className={ placeholderClassName }
+				preview={ logoImage }
+			>
+				{
+					<SVG
+						className="components-placeholder__illustration"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 60 60"
+					>
+						<Path
+							vectorEffect="non-scaling-stroke"
+							d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
+						/>
+					</SVG>
+				}
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const classes = classnames( className, {
 		'is-default-size': ! width,
 	} );
+
 	const blockProps = useBlockProps( {
 		ref,
 		className: classes,
 	} );
+
+	const label = __( 'Add a site logo' );
+
 	return (
 		<div { ...blockProps }>
 			{ controls }
 			{ !! logoUrl && logoImage }
 			{ ! logoUrl && ! canUserEdit && (
-				<Placeholder
-					className="site-logo_placeholder"
-					icon={ icon }
-					label={ label }
-				>
+				<Placeholder className="site-logo_placeholder">
 					{ isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
@@ -455,25 +480,25 @@ export default function LogoEdit( {
 			) }
 			{ ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
-					icon={ <BlockIcon icon={ icon } /> }
-					labels={ {
-						title: label,
-						instructions: __(
-							'Upload an image, or pick one from your media library, to be your site logo'
-						),
-					} }
 					onSelect={ onSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					mediaPreview={ logoImage }
-					notices={
-						error && (
-							<Notice status="error" isDismissible={ false }>
-								{ error }
-							</Notice>
-						)
-					}
 					onError={ onUploadError }
+					placeholder={ placeholder }
+					mediaLibraryButton={ ( { open } ) => {
+						return (
+							<Button
+								icon={ upload }
+								variant="primary"
+								label={ label }
+								showTooltip
+								tooltipPosition="top center"
+								onClick={ () => {
+									open();
+								} }
+							/>
+						);
+					} }
 				/>
 			) }
 		</div>