@wordpress/block-library 7.7.0 → 7.10.0

package/src/heading/deprecated.js

@@ -112,13 +112,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -154,13 +149,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -197,13 +187,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				level,
-				content,
-				textColor,
-				customTextColor,
-			} = attributes;
+			const { align, level, content, textColor, customTextColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );

package/src/heading/edit.js

@@ -52,9 +52,8 @@ function HeadingEdit( {
 		};
 	}, [] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.

package/src/heading/heading-level-dropdown.js

@@ -60,6 +60,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 						onClick() {
 							onChange( targetLevel );
 						},
+						role: 'menuitemradio',
 					};
 				}
 			} ) }

package/src/heading/index.js

@@ -31,9 +31,15 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		if ( context === 'accessibility' ) {
-			const { content, level } = attributes;
+		const { content, level } = attributes;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && content ) {
+			return content;
+		}
 
+		if ( context === 'accessibility' ) {
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

package/src/html/edit.js

@@ -6,42 +6,19 @@ import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
-	transformStyles,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Disabled,
-	SandBox,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Preview from './preview';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
-	const styles = useSelect( ( select ) => {
-		// Default styles used to unset some of the styles
-		// that might be inherited from the editor style.
-		const defaultStyles = `
-			html,body,:root {
-				margin: 0 !important;
-				padding: 0 !important;
-				overflow: visible !important;
-				min-height: auto !important;
-			}
-		`;
-
-		return [
-			defaultStyles,
-			...transformStyles(
-				select( blockEditorStore ).getSettings().styles
-			),
-		];
-	}, [] );
-
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<>
-					<SandBox html={ attributes.content } styles={ styles } />
-					{ /*
-							An overlay is added when the block is not selected in order to register click events.
-							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
-							difficult to reselect the block.
-						*/ }
-					{ ! isSelected && (
-						<div className="block-library-html__preview-overlay"></div>
-					) }
-				</>
+				<Preview
+					content={ attributes.content }
+					isSelected={ isSelected }
+				/>
 			) : (
 				<PlainText
 					value={ attributes.content }

package/src/html/preview.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	transformStyles,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+// Default styles used to unset some of the styles
+// that might be inherited from the editor style.
+const DEFAULT_STYLES = `
+	html,body,:root {
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+		min-height: auto !important;
+	}
+`;
+
+export default function HTMLEditPreview( { content, isSelected } ) {
+	const settingStyles = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()?.styles;
+	}, [] );
+
+	const styles = useMemo(
+		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		[ settingStyles ]
+	);
+
+	return (
+		<>
+			<SandBox html={ content } styles={ styles } />
+			{ /*
+				An overlay is added when the block is not selected in order to register click events.
+				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+				difficult to reselect the block.
+			*/ }
+			{ ! isSelected && (
+				<div className="block-library-html__preview-overlay"></div>
+			) }
+		</>
+	);
+}

package/src/image/block.json

@@ -88,6 +88,11 @@
 			"__experimentalDefaultControls": {
 				"radius": true
 			}
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
 		}
 	},
 	"styles": [

package/src/image/deprecated.js

@@ -176,16 +176,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-				id,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height, id } =
+				attributes;
 
 			const classes = classnames( {
 				[ `align${ align }` ]: align,
@@ -218,16 +210,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-				id,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height, id } =
+				attributes;
 
 			const image = (
 				<img
@@ -255,15 +239,8 @@ const deprecated = [
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				width,
-				height,
-			} = attributes;
+			const { url, alt, caption, align, href, width, height } =
+				attributes;
 			const extraImageProps = width || height ? { width, height } : {};
 			const image = (
 				<img src={ url } alt={ alt } { ...extraImageProps } />

package/src/image/edit.native.js

@@ -196,16 +196,13 @@ export class ImageEdit extends Component {
 
 		this.replacedFeaturedImage = false;
 
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
@@ -215,9 +212,8 @@ export class ImageEdit extends Component {
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
-		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
-			this
-		);
+		this.accessibilityLabelCreator =
+			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
 		this.onSizeChangeValue = this.onSizeChangeValue.bind( this );
 	}
@@ -270,12 +266,8 @@ export class ImageEdit extends Component {
 	}
 
 	componentDidUpdate( previousProps ) {
-		const {
-			image,
-			attributes,
-			setAttributes,
-			featuredImageId,
-		} = this.props;
+		const { image, attributes, setAttributes, featuredImageId } =
+			this.props;
 		if ( ! previousProps.image && image ) {
 			const url =
 				getUrlForSlug( image, attributes?.sizeSlug ) ||
@@ -436,6 +428,7 @@ export class ImageEdit extends Component {
 			id: media.id,
 			url: media.url,
 			caption: media.caption,
+			alt: media.alt,
 		};
 
 		let additionalAttributes;
@@ -469,11 +462,8 @@ export class ImageEdit extends Component {
 	}
 
 	onSelectURL( newURL ) {
-		const {
-			createErrorNotice,
-			imageDefaultSize,
-			setAttributes,
-		} = this.props;
+		const { createErrorNotice, imageDefaultSize, setAttributes } =
+			this.props;
 
 		if ( isURL( newURL ) ) {
 			this.setState( {
@@ -906,9 +896,8 @@ export class ImageEdit extends Component {
 export default compose( [
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( coreStore );
-		const { getSettings, wasBlockJustInserted } = select(
-			blockEditorStore
-		);
+		const { getSettings, wasBlockJustInserted } =
+			select( blockEditorStore );
 		const { getEditedPostAttribute } = select( 'core/editor' );
 		const {
 			attributes: { id, url },

package/src/image/image.js

@@ -29,6 +29,7 @@ import {
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -92,9 +93,8 @@ export default function Image( {
 	const { image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
-			const { getMultiSelectedBlockClientIds, getBlockName } = select(
-				blockEditorStore
-			);
+			const { getMultiSelectedBlockClientIds, getBlockName } =
+				select( blockEditorStore );
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
 				image:
@@ -111,42 +111,36 @@ export default function Image( {
 		},
 		[ id, isSelected ]
 	);
-	const {
-		canInsertCover,
-		imageEditing,
-		imageSizes,
-		maxWidth,
-		mediaUpload,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockRootClientId,
-				getSettings,
-				canInsertBlockType,
-			} = select( blockEditorStore );
-
-			const rootClientId = getBlockRootClientId( clientId );
-			const settings = pick( getSettings(), [
-				'imageEditing',
-				'imageSizes',
-				'maxWidth',
-				'mediaUpload',
-			] );
-
-			return {
-				...settings,
-				canInsertCover: canInsertBlockType(
-					'core/cover',
-					rootClientId
-				),
-			};
-		},
-		[ clientId ]
-	);
+	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					getSettings,
+					canInsertBlockType,
+				} = select( blockEditorStore );
+
+				const rootClientId = getBlockRootClientId( clientId );
+				const settings = pick( getSettings(), [
+					'imageEditing',
+					'imageSizes',
+					'maxWidth',
+					'mediaUpload',
+				] );
+
+				return {
+					...settings,
+					canInsertCover: canInsertBlockType(
+						'core/cover',
+						rootClientId
+					),
+				};
+			},
+			[ clientId ]
+		);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
-	const { createErrorNotice, createSuccessNotice } = useDispatch(
-		noticesStore
-	);
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
 	const [
@@ -583,6 +577,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					ref={ captionRef }
 					tagName="figcaption"
 					aria-label={ __( 'Image caption text' ) }

package/src/image/save.js

@@ -7,7 +7,11 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -60,7 +64,11 @@ export default function save( { attributes } ) {
 				image
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</>
 	);

package/src/image/style.scss

@@ -1,6 +1,4 @@
 .wp-block-image {
-	margin: 0 0 1em 0;
-
 	img {
 		height: auto;
 		max-width: 100%;