Skip to content

Commit

Permalink
Refactor the MediaReplaceFlow component to use Dropdown (#19126)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Dec 16, 2019
1 parent 768383f commit 903df27
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 129 deletions.
119 changes: 56 additions & 63 deletions packages/block-editor/src/components/media-replace-flow/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import {
FormFileUpload,
NavigableMenu,
MenuItem,
Toolbar,
ToolbarGroup,
Button,
Popover,
Dropdown,
withNotices,
} from '@wordpress/components';
import {
Expand Down Expand Up @@ -46,7 +46,6 @@ const MediaReplaceFlow = (
const [ showURLInput, setShowURLInput ] = useState( false );
const [ showEditURLInput, setShowEditURLInput ] = useState( false );
const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
const [ showMediaReplaceOptions, setShowMediaReplaceOptions ] = useState( false );
const mediaUpload = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSettings().mediaUpload;
}, [] );
Expand Down Expand Up @@ -74,11 +73,11 @@ const MediaReplaceFlow = (
setShowEditURLInput( false );
};

const uploadFiles = ( event ) => {
const uploadFiles = ( event, closeDropdown ) => {
const files = event.target.files;
const setMedia = ( [ media ] ) => {
setShowMediaReplaceOptions( false );
selectMedia( media );
closeDropdown();
};
mediaUpload( {
allowedTypes,
Expand All @@ -88,12 +87,6 @@ const MediaReplaceFlow = (
} );
};

const onClose = () => {
editMediaButtonRef.current.focus();
};

const onClickOutside = () => ( setShowMediaReplaceOptions( false ) );

const openOnArrowDown = ( event ) => {
if ( event.keyCode === DOWN ) {
event.preventDefault();
Expand Down Expand Up @@ -123,76 +116,76 @@ const MediaReplaceFlow = (
urlInputUIContent = (
<LinkViewer
isFullWidth={ true }
className="block-editor-format-toolbar__link-container-content"
className="block-editor-media-replace-flow__link-viewer"
url={ mediaURLValue }
onEditLinkClick={ () => ( setShowEditURLInput( ! showEditURLInput ) ) }
/>
);
}

return (
<MediaUpload
onSelect={ ( media ) => selectMedia( media ) }
onClose={ () => setShowMediaReplaceOptions( true ) }
allowedTypes={ allowedTypes }
render={ ( { open } ) => (
<Toolbar className={ 'media-replace-flow components-dropdown-menu' }>
<Dropdown
contentClassName="block-editor-media-replace-flow__options"
renderToggle={ ( { isOpen, onToggle } ) => (
<ToolbarGroup className="media-replace-flow">
<Button
ref={ editMediaButtonRef }
className={ 'components-icon-button components-dropdown-menu__toggle' }
onClick={ () => {
setShowMediaReplaceOptions( ! showMediaReplaceOptions );
} }
aria-expanded={ isOpen }
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
>
<span className="components-dropdown-menu__label" > { name } </span>
<span className="components-dropdown-menu__indicator" />
{ name }
<span className="block-editor-media-replace-flow__indicator" />
</Button>
{ showMediaReplaceOptions &&
<Popover
onClickOutside={ onClickOutside }
onClose={ onClose }
className={ 'media-replace-flow__options' }
>
<NavigableMenu>
</ToolbarGroup>
) }
renderContent={ ( { onClose } ) => (
<>
<NavigableMenu>
<MediaUpload
onSelect={ ( media ) => selectMedia( media ) }
allowedTypes={ allowedTypes }
render={ ( { open } ) => (
<MenuItem
icon="admin-media"
onClick={ open }
>
{ __( 'Open Media Library' ) }
</MenuItem>
<MediaUploadCheck>
<FormFileUpload
onChange={ uploadFiles }
accept={ accept }
render={ ( { openFileDialog } ) => {
return (
<MenuItem
icon="upload"
onClick={ () => {
openFileDialog();
} }
>
{ __( 'Upload' ) }
</MenuItem>
);
} }
/>
</MediaUploadCheck>
<MenuItem
icon="admin-links"
onClick={ () => ( setShowURLInput( ! showURLInput ) ) }
aria-expanded={ showURLInput }
>
<div> { __( 'Insert from URL' ) } </div>
</MenuItem>
</NavigableMenu>
{ showURLInput && <div className="block-editor-media-flow__url-input">
{ urlInputUIContent }
</div> }
</Popover>
}
</Toolbar>
) }
/>
<MediaUploadCheck>
<FormFileUpload
onChange={ ( event ) => {
uploadFiles( event, onClose );
} }
accept={ accept }
render={ ( { openFileDialog } ) => {
return (
<MenuItem
icon="upload"
onClick={ () => {
openFileDialog();
} }
>
{ __( 'Upload' ) }
</MenuItem>
);
} }
/>
</MediaUploadCheck>
<MenuItem
icon="admin-links"
onClick={ () => ( setShowURLInput( ! showURLInput ) ) }
aria-expanded={ showURLInput }
>
<div> { __( 'Insert from URL' ) } </div>
</MenuItem>
</NavigableMenu>
{ showURLInput && <div className="block-editor-media-flow__url-input">
{ urlInputUIContent }
</div> }
</>
) }
/>
);
Expand Down
93 changes: 27 additions & 66 deletions packages/block-editor/src/components/media-replace-flow/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,37 @@
.media-replace-flow .components-dropdown-menu__indicator {
// Hack to hide when the media modal is open
// Otherwise in Firefox the popover remains visible on top of the modal
// Changing the z-index of Popovers have wider implications.
.modal-open .block-editor-media-replace-flow__options {
display: none;
}

.block-editor-media-replace-flow__indicator {
margin-left: 4px;

.components-dropdown-menu.media-flow_toolbar {
.components-dropdown-menu__label {
margin-right: 6px;
margin-left: 2px;
}
&::after {
@include dropdown-arrow();
}
}

.media-replace-flow__options.components-popover:not(.is-mobile) {
.block-editor-media-flow__url-input {
padding: 0 15px;
max-width: 255px;
padding-bottom: 10px;

.components-popover__content {
// this is a safari problem that shows scrollbars
// when display:flex and max-width are used together
overflow-x: hidden;
input {
max-width: 180px;
}
}

.block-editor-media-flow__url-input {

padding: 0 15px 10px 25px;

.components-external-link__icon {
position: absolute;
right: -4px;
bottom: 5px;
margin-right: 2px;
}

input {
max-width: 169px;
border: 1px solid $dark-gray-500;
border-radius: 4px;
}

.block-editor-url-popover__link-viewer-url {
padding-right: 15px;
padding-top: 3px;
max-width: 179px;
position: relative;
margin-right: 0;
}

// Mimic toolbar component styles for the icons in this popover.
.components-icon-button {
padding: 5px;
width: 40px;
height: 40px;
padding-left: 0;

> svg {
padding: 5px;
border-radius: $radius-round-rectangle;
height: 30px;
width: 30px;
}

&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
box-shadow: none;

> svg {
@include formatting-button-style__hover;
}
}

&:not(:disabled):focus {
box-shadow: none;

> svg {
@include formatting-button-style__focus;
}
}
}
.block-editor-media-replace-flow__link-viewer {
// Overflow is not working properly if we show the icon.
.components-external-link__icon {
display: none;
}
.components-visually-hidden {
position: initial;
}
.components-button {
flex-shrink: 0;
}
}

0 comments on commit 903df27

Please sign in to comment.