@wordpress/block-library 5.0.1 → 6.0.1

package/src/columns/index.js

@@ -22,6 +22,7 @@ export const settings = {
 	icon,
 	variations,
 	example: {
+		viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
 		innerBlocks: [
 			{
 				name: 'core/column',

package/src/columns/style.scss

@@ -43,14 +43,14 @@
 				// As with mobile styles, this must be important since the Column
 				// assigns its own width as an inline style, which should take effect
 				// starting at `break-medium`.
-				flex-basis: calc(50% - 1em) !important;
+				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
 				flex-grow: 0;
 			}
 
 			// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 			&:nth-child(even) {
-				margin-left: 2em;
+				margin-left: var(--wp--style--block-gap, 2em);
 			}
 		}
 
@@ -74,7 +74,7 @@
 
 			// When columns are in a single row, add space before all except the first.
 			&:not(:first-child) {
-				margin-left: 2em;
+				margin-left: var(--wp--style--block-gap, 2em);
 			}
 		}
 	}
@@ -95,7 +95,7 @@
 
 			// When columns are in a single row, add space before all except the first.
 			&:not(:first-child) {
-				margin-left: 2em;
+				margin-left: var(--wp--style--block-gap, 2em);
 			}
 		}
 	}

package/src/common.scss

@@ -3,15 +3,9 @@
 // the colors override the added specificity by link states such as :hover.
 
 :root {
-	// Background colors.
-	@include background-colors();
-
-	// Foreground colors.
-	@include foreground-colors();
-
-	// Gradients
-	@include gradient-colors();
-
+	@include background-colors-deprecated();
+	@include foreground-colors-deprecated();
+	@include gradient-colors-deprecated();
 }
 
 // Font sizes.

package/src/cover/block.json

@@ -12,6 +12,13 @@
 		"id": {
 			"type": "number"
 		},
+		"alt": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "img",
+			"attribute": "alt",
+			"default": ""
+		},
 		"hasParallax": {
 			"type": "boolean",
 			"default": false
@@ -58,7 +65,10 @@
 		"align": true,
 		"html": false,
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",

package/src/cover/deprecated.js

@@ -63,15 +63,6 @@ const deprecated = [
 	{
 		attributes: {
 			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			contentAlign: {
-				type: 'string',
-				default: 'center',
-			},
 			isRepeated: {
 				type: 'boolean',
 				default: false,
@@ -206,15 +197,6 @@ const deprecated = [
 	{
 		attributes: {
 			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			contentAlign: {
-				type: 'string',
-				default: 'center',
-			},
 			minHeight: {
 				type: 'number',
 			},
@@ -312,15 +294,6 @@ const deprecated = [
 	{
 		attributes: {
 			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			contentAlign: {
-				type: 'string',
-				default: 'center',
-			},
 			minHeight: {
 				type: 'number',
 			},

package/src/cover/edit.js

@@ -3,7 +3,8 @@
  */
 import classnames from 'classnames';
 import FastAverageColor from 'fast-average-color';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
@@ -12,16 +13,19 @@ import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	ExternalLink,
 	FocalPointPicker,
 	PanelBody,
 	PanelRow,
 	RangeControl,
 	ResizableBox,
 	Spinner,
+	TextareaControl,
 	ToggleControl,
 	withNotices,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
 import {
@@ -62,23 +66,23 @@ import {
 	getPositionClassName,
 } from './shared';
 
-/**
- * Module Constants
- */
-
-const INNER_BLOCKS_TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			align: 'center',
-			fontSize: 'large',
-			placeholder: __( 'Write title…' ),
-		},
-	],
-];
+extend( [ namesPlugin ] );
 
 const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
+function getInnerBlocksTemplate( attributes ) {
+	return [
+		[
+			'core/paragraph',
+			{
+				align: 'center',
+				placeholder: __( 'Write title…' ),
+				...attributes,
+			},
+		],
+	];
+}
+
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
 		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
@@ -237,7 +241,7 @@ function useCoverIsDark( url, dimRatio = 50, overlayColor, elementRef ) {
 				setIsDark( true );
 				return;
 			}
-			setIsDark( tinycolor( overlayColor ).isDark() );
+			setIsDark( colord( overlayColor ).isDark() );
 		}
 	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
 	useEffect( () => {
@@ -319,6 +323,7 @@ function CoverEdit( {
 		minHeightUnit,
 		style: styleAttribute,
 		url,
+		alt,
 	} = attributes;
 	const {
 		gradientClass,
@@ -490,6 +495,27 @@ function CoverEdit( {
 								}
 							/>
 						) }
+						{ url && isImageBackground && isImgElement && (
+							<TextareaControl
+								label={ __( 'Alt text (alternative text)' ) }
+								value={ alt }
+								onChange={ ( newAlt ) =>
+									setAttributes( { alt: newAlt } )
+								}
+								help={
+									<>
+										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											{ __(
+												'Describe the purpose of the image'
+											) }
+										</ExternalLink>
+										{ __(
+											'Leave empty if the image is purely decorative.'
+										) }
+									</>
+								}
+							/>
+						) }
 						<PanelRow>
 							<Button
 								variant="secondary"
@@ -512,20 +538,6 @@ function CoverEdit( {
 						</PanelRow>
 					</PanelBody>
 				) }
-				<PanelBody title={ __( 'Dimensions' ) }>
-					<CoverHeightInput
-						value={ temporaryMinHeight || minHeight }
-						unit={ minHeightUnit }
-						onChange={ ( newMinHeight ) =>
-							setAttributes( { minHeight: newMinHeight } )
-						}
-						onUnitChange={ ( nextUnit ) =>
-							setAttributes( {
-								minHeightUnit: nextUnit,
-							} )
-						}
-					/>
-				</PanelBody>
 				<PanelColorGradientSettings
 					title={ __( 'Overlay' ) }
 					initialOpen={ true }
@@ -556,17 +568,55 @@ function CoverEdit( {
 					) }
 				</PanelColorGradientSettings>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="dimensions">
+				<ToolsPanelItem
+					hasValue={ () => !! minHeight }
+					label={ __( 'Minimum height' ) }
+					onDeselect={ () =>
+						setAttributes( {
+							minHeight: undefined,
+							minHeightUnit: undefined,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						minHeight: undefined,
+						minHeightUnit: undefined,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
+				>
+					<CoverHeightInput
+						value={ temporaryMinHeight || minHeight }
+						unit={ minHeightUnit }
+						onChange={ ( newMinHeight ) =>
+							setAttributes( { minHeight: newMinHeight } )
+						}
+						onUnitChange={ ( nextUnit ) =>
+							setAttributes( {
+								minHeightUnit: nextUnit,
+							} )
+						}
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
 		</>
 	);
 
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
+
+	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
+	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const innerBlocksTemplate = getInnerBlocksTemplate( {
+		fontSize: hasFontSizes ? 'large' : undefined,
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-cover__inner-container',
 		},
 		{
-			template: INNER_BLOCKS_TEMPLATE,
+			template: innerBlocksTemplate,
 			templateInsertUpdatesSelection: true,
 		}
 	);
@@ -660,7 +710,7 @@ function CoverEdit( {
 					<img
 						ref={ isDarkElement }
 						className="wp-block-cover__image-background"
-						alt=""
+						alt={ alt }
 						src={ url }
 						style={ mediaStyle }
 					/>

package/src/cover/save.js

@@ -38,6 +38,7 @@ export default function save( { attributes } ) {
 		isRepeated,
 		overlayColor,
 		url,
+		alt,
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
@@ -109,7 +110,7 @@ export default function save( { attributes } ) {
 						'wp-block-cover__image-background',
 						id ? `wp-image-${ id }` : null
 					) }
-					alt=""
+					alt={ alt }
 					src={ url }
 					style={ { objectPosition } }
 					data-object-fit="cover"

package/src/cover/shared.js

@@ -67,6 +67,7 @@ export function attributesFromMedia( setAttributes ) {
 		setAttributes( {
 			url: media.url,
 			id: media.id,
+			alt: media?.alt,
 			backgroundType: mediaType,
 			...( mediaType === VIDEO_BACKGROUND_TYPE
 				? { focalPoint: undefined, hasParallax: undefined }

package/src/cover/transforms.js

@@ -13,11 +13,12 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { caption, url, align, id, anchor, style } ) =>
+			transform: ( { caption, url, alt, align, id, anchor, style } ) =>
 				createBlock(
 					'core/cover',
 					{
 						url,
+						alt,
 						align,
 						id,
 						anchor,
@@ -117,10 +118,11 @@ const transforms = {
 					! customGradient
 				);
 			},
-			transform: ( { title, url, align, id, anchor, style } ) =>
+			transform: ( { title, url, alt, align, id, anchor, style } ) =>
 				createBlock( 'core/image', {
 					caption: title,
 					url,
+					alt,
 					align,
 					id,
 					anchor,

package/src/editor.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
@@ -16,7 +11,6 @@
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
-@import "./heading/editor.scss";
 @import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-posts/editor.scss";
@@ -24,10 +18,10 @@
 @import "./more/editor.scss";
 @import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
+@import "./navigation-submenu/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
-@import "./post-content/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";
@@ -54,14 +48,9 @@
 @import "./term-description/editor.scss";
 
 :root .editor-styles-wrapper {
-	// Background colors.
-	@include background-colors();
-
-	// Foreground colors.
-	@include foreground-colors();
-
-	// Gradients
-	@include gradient-colors();
+	@include background-colors-deprecated();
+	@include foreground-colors-deprecated();
+	@include gradient-colors-deprecated();
 }
 
 // Font sizes.
@@ -95,8 +84,3 @@
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
-
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}

package/src/embed/edit.js

@@ -29,16 +29,6 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 
-function getResponsiveHelp( checked ) {
-	return checked
-		? __(
-				'This embed will preserve its aspect ratio when the browser is resized.'
-		  )
-		: __(
-				'This embed may not preserve its aspect ratio when the browser is resized.'
-		  );
-}
-
 const EmbedEdit = ( props ) => {
 	const {
 		attributes: {
@@ -227,6 +217,7 @@ const EmbedEdit = ( props ) => {
 	// after the preview has been rendered can result in unwanted
 	// clipping or scrollbars. The `getAttributesFromPreview` function
 	// that `getMergedAttributes` uses is memoized so that we're not
+	// calculating them on every render.
 	const {
 		caption,
 		type,
@@ -242,7 +233,6 @@ const EmbedEdit = ( props ) => {
 				themeSupportsResponsive={ themeSupportsResponsive }
 				blockSupportsResponsive={ responsive }
 				allowResponsive={ allowResponsive }
-				getResponsiveHelp={ getResponsiveHelp }
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>