@wordpress/block-library 7.7.0 → 7.8.0

package/src/cover/edit/inspector-controls.js

@@ -21,8 +21,9 @@ import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSetting,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -138,6 +139,9 @@ export default function CoverInspectorControls( {
 			: [ coverRef.current.style, 'backgroundPosition' ];
 		styleOfRef[ property ] = mediaPosition( value );
 	};
+
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
 		<>
 			<InspectorControls>
@@ -220,23 +224,50 @@ export default function CoverInspectorControls( {
 						</PanelRow>
 					</PanelBody>
 				) }
-				<PanelColorGradientSettings
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
-					title={ __( 'Overlay' ) }
-					initialOpen={ true }
 					settings={ [
 						{
 							colorValue: overlayColor.color,
 							gradientValue,
+							label: __( 'Overlay' ),
 							onColorChange: setOverlayColor,
 							onGradientChange: setGradient,
-							label: __( 'Color' ),
+							isShownByDefault: true,
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
 						},
 					] }
+					panelId={ clientId }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => {
+						// If there's a media background the dimRatio will be
+						// defaulted to 50 whereas it will be 100 for colors.
+						return dimRatio === undefined
+							? false
+							: dimRatio !== ( url ? 50 : 100 );
+					} }
+					label={ __( 'Overlay opacity' ) }
+					onDeselect={ () =>
+						setAttributes( { dimRatio: url ? 50 : 100 } )
+					}
+					resetAllFilter={ () => ( {
+						dimRatio: url ? 50 : 100,
+					} ) }
+					isShownByDefault
+					panelId={ clientId }
 				>
 					<RangeControl
-						label={ __( 'Opacity' ) }
+						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRation ) =>
 							setAttributes( {
@@ -248,7 +279,7 @@ export default function CoverInspectorControls( {
 						step={ 10 }
 						required
 					/>
-				</PanelColorGradientSettings>
+				</ToolsPanelItem>
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="dimensions">
 				<ToolsPanelItem

package/src/cover/edit.native.js

@@ -117,9 +117,8 @@ const Cover = ( {
 		overlayColor,
 		isDark,
 	} = attributes;
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	useEffect( () => {
 		let isCurrent = true;
@@ -176,10 +175,8 @@ const Cover = ( {
 
 	const hasOnlyColorBackground = ! url && ( hasBackground || hasInnerBlocks );
 
-	const [
-		isCustomColorPickerShowing,
-		setCustomColorPickerShowing,
-	] = useState( false );
+	const [ isCustomColorPickerShowing, setCustomColorPickerShowing ] =
+		useState( false );
 
 	const openMediaOptionsRef = useRef();
 
@@ -248,9 +245,8 @@ const Cover = ( {
 		openGeneralSidebar();
 	}
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const isCoverDark = useCoverIsDark(
 		isDark,
 		url,
@@ -622,9 +618,8 @@ const Cover = ( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 

package/src/cover/editor.scss

@@ -62,6 +62,15 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+
+	.wp-block-cover__image--placeholder-image {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
 }
 
 [data-align="left"] > .wp-block-cover,
@@ -98,3 +107,7 @@
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
 	background-attachment: scroll;
 }
+
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+	margin-top: $grid-unit-30;
+}

package/src/cover/save.js

@@ -84,9 +84,8 @@ export default function save( { attributes } ) {
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			'has-custom-content-position': ! isContentPositionCenter(
-				contentPosition
-			),
+			'has-custom-content-position':
+				! isContentPositionCenter( contentPosition ),
 		},
 		getPositionClassName( contentPosition )
 	);

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

@@ -493,13 +493,10 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const {
-			getByTestId,
-			getByA11yLabel,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
-		} );
+		const { getByTestId, getByA11yLabel, getByText } =
+			await initializeEditor( {
+				initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+			} );
 
 		// Wait for the block to be created.
 		const coverBlock = await waitFor( () =>

package/src/cover/transforms.js

@@ -66,13 +66,8 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/group' ],
 			transform: ( attributes, innerBlocks ) => {
-				const {
-					align,
-					anchor,
-					backgroundColor,
-					gradient,
-					style,
-				} = attributes;
+				const { align, anchor, backgroundColor, gradient, style } =
+					attributes;
 
 				// If the Group block being transformed has a Cover block as its
 				// only child return that Cover block.

package/src/embed/block.json

@@ -35,7 +35,12 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"

package/src/embed/edit.js

@@ -56,47 +56,45 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const {
-		preview,
-		fetching,
-		themeSupportsResponsive,
-		cannotEmbed,
-	} = useSelect(
-		( select ) => {
-			const {
-				getEmbedPreview,
-				isPreviewEmbedFallback,
-				isRequestingEmbedPreview,
-				getThemeSupports,
-			} = select( coreStore );
-			if ( ! attributesUrl ) {
-				return { fetching: false, cannotEmbed: false };
-			}
+	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
+		useSelect(
+			( select ) => {
+				const {
+					getEmbedPreview,
+					isPreviewEmbedFallback,
+					isRequestingEmbedPreview,
+					getThemeSupports,
+				} = select( coreStore );
+				if ( ! attributesUrl ) {
+					return { fetching: false, cannotEmbed: false };
+				}
 
-			const embedPreview = getEmbedPreview( attributesUrl );
-			const previewIsFallback = isPreviewEmbedFallback( attributesUrl );
-
-			// The external oEmbed provider does not exist. We got no type info and no html.
-			const badEmbedProvider =
-				embedPreview?.html === false &&
-				embedPreview?.type === undefined;
-			// Some WordPress URLs that can't be embedded will cause the API to return
-			// a valid JSON response with no HTML and `data.status` set to 404, rather
-			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.data?.status === 404;
-			const validPreview =
-				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
-			return {
-				preview: validPreview ? embedPreview : undefined,
-				fetching: isRequestingEmbedPreview( attributesUrl ),
-				themeSupportsResponsive: getThemeSupports()[
-					'responsive-embeds'
-				],
-				cannotEmbed: ! validPreview || previewIsFallback,
-			};
-		},
-		[ attributesUrl ]
-	);
+				const embedPreview = getEmbedPreview( attributesUrl );
+				const previewIsFallback =
+					isPreviewEmbedFallback( attributesUrl );
+
+				// The external oEmbed provider does not exist. We got no type info and no html.
+				const badEmbedProvider =
+					embedPreview?.html === false &&
+					embedPreview?.type === undefined;
+				// Some WordPress URLs that can't be embedded will cause the API to return
+				// a valid JSON response with no HTML and `data.status` set to 404, rather
+				// than generating a fallback response as other embeds do.
+				const wordpressCantEmbed = embedPreview?.data?.status === 404;
+				const validPreview =
+					!! embedPreview &&
+					! badEmbedProvider &&
+					! wordpressCantEmbed;
+				return {
+					preview: validPreview ? embedPreview : undefined,
+					fetching: isRequestingEmbedPreview( attributesUrl ),
+					themeSupportsResponsive:
+						getThemeSupports()[ 'responsive-embeds' ],
+					cannotEmbed: ! validPreview || previewIsFallback,
+				};
+			},
+			[ attributesUrl ]
+		);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.

package/src/embed/edit.native.js

@@ -72,57 +72,53 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState(
 		isSelected && wasBlockJustInserted && ! url
 	);
-	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] = useState(
-		isEditingURL
-	);
+	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
+		useState( isEditingURL );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const {
-		preview,
-		fetching,
-		themeSupportsResponsive,
-		cannotEmbed,
-	} = useSelect(
-		( select ) => {
-			const {
-				getEmbedPreview,
-				hasFinishedResolution,
-				isPreviewEmbedFallback,
-				getThemeSupports,
-			} = select( coreStore );
-			if ( ! url ) {
-				return { fetching: false, cannotEmbed: false };
-			}
+	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
+		useSelect(
+			( select ) => {
+				const {
+					getEmbedPreview,
+					hasFinishedResolution,
+					isPreviewEmbedFallback,
+					getThemeSupports,
+				} = select( coreStore );
+				if ( ! url ) {
+					return { fetching: false, cannotEmbed: false };
+				}
 
-			const embedPreview = getEmbedPreview( url );
-			const hasResolvedEmbedPreview = hasFinishedResolution(
-				'getEmbedPreview',
-				[ url ]
-			);
-			const previewIsFallback = isPreviewEmbedFallback( url );
+				const embedPreview = getEmbedPreview( url );
+				const hasResolvedEmbedPreview = hasFinishedResolution(
+					'getEmbedPreview',
+					[ url ]
+				);
+				const previewIsFallback = isPreviewEmbedFallback( url );
 
-			// The external oEmbed provider does not exist. We got no type info and no html.
-			const badEmbedProvider =
-				embedPreview?.html === false &&
-				embedPreview?.type === undefined;
-			// Some WordPress URLs that can't be embedded will cause the API to return
-			// a valid JSON response with no HTML and `code` set to 404, rather
-			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.code === '404';
-			const validPreview =
-				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
+				// The external oEmbed provider does not exist. We got no type info and no html.
+				const badEmbedProvider =
+					embedPreview?.html === false &&
+					embedPreview?.type === undefined;
+				// Some WordPress URLs that can't be embedded will cause the API to return
+				// a valid JSON response with no HTML and `code` set to 404, rather
+				// than generating a fallback response as other embeds do.
+				const wordpressCantEmbed = embedPreview?.code === '404';
+				const validPreview =
+					!! embedPreview &&
+					! badEmbedProvider &&
+					! wordpressCantEmbed;
 
-			return {
-				preview: validPreview ? embedPreview : undefined,
-				fetching: ! hasResolvedEmbedPreview,
-				themeSupportsResponsive: getThemeSupports()[
-					'responsive-embeds'
-				],
-				cannotEmbed: ! validPreview || previewIsFallback,
-			};
-		},
-		[ url ]
-	);
+				return {
+					preview: validPreview ? embedPreview : undefined,
+					fetching: ! hasResolvedEmbedPreview,
+					themeSupportsResponsive:
+						getThemeSupports()[ 'responsive-embeds' ],
+					cannotEmbed: ! validPreview || previewIsFallback,
+				};
+			},
+			[ url ]
+		);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
@@ -187,9 +183,10 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
-	useEffect( () => setShowEmbedBottomSheet( isEditingURL ), [
-		isEditingURL,
-	] );
+	useEffect(
+		() => setShowEmbedBottomSheet( isEditingURL ),
+		[ isEditingURL ]
+	);
 
 	const onEditURL = useCallback( ( value ) => {
 		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,

package/src/embed/embed-controls.native.js

@@ -30,9 +30,8 @@ const EmbedControls = ( {
 	linkLabel,
 	onEditURL,
 } ) => {
-	const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch(
-		editPostStore
-	);
+	const { closeGeneralSidebar: closeSettingsBottomSheet } =
+		useDispatch( editPostStore );
 
 	return (
 		<>

package/src/embed/style.scss

@@ -20,7 +20,6 @@
 }
 
 .wp-block-embed {
-	margin: 0 0 1em 0;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	// Supply caption styles to embeds, even if the theme hasn't opted in.

package/src/embed/test/index.native.js

@@ -246,10 +246,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-			} = await insertEmbedBlock();
+			const { getByPlaceholderText, getByTestId } =
+				await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
@@ -336,11 +334,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-				getByText,
-			} = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
+			const { getByPlaceholderText, getByTestId, getByText } =
+				await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
 			fireEvent.press( getByText( 'ADD LINK' ) );
@@ -412,10 +407,8 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const {
-				getByA11yLabel,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -437,11 +430,8 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const {
-				getByA11yLabel,
-				getByDisplayValue,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByDisplayValue, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -673,10 +663,8 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const {
-					getByA11yLabel,
-					getByText,
-				} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+				const { getByA11yLabel, getByText } =
+					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press(
@@ -743,10 +731,8 @@ describe( 'Embed block', () => {
 				);
 			} );
 
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
 			fireEvent.press( getByText( 'More options' ) );
@@ -955,11 +941,8 @@ describe( 'Embed block', () => {
 	describe( 'insert via slash inserter', () => {
 		it( 'insert generic embed block', async () => {
 			const embedBlockSlashInserter = '/Embed';
-			const {
-				getByPlaceholderText,
-				getByA11yLabel,
-				getByText,
-			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+			const { getByPlaceholderText, getByA11yLabel, getByText } =
+				await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
 
 			const paragraphText = getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
@@ -997,13 +980,10 @@ describe( 'Embed block', () => {
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
 			it( `inserts ${ title } embed block`, async () => {
 				const embedBlockSlashInserter = `/${ title }`;
-				const {
-					getByPlaceholderText,
-					getByA11yLabel,
-					getByText,
-				} = await initializeEditor( {
-					initialHtml: EMPTY_PARAGRAPH_HTML,
-				} );
+				const { getByPlaceholderText, getByA11yLabel, getByText } =
+					await initializeEditor( {
+						initialHtml: EMPTY_PARAGRAPH_HTML,
+					} );
 
 				const paragraphText = getByPlaceholderText( 'Start writing…' );
 				fireEvent( paragraphText, 'focus' );
@@ -1043,10 +1023,8 @@ describe( 'Embed block', () => {
 	it( 'sets block caption', async () => {
 		const expectedCaption = 'Caption';
 
-		const {
-			getByPlaceholderText,
-			getByDisplayValue,
-		} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+		const { getByPlaceholderText, getByDisplayValue } =
+			await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 		// Set a caption.
 		const captionField = getByPlaceholderText( 'Add caption' );
@@ -1087,10 +1065,8 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -1106,10 +1082,8 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(

package/src/file/edit.js

@@ -91,10 +91,8 @@ function FileEdit( {
 		[ id ]
 	);
 
-	const {
-		toggleSelection,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.

package/src/file/edit.native.js

@@ -72,28 +72,22 @@ export class FileEdit extends Component {
 		this.onLayout = this.onLayout.bind( this );
 		this.onSelectFile = this.onSelectFile.bind( this );
 		this.onChangeFileName = this.onChangeFileName.bind( this );
-		this.onChangeDownloadButtonText = this.onChangeDownloadButtonText.bind(
-			this
-		);
+		this.onChangeDownloadButtonText =
+			this.onChangeDownloadButtonText.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		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.getFileComponent = this.getFileComponent.bind( this );
-		this.onChangeDownloadButtonVisibility = this.onChangeDownloadButtonVisibility.bind(
-			this
-		);
+		this.onChangeDownloadButtonVisibility =
+			this.onChangeDownloadButtonVisibility.bind( this );
 		this.onCopyURL = this.onCopyURL.bind( this );
-		this.onChangeOpenInNewWindow = this.onChangeOpenInNewWindow.bind(
-			this
-		);
+		this.onChangeOpenInNewWindow =
+			this.onChangeOpenInNewWindow.bind( this );
 
-		this.onChangeLinkDestinationOption = this.onChangeLinkDestinationOption.bind(
-			this
-		);
+		this.onChangeLinkDestinationOption =
+			this.onChangeLinkDestinationOption.bind( this );
 		this.onShowLinkSettings = this.onShowLinkSettings.bind( this );
 		this.onFilePressed = this.onFilePressed.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
@@ -398,13 +392,8 @@ export class FileEdit extends Component {
 		const { attributes, media, isSelected } = this.props;
 		const { isButtonFocused, placeholderTextWidth } = this.state;
 
-		const {
-			fileName,
-			downloadButtonText,
-			id,
-			showDownloadButton,
-			align,
-		} = attributes;
+		const { fileName, downloadButtonText, id, showDownloadButton, align } =
+			attributes;
 
 		const minWidth =
 			isButtonFocused ||