Merge pull request #2863 from ampproject/add/2783-double_click_edit

Require double click (or just two clicks) for editing.
ampproject · Aug 16, 2019 · 3362b66 · 3362b66
2 parents 252c08d + eb13a6b
commit 3362b66
Show file tree

Hide file tree

Showing 18 changed files with 469 additions and 173 deletions.
diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.css b/assets/src/stories-editor/blocks/amp-story-cta/edit.css
@@ -44,7 +44,7 @@ div[data-type="amp/amp-story-cta"] .amp-overlay {
 	--cta-margin: 3px;
 	height: calc(100% + calc(var(--cta-margin) * 2));
 	width: 100%;
-	bottom: calc(var(--cta-margin) * -1);
+	bottom: var(--cta-margin);
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block[data-type="amp/amp-story-cta"] .block-editor-block-list__block-edit::before {

diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.js b/assets/src/stories-editor/blocks/amp-story-cta/edit.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, RawHTML } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import {
 	Dashicon,
 	IconButton,
@@ -23,9 +23,9 @@ import {
  */
 import './edit.css';
 import { select } from '@wordpress/data';
-import { getUniqueId } from '../../helpers';
+import { getUniqueId, setInputSelectionToEnd } from '../../helpers';
 import { getBackgroundColorWithOpacity } from '../../../common/helpers';
-import { StoryBlockMover } from '../../components';
+import { DraggableText } from '../../components';
 
 class CallToActionEdit extends Component {
 	constructor( props ) {
@@ -78,16 +78,7 @@ class CallToActionEdit extends Component {
 			this.toggleOverlay( true );
 		}
 		if ( this.state.isEditing && ! prevState.isEditing ) {
-			const textInput = document.querySelector( '.is-selected .amp-block-story-cta__link' );
-			if ( textInput ) {
-				// Create selection, collapse it in the end of the content.
-				const range = document.createRange();
-				range.selectNodeContents( textInput );
-				range.collapse( false );
-				const selection = window.getSelection();
-				selection.removeAllRanges();
-				selection.addRange( range );
-			}
+			setInputSelectionToEnd( '.is-selected .amp-block-story-cta__link' );
 		}
 	}
 
@@ -132,81 +123,49 @@ class CallToActionEdit extends Component {
 		};
 		return (
 			<>
-				<StoryBlockMover
-					clientId={ clientId }
-					blockName={ name }
-					blockElementId={ `amp-story-cta-button-${ clientId }` }
-					isDraggable={ ! isEditing }
-					isMovable={ true }
-				>
-					<div className="amp-story-cta-button" id={ `amp-story-cta-button-${ clientId }` } style={ { top: `${ btnPositionTop }%`, left: `${ btnPositionLeft }%` } } >
-						<div className={ className } ref={ this.bindRef } style={ { backgroundColor: appliedBackgroundColor } }>
-							{ isEditing && (
-								<RichText
-									placeholder={ placeholder }
-									value={ text }
-									onChange={ ( value ) => setAttributes( { text: value } ) }
-									className={ textWrapperClass }
-									style={ textStyle }
-								/>
-							) }
-							{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ }
-							{ ! isEditing && <div
-								role="textbox"
-								tabIndex="-1"
-								className="is-not-editing editor-rich-text block-editor-rich-text"
-								onClick={ () => {
-									if ( isSelected ) {
-										this.toggleIsEditing( true );
-									}
-								} }
-								onMouseDown={ ( event ) => {
-									// Prevent text selection on double click.
-									if ( 1 < event.detail ) {
-										event.preventDefault();
-									}
-								} }
-							>
-								{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ }
-								{ hasOverlay && ( <div
-									role="textbox"
-									tabIndex="-1"
-									className="amp-overlay"
-									onClick={ ( e ) => {
-										this.toggleOverlay( false );
-										e.stopPropagation();
-									} }
-								></div>
-								) }
-								<div
-									role="textbox"
-									className={ textWrapperClass }
-									style={ textStyle }>
-									{ text && text.length ?
-										<RawHTML>{ text }</RawHTML> : (
-											<span className="amp-text-placeholder">
-												{ placeholder }
-											</span>
-										) }
-								</div>
-							</div>
-							}
-						</div>
-						{ isSelected && (
-							<form
-								className="amp-block-story-cta__inline-link"
-								onSubmit={ ( event ) => event.preventDefault() }>
-								<Dashicon icon="admin-links" />
-								<URLInput
-									value={ url }
-									onChange={ ( value ) => setAttributes( { url: value } ) }
-									autoFocus={ false /* eslint-disable-line jsx-a11y/no-autofocus */ }
-								/>
-								<IconButton icon="editor-break" label={ __( 'Apply', 'amp' ) } type="submit" />
-							</form>
+				<div className="amp-story-cta-button" id={ `amp-story-cta-button-${ clientId }` } style={ { top: `${ btnPositionTop }%`, left: `${ btnPositionLeft }%` } } >
+					<div className={ className } ref={ this.bindRef } style={ { backgroundColor: appliedBackgroundColor } }>
+						{ isEditing && (
+							<RichText
+								placeholder={ placeholder }
+								value={ text }
+								onChange={ ( value ) => setAttributes( { text: value } ) }
+								className={ textWrapperClass }
+								style={ textStyle }
+							/>
 						) }
+						{ ! isEditing &&
+							<DraggableText
+								blockElementId={ `amp-story-cta-button-${ clientId }` }
+								clientId={ clientId }
+								name={ name }
+								isDraggable={ true }
+								isEditing={ isEditing }
+								isSelected={ isSelected }
+								hasOverlay={ hasOverlay }
+								toggleIsEditing={ this.toggleIsEditing }
+								toggleOverlay={ this.toggleOverlay }
+								text={ text }
+								textStyle={ textStyle }
+								textWrapperClass={ textWrapperClass }
+								placeholder={ placeholder }
+							/>
+						}
 					</div>
-				</StoryBlockMover>
+					{ isSelected && isEditing && (
+						<form
+							className="amp-block-story-cta__inline-link"
+							onSubmit={ ( event ) => event.preventDefault() }>
+							<Dashicon icon="admin-links" />
+							<URLInput
+								value={ url }
+								onChange={ ( value ) => setAttributes( { url: value } ) }
+								autoFocus={ false /* eslint-disable-line jsx-a11y/no-autofocus */ }
+							/>
+							<IconButton icon="editor-break" label={ __( 'Apply', 'amp' ) } type="submit" />
+						</form>
+					) }
+				</div>
 			</>
 		);
 	}

diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css
@@ -10,16 +10,39 @@
 	width: 100%;
 }
 
+.is-not-editing .wp-block-amp-amp-story-text.block-editor-rich-text__editable.editor-rich-text__editable {
+	cursor: grab;
+}
+
+.wp-block-amp-story-text-wrapper.is-empty-draggable-text,
+.wp-block-amp-story-text-wrapper:not(.with-line-height) {
+	height: 100%;
+}
+
+.wp-block-amp-story-text-wrapper .amp-overlay {
+	height: 100%;
+	width: 100%;
+	z-index: 1000;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.wp-block-amp-story-text-wrapper.is-empty-draggable-text .amp-text-placeholder {
+	opacity: 0.62;
+}
+
 .wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-right {
-	right: -10px;
+	right: -13px;
 }
 
 .wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-right::before {
 	margin: 0;
 }
 
 .wp-block[data-type="amp/amp-story-text"] .amp-story-resize-container .components-resizable-box__handle-bottom {
-	bottom: -8px;
 	width: 50px;
 	left: calc(50% - 25px);
 }
@@ -67,14 +90,6 @@ div[data-type="amp/amp-story-page"] .block-editor-inner-blocks .block-editor-blo
 
 .editor-block-list__layout .wp-block[data-type="amp/amp-story-text"] .editor-block-list__block-edit::before {
 	position: absolute;
-	top: 2px;
-	left: 2px;
-	right: 2px;
-	bottom: 2px;
-}
-
-.wp-block[data-type="amp/amp-story-text"] div[draggable="true"] {
-	border: 5px solid transparent;
 }
 
 .wp-block[data-type="amp/amp-story-text"] .amp-story-editor__rotate-container,