diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
index 2703aa3988d64e..6c703ad2eadb4d 100644
--- a/packages/block-editor/src/components/background-image-control/index.js
+++ b/packages/block-editor/src/components/background-image-control/index.js
@@ -24,6 +24,7 @@ import {
Placeholder,
Spinner,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
+ Button,
} from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
@@ -378,6 +379,9 @@ function BackgroundImageControls( {
/>
}
variant="secondary"
+ renderToggle={ ( props ) => (
+
+ ) }
onError={ onUploadError }
onReset={ () => {
closeAndFocus();
diff --git a/packages/block-editor/src/components/background-image-control/style.scss b/packages/block-editor/src/components/background-image-control/style.scss
index cde8044c24c121..b9c94916039c44 100644
--- a/packages/block-editor/src/components/background-image-control/style.scss
+++ b/packages/block-editor/src/components/background-image-control/style.scss
@@ -23,7 +23,10 @@
.components-dropdown {
display: block;
- height: 36px;
+
+ .block-editor-global-styles-background-panel__dropdown-toggle {
+ height: 40px;
+ }
}
}
@@ -44,7 +47,6 @@
.components-dropdown {
display: block;
- height: 36px;
}
button.components-button {
diff --git a/packages/block-editor/src/components/media-replace-flow/README.md b/packages/block-editor/src/components/media-replace-flow/README.md
index a5808ab9561980..b3427efffbcf1f 100644
--- a/packages/block-editor/src/components/media-replace-flow/README.md
+++ b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -98,3 +98,10 @@ If passed, children are rendered inside the dropdown.
- Required: No
If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.
+
+### renderToggle
+
+- Type: `func`
+- Required: No
+
+If passed, it will be used to render the provided button instead of the default one. It should accept and pass through `button` props to a `button` element.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index c2e1a43d2013e6..53c2a66634f0ae 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,16 +1,15 @@
/**
* WordPress dependencies
*/
-import { useRef } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import {
FormFileUpload,
NavigableMenu,
MenuItem,
- ToolbarButton,
Dropdown,
withFilters,
+ ToolbarButton,
} from '@wordpress/components';
import { useSelect, withDispatch } from '@wordpress/data';
import { DOWN } from '@wordpress/keycodes';
@@ -55,9 +54,9 @@ const MediaReplaceFlow = ( {
addToGallery,
handleUpload = true,
popoverProps,
+ renderToggle,
} ) => {
const { getSettings } = useSelect( blockEditorStore );
- const editMediaButtonRef = useRef();
const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
const onUploadError = ( message ) => {
@@ -133,17 +132,27 @@ const MediaReplaceFlow = ( {
(
-
- { name }
-
- ) }
+ renderToggle={ ( { isOpen, onToggle } ) => {
+ if ( renderToggle ) {
+ return renderToggle( {
+ 'aria-expanded': isOpen,
+ 'aria-haspopup': 'true',
+ onClick: onToggle,
+ onKeyDown: openOnArrowDown,
+ children: name,
+ } );
+ }
+ return (
+
+ { name }
+
+ );
+ } }
renderContent={ ( { onClose } ) => (
<>
@@ -222,7 +231,6 @@ const MediaReplaceFlow = ( {
showSuggestions={ false }
onChange={ ( { url } ) => {
onSelectURL( url );
- editMediaButtonRef.current.focus();
} }
/>
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index 57664b271bca46..d379a46d3142f8 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -50,8 +50,8 @@
},
"__experimentalDefaultControls": {
"blockGap": true,
- "padding" : false,
- "margin" : false
+ "padding": false,
+ "margin": false
}
},
"interactivity": {