Media flow component for media replace

packages/block-editor/README.md

@@ -320,6 +320,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-placeholder/README.md>
 
+<a name="MediaReplaceFlow" href="#MediaReplaceFlow">#</a> **MediaReplaceFlow**
+
+Undocumented declaration.
+
 <a name="MediaUpload" href="#MediaUpload">#</a> **MediaUpload**
 
 _Related_

packages/block-editor/src/components/index.js

@@ -28,6 +28,7 @@ export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';
 export { default as __experimentalLinkControl } from './link-control';
+export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';

packages/block-editor/src/components/media-replace-flow/index.js

@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, createRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import {
+	FormFileUpload,
+	NavigableMenu,
+	MenuItem,
+	Toolbar,
+	Button,
+	Popover,
+	withNotices,
+} from '@wordpress/components';
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import MediaUpload from '../media-upload';
+import MediaUploadCheck from '../media-upload/check';
+import LinkEditor from '../url-popover/link-editor';
+import LinkViewer from '../url-popover/link-viewer';
+
+const MediaReplaceFlow = (
+	{
+		mediaURL,
+		allowedTypes,
+		accept,
+		onSelect,
+		onSelectURL,
+		onError,
+		name = __( 'Replace' ),
+	}
+) => {
+	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;
+	} );
+	const editMediaButtonRef = createRef();
+
+	const stopPropagation = ( event ) => {
+		event.stopPropagation();
+	};
+
+	const stopPropagationRelevantKeys = ( event ) => {
+		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
+			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+			event.stopPropagation();
+		}
+	};
+
+	const selectMedia = ( media ) => {
+		onSelect( media );
+		setMediaURLValue( media.url );
+		speak( __( 'The media file has been replaced' ) );
+	};
+
+	const selectURL = ( newURL ) => {
+		onSelectURL( newURL );
+		setShowEditURLInput( false );
+	};
+
+	const uploadFiles = ( event ) => {
+		const files = event.target.files;
+		const setMedia = ( [ media ] ) => {
+			setShowMediaReplaceOptions( false );
+			selectMedia( media );
+		};
+		mediaUpload( {
+			allowedTypes,
+			filesList: files,
+			onFileChange: setMedia,
+			onError,
+		} );
+	};
+
+	const onClose = () => {
+		editMediaButtonRef.current.focus();
+	};
+
+	const onClickOutside = () => ( setShowMediaReplaceOptions( false ) );
+
+	const openOnArrowDown = ( event ) => {
+		if ( event.keyCode === DOWN ) {
+			event.preventDefault();
+			event.stopPropagation();
+			event.target.click();
+		}
+	};
+
+	let urlInputUIContent;
+	if ( showEditURLInput ) {
+		urlInputUIContent = (
+			<LinkEditor
+				onKeyDown={ stopPropagationRelevantKeys }
+				onKeyPress={ stopPropagation }
+				value={ mediaURLValue }
+				isFullWidthInput={ true }
+				hasInputBorder={ true }
+				onChangeInputValue={ ( url ) => ( setMediaURLValue( url ) ) }
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					selectURL( mediaURLValue );
+					editMediaButtonRef.current.focus();
+				} }
+			/>
+		);
+	} else {
+		urlInputUIContent = (
+			<LinkViewer
+				isFullWidth={ true }
+				className="editor-format-toolbar__link-container-content block-editor-format-toolbar__link-container-content"
+				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' }>
+					<Button
+						ref={ editMediaButtonRef }
+						className={ 'components-icon-button components-dropdown-menu__toggle' }
+						onClick={ () => {
+							setShowMediaReplaceOptions( ! showMediaReplaceOptions );
+						} }
+						onKeyDown={ openOnArrowDown }
+					>
+						<span className="components-dropdown-menu__label" > { name } </span>
+						<span className="components-dropdown-menu__indicator" />
+					</Button>
+					{ showMediaReplaceOptions &&
+						<Popover
+							onClickOutside={ onClickOutside }
+							onClose={ onClose }
+							className={ 'media-replace-flow__options' }
+						>
+							<NavigableMenu>
+								<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>
+			) }
+		/>
+	);
+};
+
+export default compose(
+	withNotices,
+)( MediaReplaceFlow );

packages/block-editor/src/components/media-replace-flow/style.scss

@@ -0,0 +1,76 @@
+.media-replace-flow .components-dropdown-menu__indicator {
+	margin-left: 4px;
+
+	.components-dropdown-menu.media-flow_toolbar {
+		.components-dropdown-menu__label {
+			margin-right: 6px;
+			margin-left: 2px;
+		}
+	}
+}
+
+.media-replace-flow__options.components-popover:not(.is-mobile) {
+
+	.components-popover__content {
+		// this is a safari problem that shows scrollbars
+		// when display:flex and max-width are used together
+		overflow-x: hidden;
+	}
+
+	.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-default):hover {
+				box-shadow: none;
+
+				> svg {
+					@include formatting-button-style__hover;
+				}
+			}
+
+			&:not(:disabled):focus {
+				box-shadow: none;
+
+				> svg {
+					@include formatting-button-style__focus;
+				}
+			}
+		}
+	}
+}

packages/block-editor/src/style.scss

@@ -25,6 +25,7 @@
 @import "./components/inserter-with-shortcuts/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/panel-color-settings/style.scss";