diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index df81a2f9b1d1ee..4aeab08404b739 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -18,6 +18,7 @@ import { ImageWithFocalPoint, PanelBody, RangeControl, + BottomSheet, ToolbarButton, ToolbarGroup, Gradient, @@ -35,7 +36,7 @@ import { __experimentalUseGradient, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import { cover as icon, replace } from '@wordpress/icons'; import { getProtocol } from '@wordpress/url'; @@ -75,6 +76,7 @@ const Cover = ( { onFocus, overlayColor, setAttributes, + closeSettingsBottomSheet, } ) => { const { backgroundType, @@ -225,6 +227,20 @@ const Cover = ( { style={ styles.rangeCellContainer } /> + + { url ? ( + + { + setAttributes( { id: undefined, url: undefined } ); + closeSettingsBottomSheet(); + } } + /> + + ) : null } ); @@ -364,5 +380,13 @@ export default compose( [ isParentSelected: selectedBlockClientId === clientId, }; } ), + withDispatch( ( dispatch ) => { + return { + closeSettingsBottomSheet() { + dispatch( 'core/edit-post' ).closeGeneralSidebar(); + }, + }; + } ), + withPreferredColorScheme, ] )( Cover ); diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 59d23d8999b31d..9f556ecac27865 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -71,3 +71,7 @@ width: 100%; height: 100%; } + +.clearMediaButton { + color: $alert-red; +}