Skip to content

Commit

Permalink
Refactor MediaReplaceFlow to support dynamic button variants and upda…
Browse files Browse the repository at this point in the history
…te BackgroundImageControls to specify button variant
  • Loading branch information
yogeshbhutkar committed Dec 18, 2024
1 parent cf146e7 commit 023c5ca
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ function BackgroundImageControls( {
/>
}
variant="secondary"
buttonVariant="button"
onError={ onUploadError }
onReset={ () => {
closeAndFocus();
Expand Down
16 changes: 13 additions & 3 deletions packages/block-editor/src/components/media-replace-flow/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
MenuItem,
Dropdown,
withFilters,
ToolbarButton,
Button,
} from '@wordpress/components';
import { useSelect, withDispatch } from '@wordpress/data';
Expand All @@ -37,6 +38,13 @@ import LinkControl from '../link-control';
import { store as blockEditorStore } from '../../store';

const noop = () => {};

const BUTTON_VARIANTS = {
default: ToolbarButton,
toolbar: ToolbarButton,
button: Button,
};

let uniqueId = 0;

const MediaReplaceFlow = ( {
Expand All @@ -60,6 +68,7 @@ const MediaReplaceFlow = ( {
addToGallery,
handleUpload = true,
popoverProps,
buttonVariant = 'default',
} ) => {
const mediaUpload = useSelect( ( select ) => {
return select( blockEditorStore ).getSettings().mediaUpload;
Expand Down Expand Up @@ -136,22 +145,23 @@ const MediaReplaceFlow = ( {
};

const gallery = multiple && onlyAllowsImages();
const ButtonComponent = BUTTON_VARIANTS[ buttonVariant ];

return (
<Dropdown
popoverProps={ popoverProps }
contentClassName="block-editor-media-replace-flow__options"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
__next40pxDefaultSize
<ButtonComponent
__next40pxDefaultSize={ buttonVariant === 'button' }
ref={ editMediaButtonRef }
aria-expanded={ isOpen }
aria-haspopup="true"
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
>
{ name }
</Button>
</ButtonComponent>
) }
renderContent={ ( { onClose } ) => (
<>
Expand Down

0 comments on commit 023c5ca

Please sign in to comment.