@wordpress/block-library 6.0.23 → 7.0.0

package/src/cover/edit.native.js

@@ -40,8 +40,9 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
-	withColors,
-	__experimentalUseGradient,
+	getColorObjectByColorValue,
+	getColorObjectByAttributeValues,
+	getGradientValueBySlug,
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -83,13 +84,13 @@ const Cover = ( {
 	getStylesFromColorScheme,
 	isParentSelected,
 	onFocus,
-	overlayColor,
 	setAttributes,
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
 	isSelected,
 	selectBlock,
 	blockWidth,
+	hasInnerBlocks,
 } ) => {
 	const {
 		backgroundType,
@@ -103,6 +104,9 @@ const Cover = ( {
 		minHeightUnit = 'px',
 		allowedBlocks,
 		templateLock,
+		customGradient,
+		gradient,
+		overlayColor,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -113,7 +117,7 @@ const Cover = ( {
 
 		// sync with local media store
 		mediaUploadSync();
-		AccessibilityInfo.addEventListener(
+		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			setIsScreenReaderEnabled
 		);
@@ -126,10 +130,7 @@ const Cover = ( {
 
 		return () => {
 			isCurrent = false;
-			AccessibilityInfo.removeEventListener(
-				'screenReaderChanged',
-				setIsScreenReaderEnabled
-			);
+			a11yInfoChangeSubscription.remove();
 		};
 	}, [] );
 
@@ -145,18 +146,24 @@ const Cover = ( {
 	const coverDefaultPalette = {
 		colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
 	};
-
-	const { gradientValue } = __experimentalUseGradient();
+	const gradients = useSetting( 'color.gradients' ) || [];
+	const gradientValue =
+		customGradient || getGradientValueBySlug( gradients, gradient );
+	const overlayColorValue = getColorObjectByAttributeValues(
+		colorsDefault,
+		overlayColor
+	);
 
 	const hasBackground = !! (
 		url ||
 		( style && style.color && style.color.background ) ||
 		attributes.overlayColor ||
-		overlayColor.color ||
+		overlayColorValue.color ||
+		customOverlayColor ||
 		gradientValue
 	);
 
-	const hasOnlyColorBackground = ! url && hasBackground;
+	const hasOnlyColorBackground = ! url && ( hasBackground || hasInnerBlocks );
 
 	const [
 		isCustomColorPickerShowing,
@@ -225,10 +232,12 @@ const Cover = ( {
 	}, [ closeSettingsBottomSheet ] );
 
 	function setColor( color ) {
+		const colorValue = getColorObjectByColorValue( colorsDefault, color );
+
 		setAttributes( {
 			// clear all related attributes (only one should be set)
-			overlayColor: undefined,
-			customOverlayColor: color,
+			overlayColor: colorValue?.slug ?? undefined,
+			customOverlayColor: ( ! colorValue?.slug && color ) ?? undefined,
 			gradient: undefined,
 			customGradient: undefined,
 		} );
@@ -251,12 +260,12 @@ const Cover = ( {
 		! gradientValue && {
 			backgroundColor:
 				customOverlayColor ||
-				overlayColor?.color ||
+				overlayColorValue?.color ||
 				style?.color?.background ||
 				styles.overlay?.color,
 		},
 		// While we don't support theme colors we add a default bg color
-		! overlayColor.color && ! url ? backgroundColor : {},
+		! overlayColorValue.color && ! url ? backgroundColor : {},
 		isImage &&
 			isParentSelected &&
 			! isUploadInProgress &&
@@ -432,7 +441,10 @@ const Cover = ( {
 		</TouchableWithoutFeedback>
 	);
 
-	if ( ! hasBackground || isCustomColorPickerShowing ) {
+	if (
+		( ! hasBackground && ! hasInnerBlocks ) ||
+		isCustomColorPickerShowing
+	) {
 		return (
 			<View>
 				{ isCustomColorPickerShowing && colorPickerControls }
@@ -575,17 +587,21 @@ const Cover = ( {
 };
 
 export default compose( [
-	withColors( { overlayColor: 'background-color' } ),
 	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlock } = select(
+			blockEditorStore
+		);
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		const { getSettings } = select( blockEditorStore );
 
+		const hasInnerBlocks = getBlock( clientId )?.innerBlocks.length > 0;
+
 		return {
 			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
+			hasInnerBlocks,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {

package/src/cover/overlay-color-settings.native.js

@@ -74,6 +74,15 @@ function OverlayColorSettings( {
 			}
 		};
 
+		const onColorCleared = () => {
+			setAttributes( {
+				overlayColor: undefined,
+				customOverlayColor: undefined,
+				gradient: undefined,
+				customGradient: undefined,
+			} );
+		};
+
 		return [
 			{
 				label: __( 'Color' ),
@@ -81,6 +90,7 @@ function OverlayColorSettings( {
 				colorValue,
 				gradientValue,
 				onGradientChange,
+				onColorCleared,
 			},
 		];
 	}, [ colorValue, gradientValue, colors, gradients ] );

package/src/cover/save.js

@@ -88,19 +88,25 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
+	const gradientValue = gradient || customGradient;
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
 				className={ classnames(
+					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
-					'wp-block-cover__gradient-background',
-					gradientClass,
 					{
 						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradient || customGradient,
-						[ gradientClass ]: ! url && gradientClass,
+						// For backwards compatibility. Former versions of the Cover Block applied
+						// `.wp-block-cover__gradient-background` in the presence of
+						// media, a gradient and a dim.
+						'wp-block-cover__gradient-background':
+							url && gradientValue && dimRatio !== 0,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
 					}
 				) }
 				style={ bgStyle }

package/src/cover/style.scss

@@ -57,9 +57,11 @@
 		background-color: inherit;
 	}
 
-	// the first selector is required for old Cover markup
+	// The first selector is required for old Cover markup/
+	// Keep .wp-block-cover__gradient-background for v8 deprecation.
 	&.has-background-dim:not(.has-background-gradient)::before,
 	.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;
@@ -70,12 +72,32 @@
 		opacity: 0.5;
 	}
 
+	// The following styles are needed to support legacy blocks added prior to the update
+	// that moved opacity to a nested span.
+	// https://github.com/WordPress/gutenberg/pull/35065
+	// https://github.com/WordPress/gutenberg/pull/38362
+	@for $i from 1 through 10 {
+		&.has-background-dim.has-background-dim-#{ $i * 10 } {
+			&:not(.has-background-gradient)::before,
+			.wp-block-cover__background,
+			.wp-block-cover__gradient-background {
+				opacity: $i * 0.1;
+			}
+		}
+	}
+
 	@for $i from 0 through 10 {
-		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
+		// Keep .wp-block-cover__gradient-background for v8 deprecation
+		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 },
+		.wp-block-cover__background.has-background-dim.has-background-dim-#{ $i * 10 } {
 			opacity: $i * 0.1;
 		}
 	}
 
+	.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

@@ -0,0 +1,33 @@
+// 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…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
+"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color 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 -->"
+`;
+
+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…\\"} -->
+<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…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;

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

@@ -1,15 +1,22 @@
 /**
  * External dependencies
  */
-import { Image } from 'react-native';
-import { render, fireEvent, waitFor } from 'test/helpers';
+import { AccessibilityInfo, Image } from 'react-native';
+import {
+	getEditorHtml,
+	initializeEditor,
+	render,
+	fireEvent,
+	waitFor,
+	within,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheetSettings, BlockEdit } from '@wordpress/block-editor';
 import { SlotFillProvider } from '@wordpress/components';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks';
 import {
 	requestMediaPicker,
 	requestMediaEditor,
@@ -19,7 +26,9 @@ import {
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE } from '../shared';
-import { metadata, settings, name } from '../index';
+import * as paragraph from '../../paragraph';
+import * as cover from '..';
+import { registerBlock } from '../..';
 
 // Avoid errors due to mocked stylesheet files missing required selectors
 jest.mock( '@wordpress/compose', () => ( {
@@ -33,10 +42,25 @@ jest.mock( '@wordpress/compose', () => ( {
 	) ),
 } ) );
 
+const COVER_BLOCK_PLACEHOLDER_HTML = `<!-- wp:cover -->
+<div class="wp-block-cover"><span aria-hidden="true" class="has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
+<!-- /wp:cover -->`;
+const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish-gray"} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="has-cyan-bluish-gray-background-color has-background-dim-100 wp-block-cover__gradient-background 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 -->`;
+
+const COLOR_PINK = '#f78da7';
+const COLOR_RED = '#cf2e2e';
+const COLOR_GRAY = '#abb8c3';
+const GRADIENT_GREEN =
+	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
+
 // Simplified tree to render Cover edit within slot
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
-		<BlockEdit isSelected name={ name } clientId={ 0 } { ...props } />
+		<BlockEdit isSelected name={ cover.name } clientId={ 0 } { ...props } />
 		<BottomSheetSettings isVisible />
 	</SlotFillProvider>
 );
@@ -55,26 +79,24 @@ beforeAll( () => {
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
+	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
+		Promise.resolve( true )
+	);
+
 	// Register required blocks
-	registerBlockType( name, {
-		...metadata,
-		...settings,
-	} );
-	registerBlockType( 'core/paragraph', {
-		category: 'text',
-		title: 'Paragraph',
-		edit: () => {},
-		save: () => {},
-	} );
+	registerBlock( paragraph );
+	registerBlock( cover );
+	setDefaultBlockName( paragraph.name );
 } );
 
 afterAll( () => {
 	// Restore mocks
 	Image.getSize.mockRestore();
+	AccessibilityInfo.isScreenReaderEnabled.mockReset();
 
 	// Clean up registered blocks
-	unregisterBlockType( name );
-	unregisterBlockType( 'core/paragraph' );
+	unregisterBlockType( paragraph.name );
+	unregisterBlockType( cover.name );
 } );
 
 describe( 'when no media is attached', () => {
@@ -270,3 +292,248 @@ describe( 'when an image is attached', () => {
 		);
 	} );
 } );
+
+describe( 'color settings', () => {
+	it( 'sets a color for the overlay background when the placeholder is visible', async () => {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		const block = await waitFor( () =>
+			getByA11yLabel( 'Cover block. Empty' )
+		);
+		expect( block ).toBeDefined();
+
+		// Select a color from the placeholder palette
+		const colorPalette = await waitFor( () =>
+			getByTestId( 'color-palette' )
+		);
+		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
+
+		expect( colorButton ).toBeDefined();
+		fireEvent.press( colorButton );
+
+		// Wait for the block to be created
+		const coverBlockWithOverlay = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		fireEvent.press( coverBlockWithOverlay );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorPaletteButton = await waitFor( () =>
+			getByTestId( COLOR_PINK )
+		);
+		expect( colorPaletteButton ).toBeDefined();
+
+		// Select another color
+		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		fireEvent.press( newColorButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+
+		// Wait for the block to be created
+		const coverBlock = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		expect( coverBlock ).toBeDefined();
+		fireEvent.press( coverBlock );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		expect( colorButton ).toBeDefined();
+
+		// Open the gradients
+		const gradientsButton = await waitFor( () =>
+			getByA11yLabel( 'Gradient' )
+		);
+		expect( gradientsButton ).toBeDefined();
+
+		fireEvent( gradientsButton, 'layout', {
+			nativeEvent: { layout: { width: 80, height: 26 } },
+		} );
+		fireEvent.press( gradientsButton );
+
+		// Find the gradient color
+		const newGradientButton = await waitFor( () =>
+			getByTestId( GRADIENT_GREEN )
+		);
+		expect( newGradientButton ).toBeDefined();
+		fireEvent.press( newGradientButton );
+
+		// Dismiss the Block Settings modal
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'toggles between solid colors and gradients', async () => {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		const block = await waitFor( () =>
+			getByA11yLabel( 'Cover block. Empty' )
+		);
+		expect( block ).toBeDefined();
+
+		// Select a color from the placeholder palette
+		const colorPalette = await waitFor( () =>
+			getByTestId( 'color-palette' )
+		);
+		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
+
+		expect( colorButton ).toBeDefined();
+		fireEvent.press( colorButton );
+
+		// Wait for the block to be created
+		const coverBlockWithOverlay = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		fireEvent.press( coverBlockWithOverlay );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorPaletteButton = await waitFor( () =>
+			getByTestId( COLOR_PINK )
+		);
+		expect( colorPaletteButton ).toBeDefined();
+
+		// Select another color
+		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		fireEvent.press( newColorButton );
+
+		// Open the gradients
+		const gradientsButton = await waitFor( () =>
+			getByA11yLabel( 'Gradient' )
+		);
+		expect( gradientsButton ).toBeDefined();
+
+		fireEvent( gradientsButton, 'layout', {
+			nativeEvent: { layout: { width: 80, height: 26 } },
+		} );
+		fireEvent.press( gradientsButton );
+
+		// Find the gradient color
+		const newGradientButton = await waitFor( () =>
+			getByTestId( GRADIENT_GREEN )
+		);
+		expect( newGradientButton ).toBeDefined();
+		fireEvent.press( newGradientButton );
+
+		// Go back to the settings list
+		fireEvent.press( await waitFor( () => getByA11yLabel( 'Go back' ) ) );
+
+		// Find the color setting
+		const colorSetting = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorSetting ).toBeDefined();
+		fireEvent.press( colorSetting );
+
+		// Dismiss the Block Settings modal
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
+		const {
+			getByTestId,
+			getByA11yLabel,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+
+		// Wait for the block to be created
+		const coverBlock = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		expect( coverBlock ).toBeDefined();
+		fireEvent.press( coverBlock );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		expect( colorButton ).toBeDefined();
+
+		// Reset the selected color
+		const resetButton = await waitFor( () => getByText( 'Reset' ) );
+		expect( resetButton ).toBeDefined();
+		fireEvent.press( resetButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/editor.scss

@@ -5,6 +5,9 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comments-query-loop/editor.scss";
+@import "./comments-pagination/editor.scss";
+@import "./comments-pagination-numbers/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

package/src/embed/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/embed",
 	"title": "Embed",