From 2eea533d642c8b52cddd0bdd3d52e776d90ab47b Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 22 Jul 2019 16:25:24 +0300 Subject: [PATCH 01/42] Add isEditing state for displaying the edit view. --- .../blocks/amp-story-text/edit.js | 93 ++++++++++++++----- 1 file changed, 69 insertions(+), 24 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index c1c7a00d376..1867303f980 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -28,7 +28,12 @@ class TextBlockEdit extends Component { constructor() { super( ...arguments ); + this.state = { + isEditing: false, + }; + this.onReplace = this.onReplace.bind( this ); + this.toggleIsEditing = this.toggleIsEditing.bind( this ); } componentDidMount() { @@ -36,7 +41,7 @@ class TextBlockEdit extends Component { } componentDidUpdate( prevProps ) { - const { attributes, fontSize } = this.props; + const { attributes, fontSize, isSelected } = this.props; const { height, width, @@ -45,6 +50,11 @@ class TextBlockEdit extends Component { ampFontFamily, } = attributes; + // If the block was unselected, make sure that it's not editing anymore. + if ( ! isSelected && prevProps.isSelected ) { + this.toggleIsEditing( false ); + } + const checkFontSize = ampFitText && ( prevProps.attributes.ampFitText !== ampFitText || prevProps.attributes.ampFontFamily !== ampFontFamily || @@ -88,7 +98,17 @@ class TextBlockEdit extends Component { ) ) ); } + toggleIsEditing( enable ) { + if ( enable !== this.state.isEditing ) { + this.setState( { + isEditing: ! this.state.isEditing, + } ); + } + } + render() { + const { isEditing } = this.state; + const { attributes, setAttributes, @@ -147,29 +167,54 @@ class TextBlockEdit extends Component {
- setAttributes( { content: nextContent } ) } - // The 2 following lines are necessary for pasting to work. - onReplace={ this.onReplace } - onSplit={ () => {} } - style={ { - color: textColor.color, - fontSize: ampFitText ? autoFontSize + 'px' : userFontSize, - textAlign: align, - position: ampFitText && content.length ? 'static' : undefined, - } } - className={ classnames( className, { - 'has-text-color': textColor.color, - [ textColor.class ]: textColor.class, - [ fontSize.class ]: ampFitText ? undefined : fontSize.class, - 'is-amp-fit-text': ampFitText, - } ) } - placeholder={ placeholder || __( 'Write text…', 'amp' ) } - /> + { isEditing && + setAttributes( { content: nextContent } ) } + // The 2 following lines are necessary for pasting to work. + onReplace={ this.onReplace } + onSplit={ () => {} } + style={ { + color: textColor.color, + fontSize: ampFitText ? autoFontSize + 'px' : userFontSize, + textAlign: align, + position: ampFitText && content.length ? 'static' : undefined, + } } + className={ classnames( className, { + 'has-text-color': textColor.color, + [ textColor.class ]: textColor.class, + [ fontSize.class ]: ampFitText ? undefined : fontSize.class, + 'is-amp-fit-text': ampFitText, + } ) } + placeholder={ placeholder || __( 'Write text…', 'amp' ) } + /> + } + { ! isEditing && +
+

{ + this.toggleIsEditing( true ); + } } + > + { content } +

+
+ }
); From fd0c74d82b20502ec0d28ecacaba21611e2f5d52 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 22 Jul 2019 16:28:25 +0300 Subject: [PATCH 02/42] Adjust classnames. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 1867303f980..dee8ebe40db 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -156,6 +156,8 @@ class TextBlockEdit extends Component { wrapperClass += ' ' + styleClasses.join( ' ' ); } + const textWrapperClassName = 'wp-block-amp-story-text'; + return ( <> @@ -169,7 +171,7 @@ class TextBlockEdit extends Component { } ) } style={ wrapperStyle } > { isEditing && } { ! isEditing && -
+

Date: Mon, 22 Jul 2019 16:38:48 +0300 Subject: [PATCH 03/42] Remove text_block_padding constant. --- .../blocks/amp-story-text/edit.css | 8 ------- .../blocks/amp-story-text/edit.js | 10 +++++---- .../components/resizable-box/index.js | 22 ++++++------------- .../components/story-block-drop-zone.js | 6 ++--- .../components/with-wrapper-props.js | 21 +++++------------- assets/src/stories-editor/constants.js | 1 - 6 files changed, 20 insertions(+), 48 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index 52fd04d190d..cbb373d0e00 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -67,14 +67,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, diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index dee8ebe40db..8abf3e8a470 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -195,7 +195,12 @@ class TextBlockEdit extends Component { /> } { ! isEditing && -

+
{ + this.toggleIsEditing( true ); + } } + >

{ - this.toggleIsEditing( true ); - } } > { content }

diff --git a/assets/src/stories-editor/components/resizable-box/index.js b/assets/src/stories-editor/components/resizable-box/index.js index aa7df7b1ab1..cb51042bbe4 100644 --- a/assets/src/stories-editor/components/resizable-box/index.js +++ b/assets/src/stories-editor/components/resizable-box/index.js @@ -21,7 +21,7 @@ import { getRadianFromDeg, } from '../../helpers'; -import { BLOCKS_WITH_TEXT_SETTINGS, TEXT_BLOCK_BORDER, TEXT_BLOCK_PADDING } from '../../constants'; +import { BLOCKS_WITH_TEXT_SETTINGS, TEXT_BLOCK_PADDING } from '../../constants'; let lastSeenX = 0, lastSeenY = 0, @@ -57,14 +57,6 @@ const EnhancedResizableBox = ( props ) => { const isBlockWithText = BLOCKS_WITH_TEXT_SETTINGS.includes( blockName ) || 'core/code' === blockName; const isText = 'amp/amp-story-text' === blockName; - if ( isText ) { - height += TEXT_BLOCK_BORDER * 2; - width += TEXT_BLOCK_BORDER * 2; - } - - const textBlockBorderInPercentageTop = getPercentageFromPixels( 'y', TEXT_BLOCK_BORDER ); - const textBlockBorderInPercentageLeft = getPercentageFromPixels( 'x', TEXT_BLOCK_BORDER ); - return ( { const elementTop = parseFloat( blockElement.style.top ); const elementLeft = parseFloat( blockElement.style.left ); - const positionTop = ! isText ? Number( elementTop.toFixed( 2 ) ) : Number( ( elementTop + textBlockBorderInPercentageTop ).toFixed( 2 ) ); - const positionLeft = ! isText ? Number( elementLeft.toFixed( 2 ) ) : Number( ( elementLeft + textBlockBorderInPercentageLeft ).toFixed( 2 ) ); + const positionTop = Number( elementTop.toFixed( 2 ) ); + const positionLeft = Number( elementLeft.toFixed( 2 ) ); onResizeStop( { - width: isText ? parseInt( appliedWidth, 10 ) - ( TEXT_BLOCK_BORDER * 2 ) : parseInt( appliedWidth, 10 ), - height: isText ? parseInt( appliedHeight, 10 ) - ( TEXT_BLOCK_BORDER * 2 ) : parseInt( appliedHeight, 10 ), + width: parseInt( appliedWidth, 10 ), + height: parseInt( appliedHeight, 10 ), positionTop, positionLeft, } ); @@ -170,8 +162,8 @@ const EnhancedResizableBox = ( props ) => { } } - const scrollWidth = isText ? textElement.scrollWidth + ( TEXT_BLOCK_BORDER * 2 ) : textElement.scrollWidth; - const scrollHeight = isText ? textElement.scrollHeight + ( TEXT_BLOCK_BORDER * 2 ) : textElement.scrollHeight; + const scrollWidth = textElement.scrollWidth; + const scrollHeight = textElement.scrollHeight; if ( appliedWidth < scrollWidth || appliedHeight < scrollHeight ) { appliedWidth = lastWidth; appliedHeight = lastHeight; diff --git a/assets/src/stories-editor/components/story-block-drop-zone.js b/assets/src/stories-editor/components/story-block-drop-zone.js index 2d2217f0017..37afc29e01f 100644 --- a/assets/src/stories-editor/components/story-block-drop-zone.js +++ b/assets/src/stories-editor/components/story-block-drop-zone.js @@ -21,7 +21,6 @@ import { withDispatch } from '@wordpress/data'; * Internal dependencies */ import { getPercentageFromPixels } from '../helpers'; -import { TEXT_BLOCK_BORDER } from '../constants'; const wrapperElSelector = 'div[data-amp-selected="parent"] .editor-inner-blocks'; @@ -55,10 +54,9 @@ class BlockDropZone extends Component { // We will set the new position based on where the clone was moved to, with reference being the wrapper element. // Lets take the % based on the wrapper for top and left. - const possibleDelta = 'amp/amp-story-text' === srcBlockName ? TEXT_BLOCK_BORDER : 0; updateBlockAttributes( srcClientId, { - positionLeft: getPercentageFromPixels( 'x', clonePosition.left - wrapperPosition.left + possibleDelta ), - positionTop: getPercentageFromPixels( 'y', clonePosition.top - wrapperPosition.top + possibleDelta ), + positionLeft: getPercentageFromPixels( 'x', clonePosition.left - wrapperPosition.left ), + positionTop: getPercentageFromPixels( 'y', clonePosition.top - wrapperPosition.top ), } ); } diff --git a/assets/src/stories-editor/components/with-wrapper-props.js b/assets/src/stories-editor/components/with-wrapper-props.js index 67ce87387e4..6bdb1ff7862 100644 --- a/assets/src/stories-editor/components/with-wrapper-props.js +++ b/assets/src/stories-editor/components/with-wrapper-props.js @@ -6,9 +6,8 @@ import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import { ALLOWED_BLOCKS, ALLOWED_CHILD_BLOCKS, TEXT_BLOCK_BORDER } from '../constants'; +import { ALLOWED_BLOCKS, ALLOWED_CHILD_BLOCKS } from '../constants'; import { withAttributes, withBlockName, withHasSelectedInnerBlock } from './'; -import { getPercentageFromPixels } from '../helpers'; const wrapperWithSelect = compose( withAttributes, @@ -59,20 +58,10 @@ const withWrapperProps = ( BlockListBlock ) => { }; if ( ALLOWED_CHILD_BLOCKS.includes( blockName ) ) { - let style = {}; - if ( 'amp/amp-story-text' === blockName ) { - const textBlockBorderInPercentageTop = getPercentageFromPixels( 'y', TEXT_BLOCK_BORDER ); - const textBlockBorderInPercentageLeft = getPercentageFromPixels( 'x', TEXT_BLOCK_BORDER ); - style = { - top: `${ parseFloat( attributes.positionTop ) - textBlockBorderInPercentageTop }%`, - left: `${ parseFloat( attributes.positionLeft ) - textBlockBorderInPercentageLeft }%`, - }; - } else { - style = { - top: `${ attributes.positionTop }%`, - left: `${ attributes.positionLeft }%`, - }; - } + let style = { + top: `${ attributes.positionTop }%`, + left: `${ attributes.positionLeft }%`, + }; style.transform = `scale(var(--preview-scale)) translateX(var(--preview-translateX)) translateY(var(--preview-translateY)) rotate(${ attributes.rotationAngle || 0 }deg)`; if ( 'amp/amp-story-cta' === blockName ) { diff --git a/assets/src/stories-editor/constants.js b/assets/src/stories-editor/constants.js index 32f106511b8..96bd5f8c4ee 100644 --- a/assets/src/stories-editor/constants.js +++ b/assets/src/stories-editor/constants.js @@ -234,5 +234,4 @@ export const AMP_STORY_FONT_IMAGES = { Ubuntu, }; -export const TEXT_BLOCK_BORDER = 5; export const TEXT_BLOCK_PADDING = 7; From 23f56e464cf320eec0be4ab96b062d98b43c7039 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 22 Jul 2019 16:52:54 +0300 Subject: [PATCH 04/42] Fix style. Fix amp-fit-text selectores. --- assets/src/stories-editor/blocks/amp-story-text/edit.css | 3 +-- assets/src/stories-editor/blocks/amp-story-text/edit.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index cbb373d0e00..ed09091b24d 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -11,7 +11,7 @@ } .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 { @@ -19,7 +19,6 @@ } .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); } diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 8abf3e8a470..40f3d8c9200 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -202,7 +202,7 @@ class TextBlockEdit extends Component { } } >

Date: Tue, 23 Jul 2019 15:17:55 +0300 Subject: [PATCH 05/42] Disallow dragging in edit mode. --- .../blocks/amp-story-text/edit.js | 52 ++++++++++++------- .../higher-order/with-amp-story-settings.js | 22 ++++---- .../components/story-block-drop-zone.js | 3 +- .../components/with-story-block-drop-zone.js | 2 +- 4 files changed, 47 insertions(+), 32 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 40f3d8c9200..dc94dcadde3 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -23,6 +23,7 @@ import { select } from '@wordpress/data'; import { maybeUpdateFontSize, maybeUpdateBlockDimensions } from '../../helpers'; import { getBackgroundColorWithOpacity } from '../../../common/helpers'; import './edit.css'; +import { StoryBlockMover } from '../../components'; class TextBlockEdit extends Component { constructor() { @@ -113,10 +114,13 @@ class TextBlockEdit extends Component { attributes, setAttributes, className, + clientId, fontSize, + isPartOfMultiSelection, backgroundColor, customBackgroundColor, textColor, + name, } = this.props; const { @@ -195,29 +199,37 @@ class TextBlockEdit extends Component { /> } { ! isEditing && -

{ - this.toggleIsEditing( true ); - } } + -

{ + this.toggleIsEditing( true ); } } > - { content } -

-
+

+ { content } +

+
+ }
diff --git a/assets/src/stories-editor/components/higher-order/with-amp-story-settings.js b/assets/src/stories-editor/components/higher-order/with-amp-story-settings.js index 0e7cb6dfa10..414e2d2fe2e 100644 --- a/assets/src/stories-editor/components/higher-order/with-amp-story-settings.js +++ b/assets/src/stories-editor/components/higher-order/with-amp-story-settings.js @@ -241,7 +241,6 @@ export default createHigherOrderComponent( } const captionAttribute = isVideoBlock ? 'ampShowCaption' : 'ampShowImageCaption'; - return ( <> { ( ! isMovableBlock ) && ( ) } @@ -279,15 +278,20 @@ export default createHigherOrderComponent( stopBlockActions(); } } > - + { isTextBlock && ( - + ) } + { ! isTextBlock && ( + + + + ) } ) } diff --git a/assets/src/stories-editor/components/story-block-drop-zone.js b/assets/src/stories-editor/components/story-block-drop-zone.js index 37afc29e01f..2219a453ebf 100644 --- a/assets/src/stories-editor/components/story-block-drop-zone.js +++ b/assets/src/stories-editor/components/story-block-drop-zone.js @@ -32,7 +32,7 @@ class BlockDropZone extends Component { } onDrop( event ) { - const { updateBlockAttributes, srcBlockName, srcClientId } = this.props; + const { updateBlockAttributes, srcClientId } = this.props; const elementId = `block-${ srcClientId }`; const cloneElementId = `clone-block-${ srcClientId }`; @@ -73,7 +73,6 @@ class BlockDropZone extends Component { BlockDropZone.propTypes = { updateBlockAttributes: PropTypes.func, srcClientId: PropTypes.string, - srcBlockName: PropTypes.string, }; export default withDispatch( ( dispatch ) => { diff --git a/assets/src/stories-editor/components/with-story-block-drop-zone.js b/assets/src/stories-editor/components/with-story-block-drop-zone.js index 941c88b8e68..eef7a1e99c7 100644 --- a/assets/src/stories-editor/components/with-story-block-drop-zone.js +++ b/assets/src/stories-editor/components/with-story-block-drop-zone.js @@ -41,7 +41,7 @@ const withStoryBlockDropZone = () => { * Using dropzone of each single element would result the dropzone moving together with the element. */ if ( 'amp/amp-story-page' === blockName && hasSelectedInnerBlock && selectedBlock ) { - return ; + return ; } return null; } ); From a3600d98a06482552fedb273735a3af5b74f1e8b Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 15:20:15 +0300 Subject: [PATCH 06/42] Add comment. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index dc94dcadde3..4e1cd16a4f9 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -162,6 +162,7 @@ class TextBlockEdit extends Component { const textWrapperClassName = 'wp-block-amp-story-text'; + // StoryBlockMover is added here to the Text block since it depends on isEditing state. return ( <> @@ -252,6 +253,8 @@ TextBlockEdit.propTypes = { ampFontFamily: PropTypes.string, } ).isRequired, isSelected: PropTypes.bool.isRequired, + clientId: PropTypes.string.isRequired, + isPartOfMultiSelection: PropTypes.bool.isRequired, onReplace: PropTypes.func.isRequired, name: PropTypes.string.isRequired, setAttributes: PropTypes.func.isRequired, From 5488bb180cbb0dddf548958000c43432d39f7115 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 15:53:19 +0300 Subject: [PATCH 07/42] Add placeholder logic. --- .../src/stories-editor/blocks/amp-story-text/edit.css | 8 ++++++++ .../src/stories-editor/blocks/amp-story-text/edit.js | 10 +++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index ed09091b24d..5f82c6bda34 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -10,6 +10,14 @@ width: 100%; } +.wp-block-amp-story-text-wrapper.is-empty-draggable-text { + height: 100%; +} + +.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: -13px; } diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 4e1cd16a4f9..4623981d798 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -173,6 +173,7 @@ class TextBlockEdit extends Component {
{ isEditing &&
{ this.toggleIsEditing( true ); } } @@ -227,7 +227,11 @@ class TextBlockEdit extends Component { position: ampFitText && content.length ? 'static' : undefined, } } > - { content } + { content.length ? content : ( +

+ { placeholder || __( 'Write text…', 'amp' ) } +

+ ) }

@@ -254,7 +258,7 @@ TextBlockEdit.propTypes = { } ).isRequired, isSelected: PropTypes.bool.isRequired, clientId: PropTypes.string.isRequired, - isPartOfMultiSelection: PropTypes.bool.isRequired, + isPartOfMultiSelection: PropTypes.bool, onReplace: PropTypes.func.isRequired, name: PropTypes.string.isRequired, setAttributes: PropTypes.func.isRequired, From cebff8b40ee177d7c8bddc84d708b3291ceb7a53 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 16:20:23 +0300 Subject: [PATCH 08/42] Fix amp-fit-text. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 4623981d798..b0541feb075 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -209,6 +209,7 @@ class TextBlockEdit extends Component { isMovable={ true } >
{ this.toggleIsEditing( true ); } } From d9a8748f635eaf32828b95ef557912cf8ccfb5b5 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 16:22:03 +0300 Subject: [PATCH 09/42] Fix jscs. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index b0541feb075..b7d77881a07 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -229,7 +229,7 @@ class TextBlockEdit extends Component { } } > { content.length ? content : ( -

+

{ placeholder || __( 'Write text…', 'amp' ) }

) } From a782d3529f3439123a5f978825276c22d9e3d3d1 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 16:29:47 +0300 Subject: [PATCH 10/42] Reduce duplication. --- .../blocks/amp-story-text/edit.js | 40 ++++++++----------- 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index b7d77881a07..38f1c992716 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -161,6 +161,18 @@ class TextBlockEdit extends Component { } const textWrapperClassName = 'wp-block-amp-story-text'; + const textClassNames = { + 'has-text-color': textColor.color, + [ textColor.class ]: textColor.class, + [ fontSize.class ]: ampFitText ? undefined : fontSize.class, + 'is-amp-fit-text': ampFitText, + }; + const textStyle = { + color: textColor.color, + fontSize: ampFitText ? autoFontSize + 'px' : userFontSize, + textAlign: align, + position: ampFitText && content.length ? 'static' : undefined, + }; // StoryBlockMover is added here to the Text block since it depends on isEditing state. return ( @@ -185,18 +197,8 @@ class TextBlockEdit extends Component { // The 2 following lines are necessary for pasting to work. onReplace={ this.onReplace } onSplit={ () => {} } - style={ { - color: textColor.color, - fontSize: ampFitText ? autoFontSize + 'px' : userFontSize, - textAlign: align, - position: ampFitText && content.length ? 'static' : undefined, - } } - className={ classnames( className, { - 'has-text-color': textColor.color, - [ textColor.class ]: textColor.class, - [ fontSize.class ]: ampFitText ? undefined : fontSize.class, - 'is-amp-fit-text': ampFitText, - } ) } + style={ textStyle } + className={ classnames( className, textClassNames ) } placeholder={ placeholder || __( 'Write text…', 'amp' ) } /> } @@ -215,18 +217,8 @@ class TextBlockEdit extends Component { } } >

{ content.length ? content : (

From cb88011ac7bfd0f6e85758a76823784baaa18154 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 16:44:15 +0300 Subject: [PATCH 11/42] Fix styling. --- assets/src/stories-editor/blocks/amp-story-text/edit.css | 3 ++- assets/src/stories-editor/blocks/amp-story-text/edit.js | 2 +- assets/src/stories-editor/components/resizable-box/index.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index 5f82c6bda34..08f09357aba 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -10,7 +10,8 @@ width: 100%; } -.wp-block-amp-story-text-wrapper.is-empty-draggable-text { +.wp-block-amp-story-text-wrapper.is-empty-draggable-text, +.wp-block-amp-story-text-wrapper:not(.with-line-height) { height: 100%; } diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 38f1c992716..d8e24082a1d 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -217,7 +217,7 @@ class TextBlockEdit extends Component { } } >

{ content.length ? content : ( diff --git a/assets/src/stories-editor/components/resizable-box/index.js b/assets/src/stories-editor/components/resizable-box/index.js index cb51042bbe4..fadff467381 100644 --- a/assets/src/stories-editor/components/resizable-box/index.js +++ b/assets/src/stories-editor/components/resizable-box/index.js @@ -225,7 +225,7 @@ const EnhancedResizableBox = ( props ) => { lastHeight = appliedHeight; if ( textBlockWrapper && ampFitText ) { - textBlockWrapper.style.lineHeight = isText ? appliedHeight - ( TEXT_BLOCK_PADDING * 2 ) + 'px' : appliedHeight + 'px'; + textBlockWrapper.style.lineHeight = appliedHeight + 'px'; } // If it's image, let's change the width and height of the image, too. From ebc5b71a95744b0a7a7d69b2523956460b502b18 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 20:43:03 +0300 Subject: [PATCH 12/42] Fix classname. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index d8e24082a1d..5047bff8c6a 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -217,7 +217,7 @@ class TextBlockEdit extends Component { } } >

{ content.length ? content : ( From 127a5ffa9d8044fd1fa1d365c4e1c3d0b764df9f Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 21:21:50 +0300 Subject: [PATCH 13/42] Fix resizing with amp-fit-text. --- assets/src/stories-editor/components/resizable-box/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/src/stories-editor/components/resizable-box/index.js b/assets/src/stories-editor/components/resizable-box/index.js index fadff467381..42ec4c65111 100644 --- a/assets/src/stories-editor/components/resizable-box/index.js +++ b/assets/src/stories-editor/components/resizable-box/index.js @@ -226,6 +226,8 @@ const EnhancedResizableBox = ( props ) => { if ( textBlockWrapper && ampFitText ) { textBlockWrapper.style.lineHeight = appliedHeight + 'px'; + // Also add the height to the wrapper since the background color is set to the wrapper. + textBlockWrapper.style.height = appliedHeight + 'px'; } // If it's image, let's change the width and height of the image, too. From a6e278895625ef403be2e22eea7e6b8ba322f6e1 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 21:37:31 +0300 Subject: [PATCH 14/42] Also fix resizing for non-amp-fit-text. --- .../stories-editor/components/resizable-box/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/assets/src/stories-editor/components/resizable-box/index.js b/assets/src/stories-editor/components/resizable-box/index.js index 42ec4c65111..2c016314057 100644 --- a/assets/src/stories-editor/components/resizable-box/index.js +++ b/assets/src/stories-editor/components/resizable-box/index.js @@ -80,6 +80,11 @@ const EnhancedResizableBox = ( props ) => { let appliedWidth = width + deltaW; let appliedHeight = height + deltaH; + // Restore the full height for Text block wrapper. + if ( textBlockWrapper ) { + textBlockWrapper.style.height = '100%'; + } + // Ensure the measures not crossing limits. appliedWidth = appliedWidth < lastWidth ? lastWidth : appliedWidth; appliedHeight = appliedHeight < lastHeight ? lastHeight : appliedHeight; @@ -224,8 +229,10 @@ const EnhancedResizableBox = ( props ) => { lastWidth = appliedWidth; lastHeight = appliedHeight; - if ( textBlockWrapper && ampFitText ) { - textBlockWrapper.style.lineHeight = appliedHeight + 'px'; + if ( textBlockWrapper ) { + if ( ampFitText ) { + textBlockWrapper.style.lineHeight = appliedHeight + 'px'; + } // Also add the height to the wrapper since the background color is set to the wrapper. textBlockWrapper.style.height = appliedHeight + 'px'; } From 9d9b8f978e84ac5a225b8fb1ea212c5b5dde3fe7 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 23 Jul 2019 23:32:14 +0300 Subject: [PATCH 15/42] Prevent text selection after doubleclikc. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 5047bff8c6a..1877489bf9e 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -215,6 +215,12 @@ class TextBlockEdit extends Component { onDoubleClick={ () => { this.toggleIsEditing( true ); } } + onMouseDown={ ( event ) => { + // Prevent text selection on double click. + if ( 1 < event.detail ) { + event.preventDefault(); + } + } } >

Date: Wed, 24 Jul 2019 00:33:35 +0300 Subject: [PATCH 16/42] Fix jscs. --- .../blocks/amp-story-text/edit.css | 4 ++++ .../blocks/amp-story-text/edit.js | 22 ++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index 08f09357aba..ec2aadeef02 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -10,6 +10,10 @@ 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%; diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 1877489bf9e..3a5a8bb5efb 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -41,7 +41,7 @@ class TextBlockEdit extends Component { maybeUpdateFontSize( this.props ); } - componentDidUpdate( prevProps ) { + componentDidUpdate( prevProps, prevState ) { const { attributes, fontSize, isSelected } = this.props; const { height, @@ -78,6 +78,20 @@ class TextBlockEdit extends Component { if ( checkBlockDimensions ) { maybeUpdateBlockDimensions( this.props ); } + + // If the state changed to editing, focus on the text. + if ( this.state.isEditing && ! prevState.isEditing ) { + const textInput = document.querySelector( '.is-selected .wp-block-amp-amp-story-text' ); + 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 ); + } + } } onReplace( blocks ) { @@ -211,7 +225,9 @@ class TextBlockEdit extends Component { isMovable={ true } >

{ this.toggleIsEditing( true ); } } @@ -223,7 +239,7 @@ class TextBlockEdit extends Component { } } >

{ content.length ? content : ( From fe8782e3eeac8a746f9764fde3d06be5ca4231d1 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 25 Jul 2019 13:26:47 +0300 Subject: [PATCH 17/42] Enter edit mode with one click only. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 3a5a8bb5efb..55e7fef13b0 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -131,6 +131,7 @@ class TextBlockEdit extends Component { clientId, fontSize, isPartOfMultiSelection, + isSelected, backgroundColor, customBackgroundColor, textColor, @@ -228,8 +229,10 @@ class TextBlockEdit extends Component { role="textbox" tabIndex="-1" className="is-not-editing editor-rich-text block-editor-rich-text wp-block-amp-story-text" - onDoubleClick={ () => { - this.toggleIsEditing( true ); + onClick={ () => { + if ( isSelected ) { + this.toggleIsEditing( true ); + } } } onMouseDown={ ( event ) => { // Prevent text selection on double click. From 764ac145f81887d0402355039e2e7660e2167686 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 25 Jul 2019 14:02:37 +0300 Subject: [PATCH 18/42] Add overay logic. --- .../blocks/amp-story-text/edit.css | 10 ++++++ .../blocks/amp-story-text/edit.js | 31 ++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index ec2aadeef02..6230cbc3ed2 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -18,6 +18,16 @@ .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; diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 55e7fef13b0..9f0f6c23a5f 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -16,6 +16,7 @@ import { AlignmentToolbar, } from '@wordpress/block-editor'; import { select } from '@wordpress/data'; +import { ENTER } from '@wordpress/keycodes'; /** * Internal dependencies @@ -31,10 +32,12 @@ class TextBlockEdit extends Component { this.state = { isEditing: false, + hasOverlay: true, }; this.onReplace = this.onReplace.bind( this ); this.toggleIsEditing = this.toggleIsEditing.bind( this ); + this.toggleOverlay = this.toggleOverlay.bind( this ); } componentDidMount() { @@ -54,6 +57,7 @@ class TextBlockEdit extends Component { // If the block was unselected, make sure that it's not editing anymore. if ( ! isSelected && prevProps.isSelected ) { this.toggleIsEditing( false ); + this.toggleOverlay( true ); } const checkFontSize = ampFitText && ( @@ -121,8 +125,16 @@ class TextBlockEdit extends Component { } } + toggleOverlay( add ) { + if ( add !== this.state.hasOverlay ) { + this.setState( { + hasOverlay: ! this.state.hasOverlay, + } ); + } + } + render() { - const { isEditing } = this.state; + const { isEditing, hasOverlay } = this.state; const { attributes, @@ -234,6 +246,11 @@ class TextBlockEdit extends Component { this.toggleIsEditing( true ); } } } + onKeyDown={ ( e ) => { + if ( ENTER === e.keyCode && isSelected ) { + this.toggleIsEditing( true ); + } + } } onMouseDown={ ( event ) => { // Prevent text selection on double click. if ( 1 < event.detail ) { @@ -241,6 +258,18 @@ class TextBlockEdit extends Component { } } } > + { hasOverlay && ( +

{ + this.toggleOverlay( false ); + e.stopPropagation(); + } } + onKeyDown={ () => {} } + >
+ ) }

Date: Thu, 25 Jul 2019 21:35:19 +0300 Subject: [PATCH 19/42] Fix CSS. --- assets/src/stories-editor/blocks/amp-story-text/edit.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.css b/assets/src/stories-editor/blocks/amp-story-text/edit.css index 6230cbc3ed2..293dd6f5371 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.css +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.css @@ -18,6 +18,7 @@ .wp-block-amp-story-text-wrapper:not(.with-line-height) { height: 100%; } + .wp-block-amp-story-text-wrapper .amp-overlay { height: 100%; width: 100%; From bd533cddb58bc5fc55a1199925323b10cd74de73 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 1 Aug 2019 18:18:42 +0300 Subject: [PATCH 20/42] Remove non-working key inreactions. --- .../blocks/amp-story-text/edit.js | 28 ++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 2983b2d1199..ab038a04bc5 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -16,7 +16,6 @@ import { AlignmentToolbar, } from '@wordpress/block-editor'; import { select } from '@wordpress/data'; -import { ENTER } from '@wordpress/keycodes'; /** * Internal dependencies @@ -237,20 +236,14 @@ class TextBlockEdit extends Component { isDraggable={ ! isPartOfMultiSelection } isMovable={ true } > + { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }

{ if ( isSelected ) { this.toggleIsEditing( true ); } } } - onKeyDown={ ( e ) => { - if ( ENTER === e.keyCode && isSelected ) { - this.toggleIsEditing( true ); - } - } } onMouseDown={ ( event ) => { // Prevent text selection on double click. if ( 1 < event.detail ) { @@ -258,17 +251,14 @@ class TextBlockEdit extends Component { } } } > - { hasOverlay && ( -
{ - this.toggleOverlay( false ); - e.stopPropagation(); - } } - onKeyDown={ () => {} } - >
+ { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ } + { hasOverlay && (
{ + this.toggleOverlay( false ); + e.stopPropagation(); + } } + >
) }

Date: Thu, 1 Aug 2019 18:24:40 +0300 Subject: [PATCH 21/42] Revert some changes. --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index ab038a04bc5..c07929cbe0d 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -236,8 +236,10 @@ class TextBlockEdit extends Component { isDraggable={ ! isPartOfMultiSelection } isMovable={ true } > - { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ } + { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ }

{ if ( isSelected ) { @@ -251,8 +253,10 @@ class TextBlockEdit extends Component { } } } > - { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ } + { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ } { hasOverlay && (
{ this.toggleOverlay( false ); From 95f411277a27bdc7048513b1d10f8552f1a613e0 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 1 Aug 2019 20:51:29 +0300 Subject: [PATCH 22/42] Add some tests. --- .../specs/stories-editor/text-block.test.js | 56 +++++++++++++++++++ tests/e2e/utils/index.js | 1 + 2 files changed, 57 insertions(+) create mode 100644 tests/e2e/specs/stories-editor/text-block.test.js diff --git a/tests/e2e/specs/stories-editor/text-block.test.js b/tests/e2e/specs/stories-editor/text-block.test.js new file mode 100644 index 00000000000..c981c1ae345 --- /dev/null +++ b/tests/e2e/specs/stories-editor/text-block.test.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { createNewPost, dragAndResize, getEditedPostContent } from '@wordpress/e2e-test-utils'; + +/** + * Internal dependencies + */ +import { activateExperience, deactivateExperience, selectBlockByClassName } from '../../utils'; + +describe( 'Text Block', () => { + beforeAll( async () => { + await activateExperience( 'stories' ); + } ); + + afterAll( async () => { + await deactivateExperience( 'stories' ); + } ); + + const textBlockClass = 'wp-block-amp-story-text'; + + beforeEach( async () => { + await createNewPost( { postType: 'amp_story' } ); + await page.waitForSelector( `.${ textBlockClass }.is-not-editing` ); + await selectBlockByClassName( textBlockClass ); + } ); + + it( 'should not be in editable mode when selecting the block', async () => { + await page.keyboard.type( 'Hello' ); + const content = await page.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .wp-block-amp-amp-story-text', ( node ) => node.textContent ); + expect( content ).toStrictEqual( 'Write text…' ); + } ); + + it( 'should go to editable mode after two clicks', async () => { + const textToWrite = 'Hello'; + + await page.click( `.${ textBlockClass }` ); + await page.keyboard.type( textToWrite ); + const content = await page.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .wp-block-amp-amp-story-text', ( node ) => node.textContent ); + expect( content ).toStrictEqual( textToWrite ); + } ); + + // @todo Dragging is not working for some reason. + it.skip( 'should allow dragging the Text block from anywhere when not editing', async () => { // eslint-disable-line jest/no-disabled-tests + const textBlock = await page.$( '.wp-block-amp-story-text-wrapper' ); + await dragAndResize( textBlock, { x: 0, y: 25 } ); + expect( await getEditedPostContent() ).toBe( '' ); + } ); + + // @todo This test is useless until dragging actually works in the previous test. + it.skip( 'should not allow dragging in editable mode', async () => { // eslint-disable-line jest/no-disabled-tests + await page.click( `.${ textBlockClass }` ); + const textBlock = await page.$( '.wp-block-amp-story-text-wrapper' ); + await dragAndResize( textBlock, { x: 0, y: 25 } ); + } ); +} ); diff --git a/tests/e2e/utils/index.js b/tests/e2e/utils/index.js index 52e28555637..be5c519b35a 100644 --- a/tests/e2e/utils/index.js +++ b/tests/e2e/utils/index.js @@ -6,3 +6,4 @@ export { openGlobalBlockInserter } from './open-global-block-inserter'; export { searchForBlock } from './search-for-block'; export { insertBlock } from './insert-block'; export { openTemplateInserter } from './open-template-inserter'; +export { selectBlockByClassName } from './select-block-by-classname'; From 49609a941e2add08bb5982ac4215ba437778f6da Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 1 Aug 2019 20:58:06 +0300 Subject: [PATCH 23/42] Add missing file. --- tests/e2e/utils/select-block-by-classname.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 tests/e2e/utils/select-block-by-classname.js diff --git a/tests/e2e/utils/select-block-by-classname.js b/tests/e2e/utils/select-block-by-classname.js new file mode 100644 index 00000000000..a1d71d1263c --- /dev/null +++ b/tests/e2e/utils/select-block-by-classname.js @@ -0,0 +1,10 @@ +/** + * Select block in editor by clicking on it. + * + * @param {string} className Class name to select by. + */ +export async function selectBlockByClassName( className ) { + // We have to select the page first and then the block inside. + await page.click( '.amp-page-active' ); + await page.click( `.${ className }` ); +} From 482873b1eac82fa71c34e3dc0447aae001896e12 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Tue, 6 Aug 2019 20:59:39 +0200 Subject: [PATCH 24/42] Add getBlocksOnPage helper util --- tests/e2e/utils/get-blocks-on-page.js | 14 ++++++++++++++ tests/e2e/utils/index.js | 1 + tests/e2e/utils/wp-data-select.js | 18 ++++++++++++++++++ 3 files changed, 33 insertions(+) create mode 100644 tests/e2e/utils/get-blocks-on-page.js create mode 100644 tests/e2e/utils/wp-data-select.js diff --git a/tests/e2e/utils/get-blocks-on-page.js b/tests/e2e/utils/get-blocks-on-page.js new file mode 100644 index 00000000000..6cbb6bb4e2d --- /dev/null +++ b/tests/e2e/utils/get-blocks-on-page.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { wpDataSelect } from './wp-data-select'; + +/** + * Returns an array with all blocks on the currently active page. + * + * @return {Promise} Promise resolving with an array containing all blocks on the current page. + */ +export async function getBlocksOnPage() { + const currentPage = await wpDataSelect( 'amp/story', 'getCurrentPage' ); + return wpDataSelect( 'core/block-editor', 'getBlocks', currentPage ); +} diff --git a/tests/e2e/utils/index.js b/tests/e2e/utils/index.js index be5c519b35a..cab44d7e20e 100644 --- a/tests/e2e/utils/index.js +++ b/tests/e2e/utils/index.js @@ -7,3 +7,4 @@ export { searchForBlock } from './search-for-block'; export { insertBlock } from './insert-block'; export { openTemplateInserter } from './open-template-inserter'; export { selectBlockByClassName } from './select-block-by-classname'; +export { getBlocksOnPage } from './get-blocks-on-page'; diff --git a/tests/e2e/utils/wp-data-select.js b/tests/e2e/utils/wp-data-select.js new file mode 100644 index 00000000000..fac2bebcb3c --- /dev/null +++ b/tests/e2e/utils/wp-data-select.js @@ -0,0 +1,18 @@ +/** + * Queries the WordPress data module. + * @param {string} store Store to query e.g: core/editor, core/blocks... + * @param {string} selector Selector to exectute e.g: getBlocks. + * @param {...Object} parameters Parameters to pass to the selector. + * + * @return {?Object} Result of querying. + */ +export function wpDataSelect( store, selector, ...parameters ) { + return page.evaluate( + ( _store, _selector, ..._parameters ) => { + return window.wp.data.select( _store )[ _selector ]( ..._parameters ); + }, + store, + selector, + parameters + ); +} From b629057cd48e58c21f709d69215e0561f903a45e Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Tue, 6 Aug 2019 21:00:27 +0200 Subject: [PATCH 25/42] Improve dragging tests a bit (still skipped) --- .../specs/stories-editor/text-block.test.js | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/tests/e2e/specs/stories-editor/text-block.test.js b/tests/e2e/specs/stories-editor/text-block.test.js index c981c1ae345..251866f6036 100644 --- a/tests/e2e/specs/stories-editor/text-block.test.js +++ b/tests/e2e/specs/stories-editor/text-block.test.js @@ -1,12 +1,14 @@ /** * WordPress dependencies */ -import { createNewPost, dragAndResize, getEditedPostContent } from '@wordpress/e2e-test-utils'; +import { createNewPost, dragAndResize, selectBlockByClientId } from '@wordpress/e2e-test-utils'; /** * Internal dependencies */ -import { activateExperience, deactivateExperience, selectBlockByClassName } from '../../utils'; +import { activateExperience, deactivateExperience, selectBlockByClassName, getBlocksOnPage } from '../../utils'; + +const textBlockClass = 'wp-block-amp-story-text'; describe( 'Text Block', () => { beforeAll( async () => { @@ -17,8 +19,6 @@ describe( 'Text Block', () => { await deactivateExperience( 'stories' ); } ); - const textBlockClass = 'wp-block-amp-story-text'; - beforeEach( async () => { await createNewPost( { postType: 'amp_story' } ); await page.waitForSelector( `.${ textBlockClass }.is-not-editing` ); @@ -42,15 +42,30 @@ describe( 'Text Block', () => { // @todo Dragging is not working for some reason. it.skip( 'should allow dragging the Text block from anywhere when not editing', async () => { // eslint-disable-line jest/no-disabled-tests - const textBlock = await page.$( '.wp-block-amp-story-text-wrapper' ); - await dragAndResize( textBlock, { x: 0, y: 25 } ); - expect( await getEditedPostContent() ).toBe( '' ); + const textBlockBefore = ( await getBlocksOnPage() )[ 0 ]; + const textBlockEl = await page.$( '.wp-block-amp-story-text-wrapper' ); + + await selectBlockByClientId( textBlockBefore.clientId ); + await dragAndResize( textBlockEl, { x: 50, y: 50 } ); + + const textBlockAfter = ( await getBlocksOnPage() )[ 0 ]; + + expect( textBlockBefore.attributes.positionTop ).not.toStrictEqual( textBlockAfter.attributes.positionTop ); + expect( textBlockBefore.attributes.positionLeft ).not.toStrictEqual( textBlockAfter.attributes.positionLeft ); } ); // @todo This test is useless until dragging actually works in the previous test. it.skip( 'should not allow dragging in editable mode', async () => { // eslint-disable-line jest/no-disabled-tests + const textBlockBefore = ( await getBlocksOnPage() )[ 0 ]; + const textBlockEl = await page.$( '.wp-block-amp-story-text-wrapper' ); + + await selectBlockByClientId( textBlockBefore.clientId ); await page.click( `.${ textBlockClass }` ); - const textBlock = await page.$( '.wp-block-amp-story-text-wrapper' ); - await dragAndResize( textBlock, { x: 0, y: 25 } ); + await dragAndResize( textBlockEl, { x: 0, y: 25 } ); + + const textBlockAfter = ( await getBlocksOnPage() )[ 0 ]; + + expect( textBlockBefore.attributes.positionTop ).toStrictEqual( textBlockAfter.attributes.positionTop ); + expect( textBlockBefore.attributes.positionLeft ).toStrictEqual( textBlockAfter.attributes.positionLeft ); } ); } ); From db4fc34cb95d60b73bff36712158559d95586bce Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 7 Aug 2019 14:10:13 +0300 Subject: [PATCH 26/42] Fix merging issues. --- tests/e2e/utils/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/e2e/utils/index.js b/tests/e2e/utils/index.js index a1cbb0f4c97..83ce5dc3bfd 100644 --- a/tests/e2e/utils/index.js +++ b/tests/e2e/utils/index.js @@ -9,5 +9,4 @@ export { openPreviewPage } from './open-preview-page'; export { openTemplateInserter } from './open-template-inserter'; export { selectBlockByClassName } from './select-block-by-classname'; export { uploadMedia } from './upload-media'; -export { selectBlockByClassName } from './select-block-by-classname'; export { getBlocksOnPage } from './get-blocks-on-page'; From 8808caa0df3f260ee4e972f1563ad2fa139ecfaa Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 7 Aug 2019 15:58:44 +0300 Subject: [PATCH 27/42] Add key events. --- .../blocks/amp-story-text/edit.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index c07929cbe0d..1602f49f222 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -16,6 +16,7 @@ import { AlignmentToolbar, } from '@wordpress/block-editor'; import { select } from '@wordpress/data'; +import { ENTER } from '@wordpress/keycodes'; /** * Internal dependencies @@ -236,7 +237,6 @@ class TextBlockEdit extends Component { isDraggable={ ! isPartOfMultiSelection } isMovable={ true } > - { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ }
{ + e.stopPropagation(); + if ( ENTER === e.keyCode && isSelected ) { + this.toggleOverlay( false ); + this.toggleIsEditing( true ); + } + } } > - { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ } { hasOverlay && (
{ + e.stopPropagation(); + if ( ENTER === e.keyCode && isSelected ) { + this.toggleOverlay( false ); + this.toggleIsEditing( true ); + } + } } >
) }

Date: Wed, 7 Aug 2019 16:05:00 +0300 Subject: [PATCH 28/42] Use event instead of e for consistency. --- .../stories-editor/blocks/amp-story-text/edit.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 1602f49f222..bc9ecc2f99c 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -252,9 +252,9 @@ class TextBlockEdit extends Component { event.preventDefault(); } } } - onKeyDown={ ( e ) => { - e.stopPropagation(); - if ( ENTER === e.keyCode && isSelected ) { + onKeyDown={ ( event ) => { + event.stopPropagation(); + if ( ENTER === event.keyCode && isSelected ) { this.toggleOverlay( false ); this.toggleIsEditing( true ); } @@ -264,13 +264,13 @@ class TextBlockEdit extends Component { role="textbox" tabIndex="-1" className="amp-overlay" - onClick={ ( e ) => { + onClick={ ( event ) => { this.toggleOverlay( false ); - e.stopPropagation(); + event.stopPropagation(); } } - onKeyDown={ ( e ) => { - e.stopPropagation(); - if ( ENTER === e.keyCode && isSelected ) { + onKeyDown={ ( event ) => { + event.stopPropagation(); + if ( ENTER === event.keyCode && isSelected ) { this.toggleOverlay( false ); this.toggleIsEditing( true ); } From e73352ba24f114d084a418910b5303d431e8e52e Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 8 Aug 2019 13:14:02 +0300 Subject: [PATCH 29/42] Use rawHTML for displaying non editable text. --- .../stories-editor/blocks/amp-story-text/edit.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 4c43e78418a..10058b89c7b 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -9,7 +9,7 @@ import { isEqual } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; +import { Component, RawHTML } from '@wordpress/element'; import { RichText, BlockControls, @@ -282,11 +282,13 @@ class TextBlockEdit extends Component { className={ classnames( className + ' block-editor-rich-text__editable editor-rich-text__editable', textClassNames ) } style={ textStyle } > - { content.length ? content : ( -

- { placeholder || __( 'Write text…', 'amp' ) } -

- ) } + { content && content.length ? + { content } : + ( +

+ { placeholder || __( 'Write text…', 'amp' ) } +

+ ) }

From d719023c9477d15b99f6981686941b0c191e4341 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 21:38:52 +0300 Subject: [PATCH 30/42] Restore srcBlockName usage. --- .../src/stories-editor/components/with-story-block-drop-zone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/stories-editor/components/with-story-block-drop-zone.js b/assets/src/stories-editor/components/with-story-block-drop-zone.js index eef7a1e99c7..941c88b8e68 100644 --- a/assets/src/stories-editor/components/with-story-block-drop-zone.js +++ b/assets/src/stories-editor/components/with-story-block-drop-zone.js @@ -41,7 +41,7 @@ const withStoryBlockDropZone = () => { * Using dropzone of each single element would result the dropzone moving together with the element. */ if ( 'amp/amp-story-page' === blockName && hasSelectedInnerBlock && selectedBlock ) { - return ; + return ; } return null; } ); From ffb8d8c8d48e70d8860b0169fa0006c47b875141 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 21:49:04 +0300 Subject: [PATCH 31/42] Fix CTA style. --- assets/src/stories-editor/blocks/amp-story-cta/edit.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.css b/assets/src/stories-editor/blocks/amp-story-cta/edit.css index 1f86319cff7..3c29d1f23bd 100644 --- 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 { From 4764190d7316f873dc441d03d36cd292342b771c Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 22:56:28 +0300 Subject: [PATCH 32/42] Separate draggable text component. --- .../blocks/amp-story-cta/edit.js | 116 +++++++----------- assets/src/stories-editor/components/index.js | 1 + 2 files changed, 42 insertions(+), 75 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.js b/assets/src/stories-editor/blocks/amp-story-cta/edit.js index 0e852144a49..e34cac7db7f 100644 --- 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, @@ -25,7 +25,7 @@ import './edit.css'; import { select } from '@wordpress/data'; import { getUniqueId } from '../../helpers'; import { getBackgroundColorWithOpacity } from '../../../common/helpers'; -import { StoryBlockMover } from '../../components'; +import { DraggableText } from '../../components'; class CallToActionEdit extends Component { constructor( props ) { @@ -132,81 +132,47 @@ class CallToActionEdit extends Component { }; return ( <> - -
-
- { isEditing && ( - setAttributes( { text: value } ) } - className={ textWrapperClass } - style={ textStyle } - /> - ) } - { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */ } - { ! isEditing &&
{ - 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 && (
{ - this.toggleOverlay( false ); - e.stopPropagation(); - } } - >
- ) } -
- { text && text.length ? - { text } : ( - - { placeholder } - - ) } -
-
- } -
- { isSelected && ( -
event.preventDefault() }> - - setAttributes( { url: value } ) } - autoFocus={ false /* eslint-disable-line jsx-a11y/no-autofocus */ } - /> - - +
+
+ { isEditing && ( + setAttributes( { text: value } ) } + className={ textWrapperClass } + style={ textStyle } + /> ) } + { ! isEditing && + + }
- + { isSelected && isEditing && ( +
event.preventDefault() }> + + setAttributes( { url: value } ) } + autoFocus={ false /* eslint-disable-line jsx-a11y/no-autofocus */ } + /> + + + ) } +
); } diff --git a/assets/src/stories-editor/components/index.js b/assets/src/stories-editor/components/index.js index ff37fba2179..dc1bed21354 100644 --- a/assets/src/stories-editor/components/index.js +++ b/assets/src/stories-editor/components/index.js @@ -3,6 +3,7 @@ export { default as AnimationOrderPicker } from './animation-order-picker'; export { default as BlockNavigation } from './block-navigation'; export { default as BlockPreview } from './block-preview'; export { default as BlockPreviewLabel } from './block-preview-label'; +export { default as DraggableText } from './draggable-text'; export { default as EditorCarousel } from './editor-carousel'; export { default as Reorderer } from './reorderer'; export { default as StoryControls } from './story-controls'; From 80e2362041371fe0f11b1a319ec6e8e85d7370df Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:10:33 +0300 Subject: [PATCH 33/42] Use DraggableText in Text block, too. --- .../blocks/amp-story-cta/edit.js | 1 + .../blocks/amp-story-text/edit.js | 75 ++++--------------- 2 files changed, 16 insertions(+), 60 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.js b/assets/src/stories-editor/blocks/amp-story-cta/edit.js index e34cac7db7f..c214e381f5e 100644 --- a/assets/src/stories-editor/blocks/amp-story-cta/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-cta/edit.js @@ -145,6 +145,7 @@ class CallToActionEdit extends Component { ) } { ! isEditing && } { ! isEditing && - -
{ - if ( isSelected ) { - this.toggleIsEditing( true ); - } - } } - onMouseDown={ ( event ) => { - // Prevent text selection on double click. - if ( 1 < event.detail ) { - event.preventDefault(); - } - } } - onKeyDown={ ( event ) => { - event.stopPropagation(); - if ( ENTER === event.keyCode && isSelected ) { - this.toggleOverlay( false ); - this.toggleIsEditing( true ); - } - } } - > - { hasOverlay && (
{ - this.toggleOverlay( false ); - event.stopPropagation(); - } } - onKeyDown={ ( event ) => { - event.stopPropagation(); - if ( ENTER === event.keyCode && isSelected ) { - this.toggleOverlay( false ); - this.toggleIsEditing( true ); - } - } } - >
- ) } -

- { content && content.length ? - { content } : - ( -

- { placeholder || __( 'Write text…', 'amp' ) } -

- ) } -

-
- + isSelected={ isSelected } + hasOverlay={ hasOverlay } + toggleIsEditing={ this.toggleIsEditing } + toggleOverlay={ this.toggleOverlay } + text={ content } + textStyle={ textStyle } + textWrapperClass={ classnames( className + ' block-editor-rich-text__editable editor-rich-text__editable', textClassNames ) } + placeholder={ placeholder || __( 'Write text…', 'amp' ) } + /> }
From 876522f132ea282fd5123eb38975dd0702dc3d45 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:10:42 +0300 Subject: [PATCH 34/42] Add missing file. --- .../components/draggable-text.js | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 assets/src/stories-editor/components/draggable-text.js diff --git a/assets/src/stories-editor/components/draggable-text.js b/assets/src/stories-editor/components/draggable-text.js new file mode 100644 index 00000000000..c3a33bf348e --- /dev/null +++ b/assets/src/stories-editor/components/draggable-text.js @@ -0,0 +1,111 @@ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { RawHTML } from '@wordpress/element'; +import { ENTER } from '@wordpress/keycodes'; + +/** + * Internal dependencies + */ +import { StoryBlockMover } from './index'; + +/** + * Draggable Text: a non-editable text content which can be dragged. + * Switches to edit mode when clicked twice. + * + * @param {Object} props Component props. + * + * @return {WPElement} Rendered element. + */ +const DraggableText = ( props ) => { + const { + blockClass, + blockElementId, + clientId, + hasOverlay, + isDraggable, + isSelected, + name, + toggleIsEditing, + toggleOverlay, + text, + textStyle, + textWrapperClass, + placeholder, + } = props; + return ( + +
{ + if ( isSelected ) { + toggleIsEditing( true ); + } + } } + onMouseDown={ ( event ) => { + // Prevent text selection on double click. + if ( 1 < event.detail ) { + event.preventDefault(); + } + } } + onKeyDown={ ( event ) => { + event.stopPropagation(); + if ( ENTER === event.keyCode && isSelected ) { + toggleOverlay( false ); + toggleIsEditing( true ); + } + } } + > + { hasOverlay && (
{ + toggleOverlay( false ); + e.stopPropagation(); + } } + onKeyDown={ ( event ) => { + event.stopPropagation(); + if ( ENTER === event.keyCode && isSelected ) { + toggleOverlay( false ); + toggleIsEditing( true ); + } + } } + >
+ ) } +
+ { text && text.length ? + { text } : ( + + { placeholder } + + ) } +
+
+ + ); +}; + +DraggableText.propTypes = { + clientId: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, +}; + +export default DraggableText; From 08366888915dda39c7946b2984ae90b729b0d067 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:14:07 +0300 Subject: [PATCH 35/42] Fix linting issues. --- .../src/stories-editor/blocks/amp-story-text/edit.js | 7 +++---- .../src/stories-editor/components/draggable-text.js | 11 +++++++++++ 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 7c529485e37..06dc4c49b07 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -9,14 +9,13 @@ import { isEqual } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, RawHTML } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { RichText, BlockControls, AlignmentToolbar, } from '@wordpress/block-editor'; import { select } from '@wordpress/data'; -import { ENTER } from '@wordpress/keycodes'; /** * Internal dependencies @@ -24,7 +23,7 @@ import { ENTER } from '@wordpress/keycodes'; import { maybeUpdateFontSize, maybeUpdateBlockDimensions } from '../../helpers'; import { getBackgroundColorWithOpacity } from '../../../common/helpers'; import './edit.css'; -import {DraggableText, StoryBlockMover} from '../../components'; +import { DraggableText } from '../../components'; class TextBlockEdit extends Component { constructor( ...args ) { @@ -231,7 +230,7 @@ class TextBlockEdit extends Component { } { ! isEditing && { DraggableText.propTypes = { clientId: PropTypes.string.isRequired, name: PropTypes.string.isRequired, + blockClass: PropTypes.string, + blockElementId: PropTypes.string.isRequired, + hasOverlay: PropTypes.bool.isRequired, + isDraggable: PropTypes.bool.isRequired, + isSelected: PropTypes.bool.isRequired, + toggleIsEditing: PropTypes.func.isRequired, + toggleOverlay: PropTypes.func.isRequired, + text: PropTypes.string.isRequired, + textStyle: PropTypes.string.isRequired, + textWrapperClass: PropTypes.string.isRequired, + placeholder: PropTypes.string.isRequired, }; export default DraggableText; From 840bdc3acfafdab5ab77ee8445ed227192f3f421 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:27:31 +0300 Subject: [PATCH 36/42] Update tests. --- assets/src/stories-editor/blocks/amp-story-cta/edit.js | 1 + tests/e2e/specs/stories-editor/story-templates.test.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.js b/assets/src/stories-editor/blocks/amp-story-cta/edit.js index c214e381f5e..38cfe97e969 100644 --- a/assets/src/stories-editor/blocks/amp-story-cta/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-cta/edit.js @@ -148,6 +148,7 @@ class CallToActionEdit extends Component { blockElementId={ `amp-story-cta-button-${ clientId }` } clientId={ clientId } name={ name } + isDraggable={ true } isEditing={ isEditing } isSelected={ isSelected } hasOverlay={ hasOverlay } diff --git a/tests/e2e/specs/stories-editor/story-templates.test.js b/tests/e2e/specs/stories-editor/story-templates.test.js index f8126f22d6f..ae8adfe4a2e 100644 --- a/tests/e2e/specs/stories-editor/story-templates.test.js +++ b/tests/e2e/specs/stories-editor/story-templates.test.js @@ -125,7 +125,7 @@ describe( 'Story Templates', () => { // Fandom CTA. expect( templateContents[ 6 ] ).toContain( 'Start Quiz' ); // Fandom Fact. - expect( templateContents[ 7 ] ).toContain( 'Robb Start made Jon his heir
(in books)' ); + expect( templateContents[ 7 ] ).toContain( 'Robb Start made Jon his heir
(in books)' ); // Fandom Fact Text. expect( templateContents[ 8 ] ).toContain( 'One of the biggest things missing from the show is the fact that before his death, Robb Start legitimizes Jon Snow as a Stark and makes him his heir.' ); // Fandom Intro From 76dc27da51c5785e9412d4dbfeaf02edb1553f71 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:36:39 +0300 Subject: [PATCH 37/42] Add additional selector wait for ensuring it being available. --- tests/e2e/specs/stories-editor/story-templates.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/e2e/specs/stories-editor/story-templates.test.js b/tests/e2e/specs/stories-editor/story-templates.test.js index ae8adfe4a2e..64643b28d6f 100644 --- a/tests/e2e/specs/stories-editor/story-templates.test.js +++ b/tests/e2e/specs/stories-editor/story-templates.test.js @@ -71,6 +71,9 @@ describe( 'Story Templates', () => { '//*[contains(@class,"block-editor-block-preview")]' ); + // Wait until the templates are loaded and blocks accessible. + await page.waitForSelector( '.block-editor-block-preview .wp-block' ); + // Click on the template including quote and image. await nodes[ 3 ].click(); From f4fe1a0c679384d42927045f819944514581037d Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 13 Aug 2019 23:47:48 +0300 Subject: [PATCH 38/42] Fix editor test. --- tests/e2e/specs/stories-editor/code-editor.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/e2e/specs/stories-editor/code-editor.test.js b/tests/e2e/specs/stories-editor/code-editor.test.js index 7a396d86c54..d648b246fae 100644 --- a/tests/e2e/specs/stories-editor/code-editor.test.js +++ b/tests/e2e/specs/stories-editor/code-editor.test.js @@ -24,6 +24,8 @@ describe( 'Code Editor', () => { await expect( page ).not.toMatchElement( '.block-editor-writing-flow__click-redirect' ); + // Ensure the menu is available before switching mode. + await page.waitForSelector( '.edit-post-more-menu [aria-label="More tools & options"]' ); await switchEditorModeTo( 'Code' ); await page.click( '.edit-post-more-menu [aria-label="More tools & options"]' ); From cb3c68a838cddfe4b1b837ad93c2d8fc7f19f082 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 14 Aug 2019 00:13:40 +0300 Subject: [PATCH 39/42] Move setting input selection to the end to helpers. --- .../blocks/amp-story-cta/edit.js | 13 ++----------- .../blocks/amp-story-text/edit.js | 13 ++----------- assets/src/stories-editor/helpers/index.js | 18 ++++++++++++++++++ 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-cta/edit.js b/assets/src/stories-editor/blocks/amp-story-cta/edit.js index 38cfe97e969..cff8e283165 100644 --- a/assets/src/stories-editor/blocks/amp-story-cta/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-cta/edit.js @@ -23,7 +23,7 @@ import { */ import './edit.css'; import { select } from '@wordpress/data'; -import { getUniqueId } from '../../helpers'; +import { getUniqueId, setInputSelectionToEnd } from '../../helpers'; import { getBackgroundColorWithOpacity } from '../../../common/helpers'; import { DraggableText } from '../../components'; @@ -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' ); } } diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 06dc4c49b07..86a39900f21 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -20,7 +20,7 @@ import { select } from '@wordpress/data'; /** * Internal dependencies */ -import { maybeUpdateFontSize, maybeUpdateBlockDimensions } from '../../helpers'; +import { maybeUpdateFontSize, maybeUpdateBlockDimensions, setInputSelectionToEnd } from '../../helpers'; import { getBackgroundColorWithOpacity } from '../../../common/helpers'; import './edit.css'; import { DraggableText } from '../../components'; @@ -84,16 +84,7 @@ class TextBlockEdit extends Component { // If the state changed to editing, focus on the text. if ( this.state.isEditing && ! prevState.isEditing ) { - const textInput = document.querySelector( '.is-selected .wp-block-amp-amp-story-text' ); - 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 .wp-block-amp-amp-story-text' ); } } diff --git a/assets/src/stories-editor/helpers/index.js b/assets/src/stories-editor/helpers/index.js index be14e1de4e4..b08600e32e8 100644 --- a/assets/src/stories-editor/helpers/index.js +++ b/assets/src/stories-editor/helpers/index.js @@ -1688,3 +1688,21 @@ export const findClosestSnap = memize( ( number, snap, snapGap ) => { return snapGap === 0 || gap < snapGap ? snapArray[ closestGapIndex ] : number; } ); + +/** + * Sets input selection to the end for being able to type to the end of the existing text. + * + * @param {string} inputSelector Text input selector. + */ +export const setInputSelectionToEnd = ( inputSelector ) => { + const textInput = document.querySelector( inputSelector ); + // Create selection, collapse it in the end of the content. + if ( textInput ) { + const range = document.createRange(); + range.selectNodeContents( textInput ); + range.collapse( false ); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange( range ); + } +}; From 7bc681e0c7a799f79cfb434b15053902a2c6008d Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 14 Aug 2019 12:08:23 +0300 Subject: [PATCH 40/42] Ensure selecting the first page before removing the block. --- tests/e2e/specs/stories-editor/cta.test.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/tests/e2e/specs/stories-editor/cta.test.js b/tests/e2e/specs/stories-editor/cta.test.js index f1507aa7ca0..7ee9142f3fc 100644 --- a/tests/e2e/specs/stories-editor/cta.test.js +++ b/tests/e2e/specs/stories-editor/cta.test.js @@ -1,7 +1,13 @@ /** * WordPress dependencies */ -import { visitAdminPage, createNewPost, clickButton } from '@wordpress/e2e-test-utils'; +import { + visitAdminPage, + createNewPost, + clickButton, + selectBlockByClientId, + getAllBlocks, +} from '@wordpress/e2e-test-utils'; /** * Internal dependencies @@ -49,6 +55,12 @@ describe( 'Stories Editor Screen', () => { await insertBlock( 'Call to Action' ); await goToPreviousPage(); + + // Select the default page block. + await selectBlockByClientId( + ( await getAllBlocks() )[ 0 ].clientId + ); + await clickButtonByLabel( 'More options' ); await clickButton( 'Remove Block' ); From 483c72d2f6247c2bd18555970221605e80efe53f Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 14 Aug 2019 14:47:30 +0300 Subject: [PATCH 41/42] Another try to fix tests. --- tests/e2e/specs/stories-editor/cta.test.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/tests/e2e/specs/stories-editor/cta.test.js b/tests/e2e/specs/stories-editor/cta.test.js index 7ee9142f3fc..b85708f4439 100644 --- a/tests/e2e/specs/stories-editor/cta.test.js +++ b/tests/e2e/specs/stories-editor/cta.test.js @@ -5,7 +5,6 @@ import { visitAdminPage, createNewPost, clickButton, - selectBlockByClientId, getAllBlocks, } from '@wordpress/e2e-test-utils'; @@ -51,15 +50,14 @@ describe( 'Stories Editor Screen', () => { it( 'should display validation error when CTA block is on the first Page', async () => { await createNewPost( { postType: 'amp_story' } ); + const firstPageClientId = ( await getAllBlocks() )[ 0 ].clientId; + await insertBlock( 'Page' ); await insertBlock( 'Call to Action' ); await goToPreviousPage(); - // Select the default page block. - await selectBlockByClientId( - ( await getAllBlocks() )[ 0 ].clientId - ); + await page.waitForSelector( `#block-${ firstPageClientId }.amp-page-active` ); await clickButtonByLabel( 'More options' ); await clickButton( 'Remove Block' ); From eb13a6b6d8517c72269adbddde8863b6fbafc6ca Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Fri, 16 Aug 2019 15:53:08 +0200 Subject: [PATCH 42/42] Tiny prop-types fix --- assets/src/stories-editor/components/draggable-text.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/src/stories-editor/components/draggable-text.js b/assets/src/stories-editor/components/draggable-text.js index c9db49af85e..f5a7d9968db 100644 --- a/assets/src/stories-editor/components/draggable-text.js +++ b/assets/src/stories-editor/components/draggable-text.js @@ -114,7 +114,12 @@ DraggableText.propTypes = { toggleIsEditing: PropTypes.func.isRequired, toggleOverlay: PropTypes.func.isRequired, text: PropTypes.string.isRequired, - textStyle: PropTypes.string.isRequired, + textStyle: PropTypes.shape( { + color: PropTypes.string, + fontSize: PropTypes.string, + textAlign: PropTypes.string, + position: PropTypes.string, + } ).isRequired, textWrapperClass: PropTypes.string.isRequired, placeholder: PropTypes.string.isRequired, };