@wordpress/block-library 5.0.1 → 6.0.1

package/build-style/theme-rtl.css

@@ -74,10 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-#start-resizable-editor-section {
-  display: none;
-}
-
 .wp-block-audio figcaption {
   color: #555;
   font-size: 13px;
@@ -166,10 +162,8 @@
   font-weight: bold;
 }
 
-.wp-block-group.has-background {
+.wp-block-group:where(.has-background) {
   padding: 1.25em 2.375em;
-  margin-top: 0;
-  margin-bottom: 0;
 }
 
 .wp-block-separator {
@@ -224,8 +218,4 @@
   padding: 1.25em 2.375em;
   margin-top: 0;
   margin-bottom: 0;
-}
-
-#end-resizable-editor-section {
-  display: none;
 }

package/build-style/theme.css

@@ -74,10 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-#start-resizable-editor-section {
-  display: none;
-}
-
 .wp-block-audio figcaption {
   color: #555;
   font-size: 13px;
@@ -166,10 +162,8 @@
   font-weight: bold;
 }
 
-.wp-block-group.has-background {
+.wp-block-group:where(.has-background) {
   padding: 1.25em 2.375em;
-  margin-top: 0;
-  margin-bottom: 0;
 }
 
 .wp-block-separator {
@@ -224,8 +218,4 @@
   padding: 1.25em 2.375em;
   margin-top: 0;
   margin-bottom: 0;
-}
-
-#end-resizable-editor-section {
-  display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "5.0.1",
+	"version": "6.0.1",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,45 +33,44 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.1",
-		"@wordpress/api-fetch": "^5.2.1",
-		"@wordpress/autop": "^3.2.1",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.3",
+		"@wordpress/autop": "^3.2.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.1",
-		"@wordpress/blocks": "^11.0.1",
-		"@wordpress/components": "^16.0.0",
-		"@wordpress/compose": "^5.0.1",
-		"@wordpress/core-data": "^4.0.1",
-		"@wordpress/data": "^6.0.1",
-		"@wordpress/date": "^4.2.1",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/dom": "^3.2.2",
-		"@wordpress/element": "^4.0.0",
-		"@wordpress/escape-html": "^2.2.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.1",
-		"@wordpress/icons": "^5.0.1",
+		"@wordpress/block-editor": "^7.0.3",
+		"@wordpress/blocks": "^11.1.1",
+		"@wordpress/components": "^18.0.0",
+		"@wordpress/compose": "^5.0.3",
+		"@wordpress/core-data": "^4.0.3",
+		"@wordpress/data": "^6.1.1",
+		"@wordpress/date": "^4.2.2",
+		"@wordpress/deprecated": "^3.2.2",
+		"@wordpress/dom": "^3.2.4",
+		"@wordpress/element": "^4.0.2",
+		"@wordpress/escape-html": "^2.2.2",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.0.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.1",
-		"@wordpress/notices": "^3.2.2",
-		"@wordpress/primitives": "^3.0.0",
-		"@wordpress/reusable-blocks": "^3.0.1",
-		"@wordpress/rich-text": "^5.0.1",
-		"@wordpress/server-side-render": "^3.0.1",
-		"@wordpress/url": "^3.2.1",
-		"@wordpress/viewport": "^4.0.1",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/notices": "^3.2.4",
+		"@wordpress/primitives": "^3.0.2",
+		"@wordpress/reusable-blocks": "^3.0.3",
+		"@wordpress/rich-text": "^5.0.3",
+		"@wordpress/server-side-render": "^3.0.3",
+		"@wordpress/url": "^3.2.3",
+		"@wordpress/viewport": "^4.0.3",
 		"classnames": "^2.3.1",
+		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.6",
-		"moment": "^2.22.1",
-		"react-easy-crop": "^3.0.0",
-		"tinycolor2": "^1.4.2"
+		"moment": "^2.22.1"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8b67fbd424bc67f81c2d825877f0fae726d6363a"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }

package/src/audio/edit.js

@@ -20,7 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
@@ -157,7 +157,7 @@ function AudioEdit( {
 						checked={ loop }
 					/>
 					<SelectControl
-						label={ __( 'Preload' ) }
+						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
 						// `undefined` is required for the preload attribute to be unset.
 						onChange={ ( value ) =>
@@ -169,7 +169,10 @@ function AudioEdit( {
 							{ value: '', label: __( 'Browser default' ) },
 							{ value: 'auto', label: __( 'Auto' ) },
 							{ value: 'metadata', label: __( 'Metadata' ) },
-							{ value: 'none', label: __( 'None' ) },
+							{
+								value: 'none',
+								label: _x( 'None', '"Preload" value' ),
+							},
 						] }
 					/>
 				</PanelBody>

package/src/audio/edit.native.js

@@ -26,7 +26,7 @@ import {
 	MediaUploadProgress,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -197,7 +197,10 @@ function AudioEdit( {
 							checked={ loop }
 						/>
 						<SelectControl
-							label={ __( 'Preload' ) }
+							label={ _x(
+								'Preload',
+								'noun; Audio block parameter'
+							) }
 							value={ preload || '' }
 							// `undefined` is required for the preload attribute to be unset.
 							onChange={ ( value ) =>
@@ -209,7 +212,10 @@ function AudioEdit( {
 								{ value: '', label: __( 'Browser default' ) },
 								{ value: 'auto', label: __( 'Auto' ) },
 								{ value: 'metadata', label: __( 'Metadata' ) },
-								{ value: 'none', label: __( 'None' ) },
+								{
+									value: 'none',
+									label: _x( 'None', '"Preload" value' ),
+								},
 							] }
 							hideCancelButton={ true }
 						/>

package/src/button/block.json

@@ -68,7 +68,10 @@
 		"reusable": false,
 		"spacing": {
 			"__experimentalSkipSerialization": true,
-			"padding": true
+			"padding": [ "horizontal", "vertical" ],
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		},
 		"__experimentalBorder": {
 			"radius": true,

package/src/button/edit.js

@@ -7,11 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useState, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
-	KeyboardShortcuts,
 	PanelBody,
 	TextControl,
 	ToolbarButton,
@@ -20,7 +19,6 @@ import {
 import {
 	BlockControls,
 	InspectorControls,
-	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
 	__experimentalUseBorderProps as useBorderProps,
@@ -28,7 +26,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
-import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
@@ -67,88 +65,6 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	);
 }
 
-function URLPicker( {
-	isSelected,
-	url,
-	setAttributes,
-	opensInNewTab,
-	onToggleOpenInNewTab,
-	anchorRef,
-} ) {
-	const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
-	const urlIsSet = !! url;
-	const urlIsSetandSelected = urlIsSet && isSelected;
-	const openLinkControl = () => {
-		setIsURLPickerOpen( true );
-		return false; // prevents default behaviour for event
-	};
-	const unlinkButton = () => {
-		setAttributes( {
-			url: undefined,
-			linkTarget: undefined,
-			rel: undefined,
-		} );
-		setIsURLPickerOpen( false );
-	};
-	const linkControl = ( isURLPickerOpen || urlIsSetandSelected ) && (
-		<Popover
-			position="bottom center"
-			onClose={ () => setIsURLPickerOpen( false ) }
-			anchorRef={ anchorRef?.current }
-		>
-			<LinkControl
-				className="wp-block-navigation-link__inline-link-input"
-				value={ { url, opensInNewTab } }
-				onChange={ ( {
-					url: newURL = '',
-					opensInNewTab: newOpensInNewTab,
-				} ) => {
-					setAttributes( { url: newURL } );
-
-					if ( opensInNewTab !== newOpensInNewTab ) {
-						onToggleOpenInNewTab( newOpensInNewTab );
-					}
-				} }
-			/>
-		</Popover>
-	);
-	return (
-		<>
-			<BlockControls group="block">
-				{ ! urlIsSet && (
-					<ToolbarButton
-						name="link"
-						icon={ link }
-						title={ __( 'Link' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ openLinkControl }
-					/>
-				) }
-				{ urlIsSetandSelected && (
-					<ToolbarButton
-						name="link"
-						icon={ linkOff }
-						title={ __( 'Unlink' ) }
-						shortcut={ displayShortcut.primaryShift( 'k' ) }
-						onClick={ unlinkButton }
-						isActive={ true }
-					/>
-				) }
-			</BlockControls>
-			{ isSelected && (
-				<KeyboardShortcuts
-					bindGlobal
-					shortcuts={ {
-						[ rawShortcut.primary( 'k' ) ]: openLinkControl,
-						[ rawShortcut.primaryShift( 'k' ) ]: unlinkButton,
-					} }
-				/>
-			) }
-			{ linkControl }
-		</>
-	);
-}
-
 function ButtonEdit( props ) {
 	const {
 		attributes,
@@ -174,35 +90,66 @@ function ButtonEdit( props ) {
 		[ setAttributes ]
 	);
 
-	const onToggleOpenInNewTab = useCallback(
-		( value ) => {
-			const newLinkTarget = value ? '_blank' : undefined;
+	function onToggleOpenInNewTab( value ) {
+		const newLinkTarget = value ? '_blank' : undefined;
 
-			let updatedRel = rel;
-			if ( newLinkTarget && ! rel ) {
-				updatedRel = NEW_TAB_REL;
-			} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
-				updatedRel = undefined;
-			}
+		let updatedRel = rel;
+		if ( newLinkTarget && ! rel ) {
+			updatedRel = NEW_TAB_REL;
+		} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+			updatedRel = undefined;
+		}
 
-			setAttributes( {
-				linkTarget: newLinkTarget,
-				rel: updatedRel,
-			} );
-		},
-		[ rel, setAttributes ]
-	);
+		setAttributes( {
+			linkTarget: newLinkTarget,
+			rel: updatedRel,
+		} );
+	}
 
-	const setButtonText = ( newText ) => {
+	function setButtonText( newText ) {
 		// Remove anchor tags from button text content.
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
-	};
+	}
+
+	function onKeyDown( event ) {
+		if ( isKeyboardEvent.primary( event, 'k' ) ) {
+			startEditing( event );
+		} else if ( isKeyboardEvent.primaryShift( event, 'k' ) ) {
+			unlink();
+			richTextRef.current?.focus();
+		}
+	}
 
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
 	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	const richTextRef = useRef();
+	const blockProps = useBlockProps( { ref, onKeyDown } );
+
+	const [ isEditingURL, setIsEditingURL ] = useState( false );
+	const isURLSet = !! url;
+	const opensInNewTab = linkTarget === '_blank';
+
+	function startEditing( event ) {
+		event.preventDefault();
+		setIsEditingURL( true );
+	}
+
+	function unlink() {
+		setAttributes( {
+			url: undefined,
+			linkTarget: undefined,
+			rel: undefined,
+		} );
+		setIsEditingURL( false );
+	}
+
+	useEffect( () => {
+		if ( ! isSelected ) {
+			setIsEditingURL( false );
+		}
+	}, [ isSelected ] );
 
 	return (
 		<>
@@ -214,6 +161,7 @@ function ButtonEdit( props ) {
 				} ) }
 			>
 				<RichText
+					ref={ richTextRef }
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
@@ -246,27 +194,71 @@ function ButtonEdit( props ) {
 					identifier="text"
 				/>
 			</div>
-			<URLPicker
-				url={ url }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-				opensInNewTab={ linkTarget === '_blank' }
-				onToggleOpenInNewTab={ onToggleOpenInNewTab }
-				anchorRef={ ref }
-			/>
+			<BlockControls group="block">
+				{ ! isURLSet && (
+					<ToolbarButton
+						name="link"
+						icon={ link }
+						title={ __( 'Link' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
+						onClick={ startEditing }
+					/>
+				) }
+				{ isURLSet && (
+					<ToolbarButton
+						name="link"
+						icon={ linkOff }
+						title={ __( 'Unlink' ) }
+						shortcut={ displayShortcut.primaryShift( 'k' ) }
+						onClick={ unlink }
+						isActive={ true }
+					/>
+				) }
+			</BlockControls>
+			{ isSelected && ( isEditingURL || isURLSet ) && (
+				<Popover
+					position="bottom center"
+					onClose={ () => {
+						setIsEditingURL( false );
+						richTextRef.current?.focus();
+					} }
+					anchorRef={ ref?.current }
+					focusOnMount={ isEditingURL ? 'firstElement' : false }
+				>
+					<LinkControl
+						className="wp-block-navigation-link__inline-link-input"
+						value={ { url, opensInNewTab } }
+						onChange={ ( {
+							url: newURL = '',
+							opensInNewTab: newOpensInNewTab,
+						} ) => {
+							setAttributes( { url: newURL } );
+
+							if ( opensInNewTab !== newOpensInNewTab ) {
+								onToggleOpenInNewTab( newOpensInNewTab );
+							}
+						} }
+						onRemove={ () => {
+							unlink();
+							richTextRef.current?.focus();
+						} }
+						forceIsEditingLink={ isEditingURL }
+					/>
+				</Popover>
+			) }
 			<InspectorControls>
 				<WidthPanel
 					selectedWidth={ width }
 					setAttributes={ setAttributes }
 				/>
 			</InspectorControls>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
 					onChange={ onSetLinkRel }
 				/>
-			</InspectorAdvancedControls>
+			</InspectorControls>
 		</>
 	);
 }

package/src/button/edit.native.js

@@ -6,7 +6,7 @@ import { View, AccessibilityInfo, Platform, Text } from 'react-native';
  * WordPress dependencies
  */
 import { withInstanceId, compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	RichText,
 	InspectorControls,
@@ -136,7 +136,10 @@ class ButtonEdit extends Component {
 			},
 			linkRel: {
 				label: __( 'Link Rel' ),
-				placeholder: __( 'None' ),
+				placeholder: _x(
+					'None',
+					'Link rel attribute value placeholder'
+				),
 			},
 		};
 

package/src/button/style.scss

@@ -14,7 +14,7 @@ $blocks-block__margin: 0.5em;
 	padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions.
 	text-align: center;
 	text-decoration: none;
-	overflow-wrap: break-word;
+	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 
 	&:hover,

package/src/buttons/block.json

@@ -17,7 +17,8 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": [ "wide", "full" ]
+		"align": [ "wide", "full" ],
+		"__experimentalExposeControlsToChildren": true
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

package/src/buttons/edit.js

@@ -70,7 +70,7 @@ function ButtonsEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
 				<JustifyContentControl
 					allowedControls={ justifyControls }
 					value={ contentJustification }

package/src/column/block.json

@@ -26,7 +26,10 @@
 			"link": true
 		},
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		}
 	}
 }

package/src/column/save.js

@@ -19,7 +19,17 @@ export default function save( { attributes } ) {
 
 	if ( width ) {
 		// Numbers are handled for backward compatibility as they can be still provided with templates.
-		style = { flexBasis: Number.isFinite( width ) ? width + '%' : width };
+		let flexBasis = Number.isFinite( width ) ? width + '%' : width;
+		// In some cases we need to round the width to a shorter float.
+		if ( ! Number.isFinite( width ) && width?.endsWith( '%' ) ) {
+			const multiplier = 1000000000000;
+			// Shrink the number back to a reasonable float.
+			flexBasis =
+				Math.round( Number.parseFloat( width ) * multiplier ) /
+					multiplier +
+				'%';
+		}
+		style = { flexBasis };
 	}
 
 	return (

package/src/columns/block.json

@@ -3,7 +3,7 @@
 	"name": "core/columns",
 	"title": "Columns",
 	"category": "design",
-	"description": "Add a block that displays content in multiple columns, then add whatever content blocks you’d like.",
+	"description": "Display content in multiple columns, with blocks added to each column.",
 	"textdomain": "default",
 	"attributes": {
 		"verticalAlignment": {
@@ -21,6 +21,13 @@
 		"color": {
 			"gradients": true,
 			"link": true
+		},
+		"spacing": {
+			"blockGap": true,
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

package/src/columns/edit.native.js

@@ -6,7 +6,7 @@ import { dropRight, times, map, compact, delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	PanelBody,
 	RangeControl,
@@ -190,9 +190,14 @@ function ColumnsEditContainer( {
 		return innerWidths.map( ( column, index ) => {
 			const { valueUnit = '%' } =
 				getValueAndUnit( column.attributes.width ) || {};
+			const label = sprintf(
+				/* translators: %d: column index. */
+				__( 'Column %d' ),
+				index + 1
+			);
 			return (
 				<UnitControl
-					label={ `Column ${ index + 1 }` }
+					label={ label }
 					settingLabel="Width"
 					key={ `${ column.clientId }-${
 						getWidths( innerWidths ).length
@@ -274,7 +279,7 @@ function ColumnsEditContainer( {
 						orientation={
 							columnsInRow > 1 ? 'horizontal' : undefined
 						}
-						horizontal={ true }
+						horizontal={ columnsInRow > 1 }
 						allowedBlocks={ ALLOWED_BLOCKS }
 						contentResizeMode="stretch"
 						onAddBlock={ onAddBlock }

package/src/columns/editor.scss

@@ -12,14 +12,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--wp--style--block-gap, 2em);
 	}
 }
 
 @include break-medium() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--wp--style--block-gap, 2em);
 	}
 }