@wordpress/block-library 7.3.5 → 7.5.0

package/src/{comments-query-loop → comments}/save.js

@@ -3,9 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function CommentsQueryLoopSave( {
-	attributes: { tagName: Tag },
-} ) {
+export default function CommentsSave( { attributes: { tagName: Tag } } ) {
 	return (
 		<Tag { ...useBlockProps.save() }>
 			<InnerBlocks.Content />

package/src/comments-pagination/index.php

@@ -18,6 +18,10 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	if ( post_password_required() ) {
+		return;
+	}
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		get_block_wrapper_attributes(),

package/src/comments-title/index.php

@@ -14,6 +14,10 @@
  */
 function render_block_core_comments_title( $attributes ) {
 
+	if ( post_password_required() ) {
+		return;
+	}
+
 	$align_class_name    = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
 	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];

package/src/common.scss

@@ -116,11 +116,34 @@
 html :where(.has-border-color) {
 	border-style: solid;
 }
+html :where([style*="border-top-color"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-color"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-color"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-color"]) {
+	border-left-style: solid;
+}
 
 html :where([style*="border-width"]) {
 	border-style: solid;
 }
-
+html :where([style*="border-top-width"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-width"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-width"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-width"]) {
+	border-left-style: solid;
+}
 
 /**
  * Provide baseline responsiveness for images.

package/src/cover/edit.js

@@ -2,8 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import FastAverageColor from 'fast-average-color';
-import { colord, extend } from 'colord';
+import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
@@ -31,7 +30,6 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -74,11 +72,10 @@ import {
 	isContentPositionCenter,
 	getPositionClassName,
 } from './shared';
+import useCoverIsDark from './use-cover-is-dark';
 
 extend( [ namesPlugin ] );
 
-const { __Visualizer: BoxControlVisualizer } = BoxControl;
-
 function getInnerBlocksTemplate( attributes ) {
 	return [
 		[
@@ -92,13 +89,6 @@ function getInnerBlocksTemplate( attributes ) {
 	];
 }
 
-function retrieveFastAverageColor() {
-	if ( ! retrieveFastAverageColor.fastAverageColor ) {
-		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
-	}
-	return retrieveFastAverageColor.fastAverageColor;
-}
-
 function CoverHeightInput( {
 	onChange,
 	onUnitChange,
@@ -200,55 +190,6 @@ function ResizableCover( {
 	);
 }
 
-/**
- * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
- * background is dark or not.
- *
- * @param {?string} url          Url of the media background.
- * @param {?number} dimRatio     Transparency of the overlay color. If an image and
- *                               color are set, dimRatio is used to decide what is used
- *                               for background darkness checking purposes.
- * @param {?string} overlayColor String containing the overlay color value if one exists.
- * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
- *                               dom element that renders that media.
- *
- * @return {boolean} True if the cover background is considered "dark" and false otherwise.
- */
-function useCoverIsDark( url, dimRatio = 50, overlayColor, elementRef ) {
-	const [ isDark, setIsDark ] = useState( false );
-	useEffect( () => {
-		// If opacity is lower than 50 the dominant color is the image or video color,
-		// so use that color for the dark mode computation.
-		if ( url && dimRatio <= 50 && elementRef.current ) {
-			retrieveFastAverageColor().getColorAsync(
-				elementRef.current,
-				( color ) => {
-					setIsDark( color.isDark );
-				}
-			);
-		}
-	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
-	useEffect( () => {
-		// If opacity is greater than 50 the dominant color is the overlay color,
-		// so use that color for the dark mode computation.
-		if ( dimRatio > 50 || ! url ) {
-			if ( ! overlayColor ) {
-				// If no overlay color exists the overlay color is black (isDark )
-				setIsDark( true );
-				return;
-			}
-			setIsDark( colord( overlayColor ).isDark() );
-		}
-	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
-	useEffect( () => {
-		if ( ! url && ! overlayColor ) {
-			// Reset isDark.
-			setIsDark( false );
-		}
-	}, [ ! url && ! overlayColor, setIsDark ] );
-	return isDark;
-}
-
 function mediaPosition( { x, y } ) {
 	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
 }
@@ -313,7 +254,6 @@ function CoverEdit( {
 		isRepeated,
 		minHeight,
 		minHeightUnit,
-		style: styleAttribute,
 		alt,
 		allowedBlocks,
 		templateLock,
@@ -744,11 +684,6 @@ function CoverEdit( {
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
-				<BoxControlVisualizer
-					values={ styleAttribute?.spacing?.padding }
-					showValues={ styleAttribute?.visualizers?.padding }
-					className="block-library-cover__padding-visualizer"
-				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"
 					onResizeStart={ () => {

package/src/cover/edit.native.js

@@ -9,6 +9,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
+import classnames from 'classnames/dedupe';
 
 /**
  * WordPress dependencies
@@ -47,7 +48,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
@@ -71,6 +72,7 @@ import {
 	COVER_DEFAULT_HEIGHT,
 } from './shared';
 import Controls from './controls';
+import useCoverIsDark from './use-cover-is-dark';
 
 /**
  * Constants
@@ -113,6 +115,7 @@ const Cover = ( {
 		customGradient,
 		gradient,
 		overlayColor,
+		isDark,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -180,18 +183,6 @@ const Cover = ( {
 
 	const openMediaOptionsRef = useRef();
 
-	// Used to set a default color for its InnerBlocks
-	// since there's no system to inherit styles yet
-	// the RichText component will check if there are
-	// parent styles for the current block. If there are,
-	// it will use that color instead.
-	useEffect( () => {
-		// While we don't support theme colors.
-		if ( ! attributes.overlayColor || ( ! attributes.overlay && url ) ) {
-			setAttributes( { childrenStyles: styles.defaultColor } );
-		}
-	}, [ setAttributes ] );
-
 	// Initialize uploading flag to false, awaiting sync.
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
@@ -257,6 +248,42 @@ const Cover = ( {
 		openGeneralSidebar();
 	}
 
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	const isCoverDark = useCoverIsDark(
+		isDark,
+		url,
+		dimRatio,
+		overlayColorValue?.color
+	);
+
+	useEffect( () => {
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		// Used to set a default color for its InnerBlocks
+		// since there's no system to inherit styles yet
+		// the RichText component will check if there are
+		// parent styles for the current block. If there are,
+		// it will use that color instead.
+		setAttributes( {
+			isDark: isCoverDark,
+			childrenStyles: isCoverDark
+				? styles.defaultColor
+				: styles.defaultColorLightMode,
+		} );
+
+		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
+		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
+			const className = classnames( attributes.className, {
+				'is-light': false,
+			} );
+			setAttributes( {
+				className: className !== '' ? className : undefined,
+			} );
+		}
+	}, [ isCoverDark ] );
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark

package/src/cover/style.native.scss

@@ -49,6 +49,10 @@
 	color: $white;
 }
 
+.defaultColorLightMode {
+	color: $black;
+}
+
 .background {
 	width: 100%;
 	height: 100%;

package/src/cover/style.scss

@@ -96,10 +96,6 @@
 		}
 	}
 
-	.block-library-cover__padding-visualizer {
-		z-index: z-index(".block-library-cover__padding-visualizer");
-	}
-
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
@@ -17,16 +17,16 @@ exports[`color settings sets a color for the overlay background when the placeho
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"

package/src/cover/test/transforms.js

@@ -0,0 +1,301 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getBlockTypes,
+	registerBlockType,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { metadata as coverMetadata, settings as coverSettings } from '../index';
+import {
+	metadata as groupMetadata,
+	settings as groupSettings,
+} from '../../group';
+
+describe( 'transforms', () => {
+	beforeAll( () => {
+		registerBlockType( coverMetadata, coverSettings );
+		registerBlockType( groupMetadata, groupSettings );
+	} );
+
+	afterAll( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'transform from Group to Cover', () => {
+		it( 'should return child Cover block when Group block contains only a single Cover block', () => {
+			const block = createBlock(
+				'core/group',
+				{ gradient: 'my-gradient' },
+				[ createBlock( 'core/cover', { dimRatio: 10 } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { dimRatio: 10 },
+				innerBlocks: [],
+				name: 'core/cover',
+			} );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named gradient up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom gradient up to the parent Cover block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						gradient,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customGradient: gradient },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named background color up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				backgroundColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { overlayColor: 'my-background-color' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'backgroundColor'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom background color up to the parent Cover block', () => {
+			const background = '#ff0000';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						background,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customOverlayColor: background },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+	} );
+
+	describe( 'transform from Cover to Group', () => {
+		it( 'should transfer named gradient color to Group block', () => {
+			const block = createBlock( 'core/cover', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom gradient color to style object in Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/cover', {
+				customGradient: gradient,
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { gradient } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer named background color to backgroundColor attribute in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				overlayColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { backgroundColor: 'my-background-color' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom background color to style object in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				customOverlayColor: '#ff0000',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { background: '#ff0000' } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named gradient color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { fontSize: 'medium', gradient: 'my-gradient' },
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom gradient color to style object in child Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock(
+				'core/cover',
+				{
+					customGradient: gradient,
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { gradient } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named background color to backgroundColor attribute in child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					overlayColor: 'my-background-color',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					backgroundColor: 'my-background-color',
+					fontSize: 'medium',
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom background color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					customOverlayColor: '#ff0000',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should skip merging Cover block gradient into child Group block if Group block has background color', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[
+					createBlock( 'core/group', {
+						fontSize: 'medium',
+						style: { color: { background: '#ff0000' } },
+					} ),
+				]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+			expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+	} );
+} );