From 13146a735985006fccfa7aa775330ffd85b09cf4 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 5 Apr 2019 18:16:44 +0300 Subject: [PATCH 01/15] adds the new edit media icon to the media-text, cover, audio, file and video blocks --- packages/block-library/src/audio/edit.js | 6 +++++- packages/block-library/src/cover/edit.js | 6 +++++- packages/block-library/src/file/edit.js | 7 +++++-- .../block-library/src/media-text/media-container.js | 12 ++++++++++-- packages/block-library/src/video/edit.js | 6 +++++- 5 files changed, 30 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index d222b42ae6a64..616acb34f1fd7 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -6,7 +6,10 @@ import { Disabled, IconButton, PanelBody, + Path, + Rect, SelectControl, + SVG, ToggleControl, Toolbar, withNotices, @@ -134,6 +137,7 @@ class AudioEdit extends Component { ); } + const editImageIcon = ( ); /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( @@ -143,7 +147,7 @@ class AudioEdit extends Component { className="components-icon-button components-toolbar__control" label={ __( 'Edit audio' ) } onClick={ switchToEditing } - icon="edit" + icon={ editImageIcon } /> diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 9fadb5541082b..ec623ecec7da0 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -12,7 +12,10 @@ import { FocalPointPicker, IconButton, PanelBody, + Path, RangeControl, + Rect, + SVG, ToggleControl, Toolbar, withNotices, @@ -157,6 +160,7 @@ class CoverEdit extends Component { style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; } + const editImageIcon = ( ); const controls = ( @@ -172,7 +176,7 @@ class CoverEdit extends Component { ) } diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 3ce7211eceb85..6436b2181a742 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -14,6 +14,9 @@ import { import { ClipboardButton, IconButton, + Path, + Rect, + SVG, Toolbar, withNotices, } from '@wordpress/components'; @@ -158,7 +161,7 @@ class FileEdit extends Component { const classes = classnames( className, { 'is-transient': isBlobURL( href ), } ); - + const editImageIcon = ( ); return ( ) } /> diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index e32ebb47da6d0..9424066c59e7d 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/media-container.js @@ -1,7 +1,14 @@ /** * WordPress dependencies */ -import { IconButton, ResizableBox, Toolbar } from '@wordpress/components'; +import { + IconButton, + ResizableBox, + Toolbar, + Path, + Rect, + SVG, +} from '@wordpress/components'; import { BlockControls, BlockIcon, @@ -33,6 +40,7 @@ export function imageFillStyles( url, focalPoint ) { class MediaContainer extends Component { renderToolbarEditButton() { const { mediaId, onSelectMedia } = this.props; + const editImageIcon = ( ); return ( @@ -44,7 +52,7 @@ class MediaContainer extends Component { ) } diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 35532afe073cc..3d86b2ac1358c 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -8,7 +8,10 @@ import { Disabled, IconButton, PanelBody, + Path, + Rect, SelectControl, + SVG, ToggleControl, Toolbar, withNotices, @@ -181,6 +184,7 @@ class VideoEdit extends Component { } const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; + const editImageIcon = ( ); /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( @@ -190,7 +194,7 @@ class VideoEdit extends Component { className="components-icon-button components-toolbar__control" label={ __( 'Edit video' ) } onClick={ switchToEditing } - icon="edit" + icon={ editImageIcon } /> From c7c606e3708951db27cc9007346e1694cb458162 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 10 Apr 2019 17:52:38 +0300 Subject: [PATCH 02/15] add new placeholder to edit state of media text --- packages/block-library/src/media-text/edit.js | 66 ++++++++- .../src/media-text/media-container.js | 137 ++++++++---------- 2 files changed, 127 insertions(+), 76 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 48e18f2a30f02..eda8772c5d41b 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -24,11 +24,16 @@ import { Toolbar, ExternalLink, FocalPointPicker, + IconButton, + Path, + Rect, + SVG, } from '@wordpress/components'; /** * Internal dependencies */ import MediaContainer from './media-container'; +import { speak } from '@wordpress/a11y'; /** * Constants @@ -39,17 +44,47 @@ const TEMPLATE = [ ]; class MediaTextEdit extends Component { - constructor() { + constructor( { attributes } ) { super( ...arguments ); this.onSelectMedia = this.onSelectMedia.bind( this ); this.onWidthChange = this.onWidthChange.bind( this ); this.commitWidthChange = this.commitWidthChange.bind( this ); + this.toggleIsEditing = this.toggleIsEditing.bind( this ); + this.onSelectUrl = this.onSelectUrl.bind( this ); + this.renderMediaArea = this.renderMediaArea.bind( this ); this.state = { mediaWidth: null, + isEditing: ! attributes.mediaUrl, }; } + toggleIsEditing() { + this.setState( { + isEditing: ! this.state.isEditing, + } ); + if ( this.state.isEditing ) { + speak( __( 'You are now viewing the image in the image block.' ) ); + } else { + speak( __( 'You are now editing the image in the image block.' ) ); + } + } + + onSelectUrl( newURL ) { + const { mediaUrl } = this.props.attributes; + + if ( newURL !== mediaUrl ) { + this.props.setAttributes( { + mediaUrl: newURL, + mediaId: undefined, + } ); + } + + this.setState( { + isEditing: false, + } ); + } + onSelectMedia( media ) { const { setAttributes } = this.props; @@ -73,6 +108,10 @@ class MediaTextEdit extends Component { src = get( media, [ 'sizes', 'large', 'url' ] ) || get( media, [ 'media_details', 'sizes', 'large', 'source_url' ] ); } + this.setState( { + isEditing: false, + } ); + setAttributes( { mediaAlt: media.alt, mediaId: media.id, @@ -102,7 +141,16 @@ class MediaTextEdit extends Component { renderMediaArea() { const { attributes } = this.props; - const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, imageFill, focalPoint } = attributes; + const { + mediaAlt, + mediaId, + mediaPosition, + mediaType, + mediaUrl, + mediaWidth, + imageFill, + focalPoint, + } = attributes; return ( ); @@ -208,6 +259,7 @@ class MediaTextEdit extends Component { /> ) } ); + const editImageIcon = ( ); return ( @@ -221,7 +273,15 @@ class MediaTextEdit extends Component { + > + { mediaUrl && } + ); - return ( - - - ( - - ) } - /> - - - ); - } - renderImage() { const { mediaAlt, mediaUrl, className, imageFill, focalPoint } = this.props; const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {}; return ( - { this.renderToolbarEditButton() }
{
@@ -79,7 +47,6 @@ class MediaContainer extends Component { const { mediaUrl, className } = this.props; return ( - { this.renderToolbarEditButton() }
@@ -88,60 +55,84 @@ class MediaContainer extends Component { } renderPlaceholder() { - const { onSelectMedia, className } = this.props; + const { + mediaUrl, + mediaId, + toggleIsEditing, + onSelectMedia, + onSelectUrl, + className, + } = this.props; + + const labels = { + title: ! mediaUrl ? __( 'Media' ) : __( 'Edit media' ), + }; + + const mediaPreview = ( !! mediaUrl && { ); + return ( + } - labels={ { - title: __( 'Media area' ), - } } className={ className } + labels={ labels } onSelect={ onSelectMedia } + onSelectURL={ onSelectUrl } + onDoubleClick={ toggleIsEditing } + onCancel={ !! mediaUrl && toggleIsEditing } + onError={ this.onUploadError } accept="image/*,video/*" allowedTypes={ ALLOWED_MEDIA_TYPES } + value={ { mediaId, mediaUrl } } + mediaPreview={ mediaPreview } /> ); } render() { - const { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props; - if ( mediaType && mediaUrl ) { - const onResize = ( event, direction, elt ) => { - onWidthChange( parseInt( elt.style.width ) ); - }; - const onResizeStop = ( event, direction, elt ) => { - commitWidthChange( parseInt( elt.style.width ) ); - }; - const enablePositions = { - right: mediaPosition === 'left', - left: mediaPosition === 'right', - }; + const { isEditing, mediaPosition, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props; + if ( isEditing ) { + return this.renderPlaceholder(); + } + const onResize = ( event, direction, elt ) => { + onWidthChange( parseInt( elt.style.width ) ); + }; + const onResizeStop = ( event, direction, elt ) => { + commitWidthChange( parseInt( elt.style.width ) ); + }; + const enablePositions = { + right: mediaPosition === 'left', + left: mediaPosition === 'right', + }; - let mediaElement = null; - switch ( mediaType ) { - case 'image': - mediaElement = this.renderImage(); - break; - case 'video': - mediaElement = this.renderVideo(); - break; - } - return ( - - { mediaElement } - - ); + let mediaElement = null; + switch ( mediaType ) { + case 'image': + mediaElement = this.renderImage(); + break; + case 'video': + mediaElement = this.renderVideo(); + break; } - return this.renderPlaceholder(); + return ( + + { mediaElement } + + ); } } From 5646a720abb19b8da48eb4397e424ec5015f8fc9 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 10 Apr 2019 22:32:35 +0300 Subject: [PATCH 03/15] fixes preview for media other than image --- packages/block-library/src/media-text/media-container.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index d18b146fc5600..fa5634033ddf7 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/media-container.js @@ -58,6 +58,7 @@ class MediaContainer extends Component { const { mediaUrl, mediaId, + mediaType, toggleIsEditing, onSelectMedia, onSelectUrl, @@ -89,7 +90,7 @@ class MediaContainer extends Component { accept="image/*,video/*" allowedTypes={ ALLOWED_MEDIA_TYPES } value={ { mediaId, mediaUrl } } - mediaPreview={ mediaPreview } + mediaPreview={ mediaType === 'image' && mediaPreview } /> ); } From cab27f9648fd54864aa90f7c049a9e807b3dcd86 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 10 Apr 2019 23:08:20 +0300 Subject: [PATCH 04/15] adds the new flow to the cover block --- packages/block-library/src/cover/edit.js | 87 +++++++++++++++++------- 1 file changed, 61 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index ec623ecec7da0..e63d0bba4b481 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -27,7 +27,6 @@ import { InnerBlocks, InspectorControls, MediaPlaceholder, - MediaUpload, MediaUploadCheck, PanelColorSettings, withColors, @@ -45,6 +44,7 @@ import { backgroundImageStyles, dimRatioToClass, } from './shared'; +import { speak } from '@wordpress/a11y'; /** * Module Constants @@ -67,14 +67,27 @@ function retrieveFastAverageColor() { } class CoverEdit extends Component { - constructor() { + constructor( { attributes } ) { super( ...arguments ); this.state = { isDark: false, + isEditing: ! attributes.url, }; this.imageRef = createRef(); this.videoRef = createRef(); this.changeIsDarkIfRequired = this.changeIsDarkIfRequired.bind( this ); + this.toggleIsEditing = this.toggleIsEditing.bind( this ); + } + + toggleIsEditing() { + this.setState( { + isEditing: ! this.state.isEditing, + } ); + if ( this.state.isEditing ) { + speak( __( 'You are now viewing the image in the image block.' ) ); + } else { + speak( __( 'You are now editing the image in the image block.' ) ); + } } componentDidMount() { @@ -86,11 +99,11 @@ class CoverEdit extends Component { } render() { + const { isEditing } = this.state; const { attributes, setAttributes, className, - noticeOperations, noticeUI, overlayColor, setOverlayColor, @@ -100,9 +113,23 @@ class CoverEdit extends Component { dimRatio, focalPoint, hasParallax, - id, url, + id, } = attributes; + + const onSelectUrl = ( newURL ) => { + if ( newURL !== url ) { + this.props.setAttributes( { + url: newURL, + id: undefined, + } ); + } + + this.setState( { + isEditing: false, + } ); + }; + const onSelectMedia = ( media ) => { if ( ! media || ! media.url ) { setAttributes( { url: undefined, id: undefined } ); @@ -137,6 +164,10 @@ class CoverEdit extends Component { {} ), } ); + + this.setState( { + isEditing: false, + } ); }; const toggleParallax = () => { @@ -168,18 +199,11 @@ class CoverEdit extends Component { - ( - - ) } + @@ -229,25 +253,36 @@ class CoverEdit extends Component { ); - if ( ! url ) { - const placeholderIcon = ; - const label = __( 'Cover' ); + if ( isEditing || ! url ) { + const labels = { + title: __( 'Cover' ), + instructions: __( 'Drag an image or a video, upload a new one or select a file from your library.' ), + }; + + const mediaPreview = ( !! url && { ); return ( { controls } } className={ className } - labels={ { - title: label, - instructions: __( 'Drag an image or a video, upload a new one or select a file from your library.' ), - } } + labels={ labels } onSelect={ onSelectMedia } + onSelectURL={ onSelectUrl } + onDoubleClick={ this.toggleIsEditing } + onCancel={ !! url && this.toggleIsEditing } + notices={ noticeUI } + onError={ this.onUploadError } accept="image/*,video/*" allowedTypes={ ALLOWED_MEDIA_TYPES } - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } + value={ { id, url } } + mediaPreview={ backgroundType === IMAGE_BACKGROUND_TYPE && mediaPreview } /> ); From e3c3866b6dab93d16aecb415d11e2e3cf04ed034 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 10 Apr 2019 23:38:53 +0300 Subject: [PATCH 05/15] adds correct state to edit button, adds new flow to audio --- packages/block-library/src/audio/edit.js | 49 +++++++++++++++--------- packages/block-library/src/cover/edit.js | 2 +- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 616acb34f1fd7..a5497e6cfa59f 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -29,10 +34,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import icon from './icon'; - -/** - * Internal dependencies - */ import { createUpgradedEmbedBlock } from '../embed/util'; const ALLOWED_MEDIA_TYPES = [ 'audio' ]; @@ -106,7 +107,7 @@ class AudioEdit extends Component { const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props; const { editing } = this.state; const switchToEditing = () => { - this.setState( { editing: true } ); + this.setState( { editing: ! this.state.editing } ); }; const onSelectAudio = ( media ) => { if ( ! media || ! media.url ) { @@ -121,23 +122,35 @@ class AudioEdit extends Component { setAttributes( { src: media.url, id: media.id } ); this.setState( { src: media.url, editing: false } ); }; + const editImageIcon = ( ); if ( editing ) { return ( - } - className={ className } - onSelect={ onSelectAudio } - onSelectURL={ this.onSelectURL } - accept="audio/*" - allowedTypes={ ALLOWED_MEDIA_TYPES } - value={ this.props.attributes } - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } - /> + + + + + + + } + className={ className } + onCancel={ switchToEditing } + onSelect={ onSelectAudio } + onSelectURL={ this.onSelectURL } + accept="audio/*" + allowedTypes={ ALLOWED_MEDIA_TYPES } + value={ this.props.attributes } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } + /> + ); } - - const editImageIcon = ( ); /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index e63d0bba4b481..2023747c9a703 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -200,7 +200,7 @@ class CoverEdit extends Component { Date: Thu, 11 Apr 2019 00:08:25 +0300 Subject: [PATCH 06/15] fixed state for newly inserted audio, adds new flow to file --- packages/block-library/src/audio/edit.js | 6 +- packages/block-library/src/file/edit.js | 108 +++++++++++++++-------- 2 files changed, 75 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index a5497e6cfa59f..19ef9d955baf2 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -127,19 +127,19 @@ class AudioEdit extends Component { return ( - + { !! src && ( - + ) } } className={ className } - onCancel={ switchToEditing } + onCancel={ !! src && switchToEditing } onSelect={ onSelectAudio } onSelectURL={ this.onSelectURL } accept="audio/*" diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 6436b2181a742..095d5d19c4ef1 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -25,8 +25,6 @@ import { withSelect } from '@wordpress/data'; import { BlockControls, BlockIcon, - MediaUpload, - MediaUploadCheck, MediaPlaceholder, RichText, } from '@wordpress/block-editor'; @@ -39,12 +37,15 @@ import { __ } from '@wordpress/i18n'; */ import icon from './icon'; import FileBlockInspector from './inspector'; +import { speak } from '@wordpress/a11y'; class FileEdit extends Component { - constructor() { + constructor( { attributes } ) { super( ...arguments ); this.onSelectFile = this.onSelectFile.bind( this ); + this.onSelectURL = this.onSelectURL.bind( this ); + this.toggleIsEditing = this.toggleIsEditing.bind( this ); this.confirmCopyURL = this.confirmCopyURL.bind( this ); this.resetCopyConfirmation = this.resetCopyConfirmation.bind( this ); this.changeLinkDestinationOption = this.changeLinkDestinationOption.bind( this ); @@ -54,6 +55,7 @@ class FileEdit extends Component { this.state = { hasError: false, showCopyConfirmation: false, + isEditing: ! attributes.href, }; } @@ -95,6 +97,33 @@ class FileEdit extends Component { id: media.id, } ); } + this.toggleIsEditing(); + } + + onSelectURL( newURL ) { + const { href } = this.props.attributes; + + if ( newURL !== href ) { + this.props.setAttributes( { + href: newURL, + id: undefined, + } ); + } + + this.setState( { + isEditing: false, + } ); + } + + toggleIsEditing() { + this.setState( { + isEditing: ! this.state.isEditing, + } ); + if ( this.state.isEditing ) { + speak( __( 'You are now viewing the image in the image block.' ) ); + } else { + speak( __( 'You are now editing the image in the image block.' ) ); + } } confirmCopyURL() { @@ -137,33 +166,58 @@ class FileEdit extends Component { textLinkTarget, showDownloadButton, downloadButtonText, - id, } = attributes; - const { hasError, showCopyConfirmation } = this.state; + const { hasError, showCopyConfirmation, isEditing } = this.state; const attachmentPage = media && media.link; + const editImageIcon = ( ); - if ( ! href || hasError ) { + if ( ! href || isEditing || hasError ) { return ( - } - labels={ { - title: __( 'File' ), - instructions: __( 'Drag a file, upload a new one or select a file from your library.' ), - } } - onSelect={ this.onSelectFile } - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } - accept="*" - /> + + + + { !! href && ( ) } + + + } + labels={ { + title: __( 'File' ), + instructions: __( 'Drag a file, upload a new one or select a file from your library.' ), + } } + onSelect={ this.onSelectFile } + onSelectURL={ this.onSelectURL } + onCancel={ !! href && this.toggleIsEditing } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } + accept="*" + /> + ); } const classes = classnames( className, { 'is-transient': isBlobURL( href ), } ); - const editImageIcon = ( ); return ( + + + + + - - - - ( - - ) } - /> - - -
Date: Thu, 11 Apr 2019 00:23:07 +0300 Subject: [PATCH 07/15] adds aria pressed to edit button, adds the new flow to video --- packages/block-library/src/cover/edit.js | 1 + packages/block-library/src/video/edit.js | 46 +++++++++++++++++------- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 2023747c9a703..b031700d95786 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -201,6 +201,7 @@ class CoverEdit extends Component { { - this.setState( { editing: true } ); + this.setState( { editing: ! this.state.editing } ); }; const onSelectVideo = ( media ) => { if ( ! media || ! media.url ) { @@ -167,24 +172,41 @@ class VideoEdit extends Component { this.setState( { src: media.url, editing: false } ); }; + const editImageIcon = ( ); + if ( editing ) { return ( - } - className={ className } - onSelect={ onSelectVideo } - onSelectURL={ this.onSelectURL } - accept="video/*" - allowedTypes={ ALLOWED_MEDIA_TYPES } - value={ this.props.attributes } - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } - /> + + + { !! src && ( + + ) } + + } + className={ className } + onSelect={ onSelectVideo } + onSelectURL={ this.onSelectURL } + onCancel={ !! src && switchToEditing } + accept="video/*" + allowedTypes={ ALLOWED_MEDIA_TYPES } + value={ this.props.attributes } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } + /> + ); } const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; const editImageIcon = ( ); + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( From 2723aa85de4092496b24cfb8af6ddf1746a554fe Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 11 Apr 2019 12:15:12 +0300 Subject: [PATCH 08/15] adds the new edit flow to embed --- packages/block-library/src/embed/edit.js | 40 ++++++++++++++----- .../block-library/src/embed/embed-controls.js | 30 ++++++++------ 2 files changed, 47 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index fcc305d9e8a7c..95481d044499b 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -129,7 +129,7 @@ export function getEmbedEditComponent( title, icon, responsive = true ) { } switchBackToURLInput() { - this.setState( { editingURL: true } ); + this.setState( { editingURL: ! this.state.editingURL } ); } getResponsiveHelp( checked ) { @@ -166,16 +166,32 @@ export function getEmbedEditComponent( title, icon, responsive = true ) { // No preview, or we can't embed the current URL, or we've clicked the edit button. if ( ! preview || cannotEmbed || editingURL ) { return ( - this.setState( { url: event.target.value } ) } - fallback={ () => fallback( url, this.props.onReplace ) } - tryAgain={ tryAgain } - /> + + + this.setState( { url: event.target.value } ) } + fallback={ () => fallback( url, this.props.onReplace ) } + tryAgain={ tryAgain } + switchBackToURLInput={ this.switchBackToURLInput } + editingURL={ this.state.editingURL } + url={ this.state.url } + /> + ); } @@ -183,6 +199,8 @@ export function getEmbedEditComponent( title, icon, responsive = true ) { { const { blockSupportsResponsive, - showEditButton, themeSupportsResponsive, allowResponsive, getResponsiveHelp, toggleResponsive, switchBackToURLInput, + editingURL, + url, } = props; + const editImageIcon = ( ); return ( - - { showEditButton && ( - - ) } - + { !! url && ( + + ) } { themeSupportsResponsive && blockSupportsResponsive && ( From 0e7129f196f10b79de88dbef22e55edb0a5860d8 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 12 Apr 2019 15:42:44 +0300 Subject: [PATCH 09/15] removed duplicate definition --- packages/block-library/src/video/edit.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index cd9cde2de356d..a38de03ca1721 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -205,8 +205,6 @@ class VideoEdit extends Component { } const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; - const editImageIcon = ( ); - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( From 18fdced8f9aa464bb5fea766a144b6e52753acd2 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Sat, 13 Apr 2019 12:57:31 +0300 Subject: [PATCH 10/15] adds cancel link to embed edit mode --- packages/block-library/src/embed/editor.scss | 6 ++ .../src/embed/embed-placeholder.js | 55 ++++++++++++------- 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index 507d38c256688..9fd2145db84b7 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -37,6 +37,12 @@ .components-placeholder__error { word-break: break-word; } + .components-placeholder__cancel { + padding-top: 10px; + width: 100%; + float: none; + text-align: center; + } } .block-library-embed__interactive-overlay { diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js index b532d7b1a84a7..ca426c7b140e3 100644 --- a/packages/block-library/src/embed/embed-placeholder.js +++ b/packages/block-library/src/embed/embed-placeholder.js @@ -4,31 +4,44 @@ import { __, _x } from '@wordpress/i18n'; import { Button, Placeholder } from '@wordpress/components'; import { BlockIcon } from '@wordpress/block-editor'; +import { Fragment } from '@wordpress/element'; const EmbedPlaceholder = ( props ) => { - const { icon, label, value, onSubmit, onChange, cannotEmbed, fallback, tryAgain } = props; + const { icon, label, value, onSubmit, onChange, switchBackToURLInput, cannotEmbed, fallback, tryAgain } = props; return ( } label={ label } className="wp-block-embed"> -
- - - { cannotEmbed && -

- { __( 'Sorry, this content could not be embedded.' ) }
- -

- } -
+ +
+ + + { cannotEmbed && +

+ { __( 'Sorry, this content could not be embedded.' ) }
+ +

+ } +
+
+ +
+ ); }; From d7c3b3958d07eee02536877ea8ffe80517507c02 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 15 Apr 2019 14:52:16 +0300 Subject: [PATCH 11/15] fixes the media preview in media + text block --- packages/block-library/src/media-text/editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss index 3d0ad0361bd94..0d177c5a0fb2b 100644 --- a/packages/block-library/src/media-text/editor.scss +++ b/packages/block-library/src/media-text/editor.scss @@ -50,6 +50,10 @@ figure.block-library-media-text__media-container { width: 100%; } +.wp-block-media-text .block-library-media-text__media-container .components-placeholder__preview img { + width: 80%; +} + .editor-media-container__resizer .components-resizable-box__handle { display: none; } From 5e23de5c539732753ed17af9c2113db19d6c3a9c Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 15 Apr 2019 15:45:33 +0300 Subject: [PATCH 12/15] new snapshot for the embed block --- .../src/embed/test/__snapshots__/index.js.snap | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index 4b9c1f4de7f0e..a86ed9dc8b663 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -45,6 +45,17 @@ exports[`core/embed block edit matches snapshot 1`] = ` Embed +
+ +
`; From 84efe80981d43e17dd13fcf0f804931b995e1201 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 19 Apr 2019 12:56:21 +0300 Subject: [PATCH 13/15] removes the cancel link in embed initial state --- packages/block-library/src/embed/embed-placeholder.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js index ca426c7b140e3..644a4b6cb7b07 100644 --- a/packages/block-library/src/embed/embed-placeholder.js +++ b/packages/block-library/src/embed/embed-placeholder.js @@ -31,7 +31,7 @@ const EmbedPlaceholder = ( props ) => {

} -
+ { value &&
-
+
} ); From 7948ece9661a3b8c9b495c4a0ee2604750e8d1ba Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 19 Apr 2019 13:09:49 +0300 Subject: [PATCH 14/15] moves the edit button to its own group, fixes media preview margin --- packages/block-library/src/media-text/edit.js | 3 ++- packages/components/src/placeholder/style.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index eda8772c5d41b..cc501f76e5384 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -273,7 +273,8 @@ class MediaTextEdit extends Component { + /> + { mediaUrl && Date: Mon, 22 Apr 2019 18:11:21 +0300 Subject: [PATCH 15/15] new snapshot for the embed block --- .../src/embed/test/__snapshots__/index.js.snap | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index a86ed9dc8b663..4b9c1f4de7f0e 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -45,17 +45,6 @@ exports[`core/embed block edit matches snapshot 1`] = ` Embed -
- -
`;