From 5389f39a489aaa79ae4b18b46ff7e8522f998e4d Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 30 Apr 2018 14:29:59 +0200 Subject: [PATCH] Revert "Use nested blocks for quotes (#6054)" This reverts commit 853900d9ff38bc6f6ef0b71c70c30290783e3e3a. --- blocks/inner-blocks/index.js | 4 +- blocks/rich-text/README.md | 2 +- blocks/rich-text/index.js | 42 ++-- core-blocks/heading/index.js | 3 +- core-blocks/list/index.js | 33 ++- core-blocks/paragraph/index.js | 3 +- core-blocks/pullquote/index.js | 91 +++----- .../test/__snapshots__/index.js.snap | 32 ++- core-blocks/quote/index.js | 207 +++++++++++------- .../quote/test/__snapshots__/index.js.snap | 32 ++- .../test/fixtures/core__pullquote.html | 5 +- .../test/fixtures/core__pullquote.json | 32 +-- .../test/fixtures/core__pullquote.parsed.json | 11 +- .../fixtures/core__pullquote.serialized.html | 4 +- .../core__pullquote__multi-paragraph.html | 4 - .../core__pullquote__multi-paragraph.json | 73 +++--- ...re__pullquote__multi-paragraph.parsed.json | 17 +- ...pullquote__multi-paragraph.serialized.html | 7 +- .../test/fixtures/core__quote__style-1.html | 7 +- .../test/fixtures/core__quote__style-1.json | 32 +-- .../fixtures/core__quote__style-1.parsed.json | 11 +- .../core__quote__style-1.serialized.html | 4 +- .../test/fixtures/core__quote__style-2.html | 7 +- .../test/fixtures/core__quote__style-2.json | 32 +-- .../fixtures/core__quote__style-2.parsed.json | 11 +- .../core__quote__style-2.serialized.html | 4 +- editor/components/block-list/block.js | 40 ++-- post-content.js | 14 +- .../__snapshots__/adding-blocks.test.js.snap | 12 +- .../splitting-merging.test.js.snap | 14 -- test/e2e/specs/adding-blocks.test.js | 12 +- test/e2e/specs/multi-block-selection.test.js | 6 +- test/e2e/specs/splitting-merging.test.js | 38 ++-- test/e2e/specs/templates.test.js | 11 +- test/e2e/support/utils.js | 13 -- 35 files changed, 444 insertions(+), 426 deletions(-) diff --git a/blocks/inner-blocks/index.js b/blocks/inner-blocks/index.js index 4d25e0bd4b28fe..37ae97e13c71a7 100644 --- a/blocks/inner-blocks/index.js +++ b/blocks/inner-blocks/index.js @@ -4,13 +4,13 @@ import { withContext } from '@wordpress/components'; function InnerBlocks( { BlockList, layouts } ) { - return BlockList ? : null; + return ; } InnerBlocks = withContext( 'BlockList' )()( InnerBlocks ); InnerBlocks.Content = ( { BlockContent } ) => { - return BlockContent ? : null; + return ; }; InnerBlocks.Content = withContext( 'BlockContent' )()( InnerBlocks.Content ); diff --git a/blocks/rich-text/README.md b/blocks/rich-text/README.md index f5a89c2d209980..88668093a53ec8 100644 --- a/blocks/rich-text/README.md +++ b/blocks/rich-text/README.md @@ -39,7 +39,7 @@ a traditional `input` field, usually when the user exits the field. ### `onSplit( before: Array|String, after: Array|String, ...blocks: Object ): Function` -*Optional.* Called when the content can be split with `after` as the split off value. There might be blocks present, which should be inserted before the `after` value. Note: the `before` value should no longer be used. +*Optional.* Called when the content can be split with `before` and `after`. There might be blocks present, which should be inserted in between. ### `onReplace( blocks: Array ): Function` diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index c809effa7d7dcc..dc02534a6c6fde 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -38,11 +38,6 @@ import { EVENTS } from './constants'; import { withBlockEditContext } from '../block-edit/context'; import { domToFormat, valueToString, isEmpty } from './format'; -/** - * Browser dependencies - */ -const { console } = window; - const { BACKSPACE, DELETE, ENTER } = keycodes; /** @@ -126,7 +121,6 @@ export class RichText extends Component { }; this.isEmpty = ! value || ! value.length; - this.savedContent = value; } /** @@ -278,7 +272,7 @@ export class RichText extends Component { } ); // Allows us to ask for this information when we get a report. - console.log( 'Received item:\n\n', blob ); + window.console.log( 'Received item:\n\n', blob ); if ( isEmptyEditor && this.props.onReplace ) { // Necessary to allow the paste bin to be removed without errors. @@ -309,8 +303,8 @@ export class RichText extends Component { onPastePreProcess( event ) { const HTML = this.isPlainTextPaste ? '' : event.content; // Allows us to ask for this information when we get a report. - console.log( 'Received HTML:\n\n', HTML ); - console.log( 'Received plain text:\n\n', this.pastedPlainText ); + window.console.log( 'Received HTML:\n\n', HTML ); + window.console.log( 'Received plain text:\n\n', this.pastedPlainText ); // There is a selection, check if a link is pasted. if ( ! this.editor.selection.isCollapsed() ) { @@ -325,7 +319,7 @@ export class RichText extends Component { } ); // Allows us to ask for this information when we get a report. - console.log( 'Created link:\n\n', pastedText ); + window.console.log( 'Created link:\n\n', pastedText ); event.preventDefault(); @@ -493,10 +487,6 @@ export class RichText extends Component { if ( event.shiftKey || ! this.props.onSplit ) { this.editor.execCommand( 'InsertLineBreak', false, event ); } else { - // Splitting the content might destroy the editor, so it's - // important that we stop other handlers (e.g. ones - // registered by TinyMCE) from also handling this event. - event.stopImmediatePropagation(); this.splitContent(); } } @@ -629,8 +619,10 @@ export class RichText extends Component { return memo; }, [] ); - const { format } = this.props; + // Splitting into two blocks + this.setContent( this.props.value ); + const { format } = this.props; this.restoreContentAndSplit( domToFormat( before, format, this.editor ), domToFormat( after, format, this.editor ) @@ -709,16 +701,15 @@ export class RichText extends Component { !! this.editor && this.props.tagName === prevProps.tagName && this.props.value !== prevProps.value && - this.props.value !== this.savedContent + this.props.value !== this.savedContent && + + // Comparing using isEqual is necessary especially to avoid unnecessary updateContent calls + // This fixes issues in multi richText blocks like quotes when moving the focus between + // the different editables. + ! isEqual( this.props.value, prevProps.value ) && + ! isEqual( this.props.value, this.savedContent ) ) { this.updateContent(); - - if ( - 'development' === process.env.NODE_ENV && - isEqual( this.props.value, prevProps.value ) - ) { - console.warn( 'The current and previous value props are not strictly equal but the contents are the same. Please ensure the value prop reference does not change.' ); - } } } @@ -775,15 +766,14 @@ export class RichText extends Component { /** * Calling onSplit means we need to abort the change done by TinyMCE. - * we need to call setContent to restore the initial content before calling onSplit. + * we need to call updateContent to restore the initial content before calling onSplit. * * @param {Array} before content before the split position * @param {Array} after content after the split position * @param {?Array} blocks blocks to insert at the split position */ restoreContentAndSplit( before, after, blocks = [] ) { - this.setContent( before ); - this.onChange(); + this.updateContent(); this.props.onSplit( before, after, ...blocks ); } diff --git a/core-blocks/heading/index.js b/core-blocks/heading/index.js index 2e9dc97e43099e..a0ff87c0d194db 100644 --- a/core-blocks/heading/index.js +++ b/core-blocks/heading/index.js @@ -150,7 +150,8 @@ export const settings = { onMerge={ mergeBlocks } onSplit={ insertBlocksAfter ? - ( unused, after, ...blocks ) => { + ( before, after, ...blocks ) => { + setAttributes( { content: before } ); insertBlocksAfter( [ ...blocks, createBlock( 'core/paragraph', { content: after } ), diff --git a/core-blocks/list/index.js b/core-blocks/list/index.js index 59a4d3a8115576..878697fbcae528 100644 --- a/core-blocks/list/index.js +++ b/core-blocks/list/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { find, compact, get, isEmpty } from 'lodash'; +import { find, compact, get, initial, last, isEmpty } from 'lodash'; /** * WordPress dependencies @@ -63,6 +63,21 @@ export const settings = { } ); }, }, + { + type: 'block', + blocks: [ 'core/quote' ], + transform: ( { value, citation } ) => { + const items = value.map( ( p ) => get( p, 'children.props.children' ) ); + if ( ! isEmpty( citation ) ) { + items.push( citation ); + } + const hasItems = ! items.every( isEmpty ); + return createBlock( 'core/list', { + nodeName: 'UL', + values: hasItems ? items.map( ( content, index ) =>
  • { content }
    • ) : [], + } ); + }, + }, { type: 'raw', isMatch: ( node ) => node.nodeName === 'OL' || node.nodeName === 'UL', @@ -98,6 +113,18 @@ export const settings = { content: [ content ], } ) ), }, + { + type: 'block', + blocks: [ 'core/quote' ], + transform: ( { values } ) => { + return createBlock( 'core/quote', { + value: compact( ( values.length === 1 ? values : initial( values ) ) + .map( ( value ) => get( value, 'props.children', null ) ) ) + .map( ( children ) => ( { children:

    { children }

    } ) ), + citation: ( values.length === 1 ? undefined : [ get( last( values ), 'props.children' ) ] ), + } ); + }, + }, ], }, @@ -205,6 +232,7 @@ export const settings = { const { attributes, insertBlocksAfter, + setAttributes, mergeBlocks, onReplace, className, @@ -252,7 +280,7 @@ export const settings = { onMerge={ mergeBlocks } onSplit={ insertBlocksAfter ? - ( unused, after, ...blocks ) => { + ( before, after, ...blocks ) => { if ( ! blocks.length ) { blocks.push( createBlock( 'core/paragraph' ) ); } @@ -264,6 +292,7 @@ export const settings = { } ) ); } + setAttributes( { values: before } ); insertBlocksAfter( blocks ); } : undefined diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js index aba6e1d3cbcd31..2d5679b64e3d5b 100644 --- a/core-blocks/paragraph/index.js +++ b/core-blocks/paragraph/index.js @@ -267,7 +267,8 @@ class ParagraphBlock extends Component { } ); } } onSplit={ insertBlocksAfter ? - ( unused, after, ...blocks ) => { + ( before, after, ...blocks ) => { + setAttributes( { content: before } ); insertBlocksAfter( [ ...blocks, createBlock( 'core/paragraph', { content: after } ), diff --git a/core-blocks/pullquote/index.js b/core-blocks/pullquote/index.js index 47d84e99fd089f..c348bcc39c61fe 100644 --- a/core-blocks/pullquote/index.js +++ b/core-blocks/pullquote/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { castArray } from 'lodash'; +import { map } from 'lodash'; /** * WordPress dependencies @@ -10,11 +10,9 @@ import { __ } from '@wordpress/i18n'; import { withState } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { - createBlock, BlockControls, BlockAlignmentToolbar, RichText, - InnerBlocks, } from '@wordpress/blocks'; /** @@ -23,7 +21,21 @@ import { import './editor.scss'; import './style.scss'; +const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) ); +const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( { + children: subValue, +} ) ); const blockAttributes = { + value: { + type: 'array', + source: 'query', + selector: 'blockquote > p', + query: { + children: { + source: 'node', + }, + }, + }, citation: { type: 'array', source: 'children', @@ -59,7 +71,7 @@ export const settings = { edit: withState( { editable: 'content', } )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => { - const { citation, align } = attributes; + const { value, citation, align } = attributes; const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } ); @@ -72,7 +84,20 @@ export const settings = { />
    - + setAttributes( { + value: fromRichTextValue( nextValue ), + } ) + } + /* translators: the text of the quotation */ + placeholder={ __( 'Write quote…' ) } + wrapperClassName="blocks-pullquote__content" + isSelected={ isSelected && editable === 'content' } + onFocus={ onSetActiveEditable( 'content' ) } + /> { ( citation || isSelected ) && ( - + { citation && citation.length > 0 && }
    ); @@ -107,54 +132,6 @@ export const settings = { deprecated: [ { attributes: { ...blockAttributes, - value: { - type: 'array', - source: 'query', - selector: 'blockquote > p', - query: { - children: { - source: 'node', - }, - }, - }, - }, - - migrate( { value = [], ...attributes } ) { - return [ - attributes, - value.map( ( { children: paragraph } ) => - createBlock( 'core/paragraph', { - content: castArray( paragraph.props.children ), - } ) - ), - ]; - }, - - save( { attributes } ) { - const { value, citation, align } = attributes; - - return ( -
    - { value && value.map( ( paragraph, i ) => -

    { paragraph.children && paragraph.children.props.children }

    - ) } - { citation && citation.length > 0 && } -
    - ); - }, - }, { - attributes: { - ...blockAttributes, - value: { - type: 'array', - source: 'query', - selector: 'blockquote > p', - query: { - children: { - source: 'node', - }, - }, - }, citation: { type: 'array', source: 'children', @@ -167,9 +144,7 @@ export const settings = { return (
    - { value && value.map( ( paragraph, i ) => -

    { paragraph.children && paragraph.children.props.children }

    - ) } + { citation && citation.length > 0 && }
    ); diff --git a/core-blocks/pullquote/test/__snapshots__/index.js.snap b/core-blocks/pullquote/test/__snapshots__/index.js.snap index cb551f1f951010..f8bdb27de8f502 100644 --- a/core-blocks/pullquote/test/__snapshots__/index.js.snap +++ b/core-blocks/pullquote/test/__snapshots__/index.js.snap @@ -3,5 +3,35 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
    +> +
    +
    +
    +
    + +
    +
    +
    +
    `; diff --git a/core-blocks/quote/index.js b/core-blocks/quote/index.js index 2e0f57984079d7..6799d516526fae 100644 --- a/core-blocks/quote/index.js +++ b/core-blocks/quote/index.js @@ -1,8 +1,8 @@ /** * External dependencies */ +import { castArray, get, isString } from 'lodash'; import classnames from 'classnames'; -import { castArray } from 'lodash'; /** * WordPress dependencies @@ -12,11 +12,9 @@ import { Toolbar, withState } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { createBlock, - rawHandler, BlockControls, AlignmentToolbar, RichText, - InnerBlocks, } from '@wordpress/blocks'; /** @@ -25,7 +23,23 @@ import { import './style.scss'; import './editor.scss'; +const toRichTextValue = ( value ) => value.map( ( ( subValue ) => subValue.children ) ); +const fromRichTextValue = ( value ) => value.map( ( subValue ) => ( { + children: subValue, +} ) ); + const blockAttributes = { + value: { + type: 'array', + source: 'query', + selector: 'blockquote > p', + query: { + children: { + source: 'node', + }, + }, + default: [], + }, citation: { type: 'array', source: 'children', @@ -52,28 +66,100 @@ export const settings = { transforms: { from: [ - ...[ 'core/paragraph', 'core/heading' ].map( ( fromName ) => ( { + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: ( { content } ) => { + return createBlock( 'core/quote', { + value: [ + { children:

    { content }

    }, + ], + } ); + }, + }, + { type: 'block', - blocks: [ fromName ], - transform: ( attributes ) => createBlock( name, {}, [ - createBlock( fromName, attributes ), - ] ), - } ) ), + blocks: [ 'core/heading' ], + transform: ( { content } ) => { + return createBlock( 'core/quote', { + value: [ + { children:

    { content }

    }, + ], + } ); + }, + }, { type: 'pattern', regExp: /^>\s/, - transform: ( attributes ) => createBlock( name, {}, [ - createBlock( 'core/paragraph', attributes ), - ] ), + transform: ( { content } ) => { + return createBlock( 'core/quote', { + value: [ + { children:

    { content }

    }, + ], + } ); + }, }, { type: 'raw', isMatch: ( node ) => node.nodeName === 'BLOCKQUOTE', - transform( node ) { - return createBlock( name, {}, rawHandler( { - HTML: node.innerHTML, - mode: 'BLOCKS', - } ) ); + }, + ], + to: [ + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: ( { value, citation } ) => { + // transforming an empty quote + if ( ( ! value || ! value.length ) && ! citation ) { + return createBlock( 'core/paragraph' ); + } + // transforming a quote with content + return ( value || [] ).map( ( item ) => createBlock( 'core/paragraph', { + content: [ get( item, 'children.props.children', '' ) ], + } ) ).concat( citation ? createBlock( 'core/paragraph', { + content: citation, + } ) : [] ); + }, + }, + { + type: 'block', + blocks: [ 'core/heading' ], + transform: ( { value, citation, ...attrs } ) => { + // if no text content exist just transform the quote into an heading block + // using citation as the content, it may be empty creating an empty heading block. + if ( ( ! value || ! value.length ) ) { + return createBlock( 'core/heading', { + content: citation, + } ); + } + + const firstValue = get( value, [ 0, 'children' ] ); + const headingContent = castArray( isString( firstValue ) ? + firstValue : + get( firstValue, [ 'props', 'children' ], '' ) + ); + + // if the quote content just contains a paragraph and no citation exist + // convert the quote content into and heading block. + if ( ! citation && value.length === 1 ) { + return createBlock( 'core/heading', { + content: headingContent, + } ); + } + + // In the normal case convert the first paragraph of quote into an heading + // and create a new quote block equal tl what we had excluding the first paragraph + const heading = createBlock( 'core/heading', { + content: headingContent, + } ); + + const quote = createBlock( 'core/quote', { + ...attrs, + citation, + value: value.slice( 1 ), + } ); + + return [ heading, quote ]; }, }, ], @@ -81,8 +167,8 @@ export const settings = { edit: withState( { editable: 'content', - } )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => { - const { align, citation, style } = attributes; + } )( ( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className, editable, setState } ) => { + const { align, value, citation, style } = attributes; const containerClassname = classnames( className, style === 2 ? 'is-large' : '' ); const onSetActiveEditable = ( newEditable ) => () => { setState( { editable: newEditable } ); @@ -110,7 +196,26 @@ export const settings = { className={ containerClassname } style={ { textAlign: align } } > - + setAttributes( { + value: fromRichTextValue( nextValue ), + } ) + } + onMerge={ mergeBlocks } + onRemove={ ( forward ) => { + const hasEmptyCitation = ! citation || citation.length === 0; + if ( ! forward && hasEmptyCitation ) { + onReplace( [] ); + } + } } + /* translators: the text of the quotation */ + placeholder={ __( 'Write quote…' ) } + isSelected={ isSelected && editable === 'content' } + onFocus={ onSetActiveEditable( 'content' ) } + /> { ( ( citation && citation.length > 0 ) || isSelected ) && ( - + { citation && citation.length > 0 && } ); @@ -149,60 +254,6 @@ export const settings = { { attributes: { ...blockAttributes, - value: { - type: 'array', - source: 'query', - selector: 'blockquote > p', - query: { - children: { - source: 'node', - }, - }, - default: [], - }, - }, - - migrate( { value = [], ...attributes } ) { - return [ - attributes, - value.map( ( { children: paragraph } ) => - createBlock( 'core/paragraph', { - content: castArray( paragraph.props.children ), - } ) - ), - ]; - }, - - save( { attributes } ) { - const { align, value, citation, style } = attributes; - - return ( -
    - { value.map( ( paragraph, i ) => ( -

    { paragraph.children && paragraph.children.props.children }

    - ) ) } - { citation && citation.length > 0 && } -
    - ); - }, - }, - { - attributes: { - ...blockAttributes, - value: { - type: 'array', - source: 'query', - selector: 'blockquote > p', - query: { - children: { - source: 'node', - }, - }, - default: [], - }, citation: { type: 'array', source: 'children', @@ -218,9 +269,7 @@ export const settings = { className={ `blocks-quote-style-${ style }` } style={ { textAlign: align ? align : null } } > - { value.map( ( paragraph, i ) => ( -

    { paragraph.children && paragraph.children.props.children }

    - ) ) } + { citation && citation.length > 0 && } ); diff --git a/core-blocks/quote/test/__snapshots__/index.js.snap b/core-blocks/quote/test/__snapshots__/index.js.snap index dd11350eb8d886..010e122e054ab7 100644 --- a/core-blocks/quote/test/__snapshots__/index.js.snap +++ b/core-blocks/quote/test/__snapshots__/index.js.snap @@ -3,5 +3,35 @@ exports[`core/quote block edit matches snapshot 1`] = `
    +> +
    +
    +
    +
    + +
    +
    +
    +
    `; diff --git a/core-blocks/test/fixtures/core__pullquote.html b/core-blocks/test/fixtures/core__pullquote.html index 87941125770945..06d1ea9ab61144 100644 --- a/core-blocks/test/fixtures/core__pullquote.html +++ b/core-blocks/test/fixtures/core__pullquote.html @@ -1,8 +1,5 @@
    - -

    Testing pullquote block...

    - - ...with a caption +

    Testing pullquote block...

    ...with a caption
    diff --git a/core-blocks/test/fixtures/core__pullquote.json b/core-blocks/test/fixtures/core__pullquote.json index 0b477b21e70159..e044ae447f65f8 100644 --- a/core-blocks/test/fixtures/core__pullquote.json +++ b/core-blocks/test/fixtures/core__pullquote.json @@ -4,26 +4,26 @@ "name": "core/pullquote", "isValid": true, "attributes": { + "value": [ + { + "children": { + "type": "p", + "key": null, + "ref": null, + "props": { + "children": "Testing pullquote block..." + }, + "_owner": null, + "_store": {} + } + } + ], "citation": [ "...with a caption" ], "align": "none" }, - "innerBlocks": [ - { - "name": "core/paragraph", - "uid": "_uid_0", - "isValid": true, - "attributes": { - "content": [ - "Testing pullquote block..." - ], - "dropCap": false - }, - "innerBlocks": [], - "originalContent": "

    Testing pullquote block...

    " - } - ], - "originalContent": "
    \n\t\n\t...with a caption\n
    " + "innerBlocks": [], + "originalContent": "
    \n

    Testing pullquote block...

    ...with a caption\n
    " } ] diff --git a/core-blocks/test/fixtures/core__pullquote.parsed.json b/core-blocks/test/fixtures/core__pullquote.parsed.json index 248585392f75d6..4a96da0d5574ba 100644 --- a/core-blocks/test/fixtures/core__pullquote.parsed.json +++ b/core-blocks/test/fixtures/core__pullquote.parsed.json @@ -2,15 +2,8 @@ { "blockName": "core/pullquote", "attrs": null, - "innerBlocks": [ - { - "blockName": "core/paragraph", - "attrs": null, - "innerBlocks": [], - "innerHTML": "\n\t

    Testing pullquote block...

    \n\t" - } - ], - "innerHTML": "\n
    \n\t\n\t...with a caption\n
    \n" + "innerBlocks": [], + "innerHTML": "\n
    \n

    Testing pullquote block...

    ...with a caption\n
    \n" }, { "attrs": {}, diff --git a/core-blocks/test/fixtures/core__pullquote.serialized.html b/core-blocks/test/fixtures/core__pullquote.serialized.html index a8617d21d83bde..02aa277f756539 100644 --- a/core-blocks/test/fixtures/core__pullquote.serialized.html +++ b/core-blocks/test/fixtures/core__pullquote.serialized.html @@ -1,6 +1,4 @@
    - -

    Testing pullquote block...

    - ...with a caption
    +

    Testing pullquote block...

    ...with a caption diff --git a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.html b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.html index 4c6800b8f1e50c..113d829d01329c 100644 --- a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.html +++ b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.html @@ -1,11 +1,7 @@
    -

    Paragraph one

    - -

    Paragraph two

    - by whomever
    diff --git a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json index ac24bc35d1500a..c2a6c0d770de73 100644 --- a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json +++ b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json @@ -4,43 +4,50 @@ "name": "core/pullquote", "isValid": true, "attributes": { + "value": [ + { + "children": { + "type": "p", + "key": null, + "ref": null, + "props": { + "children": [ + "Paragraph ", + { + "type": "strong", + "key": "_domReact71", + "ref": null, + "props": { + "children": "one" + }, + "_owner": null, + "_store": {} + } + ] + }, + "_owner": null, + "_store": {} + } + }, + { + "children": { + "type": "p", + "key": null, + "ref": null, + "props": { + "children": "Paragraph two" + }, + "_owner": null, + "_store": {} + } + } + ], "citation": [ "by whomever" ], "align": "none" }, - "innerBlocks": [ - { - "uid": "_uid_0", - "name": "core/paragraph", - "isValid": true, - "attributes": { - "content": [ - "Paragraph ", - { - "type": "strong", - "children": "one" - } - ], - "dropCap": false - }, - "innerBlocks": [], - "originalContent": "

    Paragraph one

    " - }, - { - "uid": "_uid_1", - "name": "core/paragraph", - "isValid": true, - "attributes": { - "content": [ - "Paragraph two" - ], - "dropCap": false - }, - "innerBlocks": [], - "originalContent": "

    Paragraph two

    " - } - ], - "originalContent": "
    \n\t\n \n by whomever\n
    " + "innerBlocks": [], + "originalContent": "
    \n

    Paragraph one

    \n

    Paragraph two

    \n by whomever\n
    " } ] diff --git a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json index 85048516b27971..4821344abd80aa 100644 --- a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json +++ b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json @@ -2,21 +2,8 @@ { "blockName": "core/pullquote", "attrs": null, - "innerBlocks": [ - { - "blockName": "core/paragraph", - "attrs": null, - "innerBlocks": [], - "innerHTML": "\n

    Paragraph one

    \n " - }, - { - "blockName": "core/paragraph", - "attrs": null, - "innerBlocks": [], - "innerHTML": "\n

    Paragraph two

    \n " - } - ], - "innerHTML": "\n
    \n\t\n \n by whomever\n
    \n" + "innerBlocks": [], + "innerHTML": "\n
    \n

    Paragraph one

    \n

    Paragraph two

    \n by whomever\n
    \n" }, { "attrs": {}, diff --git a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html index c57ac475a512b8..58d40223987735 100644 --- a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html +++ b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html @@ -1,10 +1,5 @@
    -

    Paragraph one

    - - - -

    Paragraph two

    - by whomever
    +

    Paragraph two

    by whomever diff --git a/core-blocks/test/fixtures/core__quote__style-1.html b/core-blocks/test/fixtures/core__quote__style-1.html index 2517aea08d4196..50f330921b5a34 100644 --- a/core-blocks/test/fixtures/core__quote__style-1.html +++ b/core-blocks/test/fixtures/core__quote__style-1.html @@ -1,8 +1,3 @@ -
    - -

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    - - Matt Mullenweg, 2017 -
    +

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    Matt Mullenweg, 2017
    diff --git a/core-blocks/test/fixtures/core__quote__style-1.json b/core-blocks/test/fixtures/core__quote__style-1.json index 64f98a8efab360..1a1f57668d6bba 100644 --- a/core-blocks/test/fixtures/core__quote__style-1.json +++ b/core-blocks/test/fixtures/core__quote__style-1.json @@ -4,26 +4,26 @@ "name": "core/quote", "isValid": true, "attributes": { + "value": [ + { + "children": { + "type": "p", + "key": null, + "ref": null, + "props": { + "children": "The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery." + }, + "_owner": null, + "_store": {} + } + } + ], "citation": [ "Matt Mullenweg, 2017" ], "style": 1 }, - "innerBlocks": [ - { - "uid": "_uid_0", - "name": "core/paragraph", - "isValid": true, - "attributes": { - "content": [ - "The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery." - ], - "dropCap": false - }, - "innerBlocks": [], - "originalContent": "

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    " - } - ], - "originalContent": "
    \n\t\n\tMatt Mullenweg, 2017\n
    " + "innerBlocks": [], + "originalContent": "

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    Matt Mullenweg, 2017
    " } ] diff --git a/core-blocks/test/fixtures/core__quote__style-1.parsed.json b/core-blocks/test/fixtures/core__quote__style-1.parsed.json index 6feb5ac802d7e9..f09e5b0b9d384d 100644 --- a/core-blocks/test/fixtures/core__quote__style-1.parsed.json +++ b/core-blocks/test/fixtures/core__quote__style-1.parsed.json @@ -4,15 +4,8 @@ "attrs": { "style": "1" }, - "innerBlocks": [ - { - "blockName": "core/paragraph", - "attrs": null, - "innerBlocks": [], - "innerHTML": "\n\t

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    \n\t" - } - ], - "innerHTML": "\n
    \n\t\n\tMatt Mullenweg, 2017\n
    \n" + "innerBlocks": [], + "innerHTML": "\n

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    Matt Mullenweg, 2017
    \n" }, { "attrs": {}, diff --git a/core-blocks/test/fixtures/core__quote__style-1.serialized.html b/core-blocks/test/fixtures/core__quote__style-1.serialized.html index 68fb9ec55b95b3..a56c5859bd335d 100644 --- a/core-blocks/test/fixtures/core__quote__style-1.serialized.html +++ b/core-blocks/test/fixtures/core__quote__style-1.serialized.html @@ -1,6 +1,4 @@
    - -

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    - Matt Mullenweg, 2017
    +

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    Matt Mullenweg, 2017 diff --git a/core-blocks/test/fixtures/core__quote__style-2.html b/core-blocks/test/fixtures/core__quote__style-2.html index e44adca0be651a..544a6062c1d802 100644 --- a/core-blocks/test/fixtures/core__quote__style-2.html +++ b/core-blocks/test/fixtures/core__quote__style-2.html @@ -1,8 +1,3 @@ -
    - -

    There is no greater agony than bearing an untold story inside you.

    - - Maya Angelou -
    +

    There is no greater agony than bearing an untold story inside you.

    Maya Angelou
    diff --git a/core-blocks/test/fixtures/core__quote__style-2.json b/core-blocks/test/fixtures/core__quote__style-2.json index 08dd3bb011ad14..2462f8aa0a8fc4 100644 --- a/core-blocks/test/fixtures/core__quote__style-2.json +++ b/core-blocks/test/fixtures/core__quote__style-2.json @@ -4,26 +4,26 @@ "name": "core/quote", "isValid": true, "attributes": { + "value": [ + { + "children": { + "type": "p", + "key": null, + "ref": null, + "props": { + "children": "There is no greater agony than bearing an untold story inside you." + }, + "_owner": null, + "_store": {} + } + } + ], "citation": [ "Maya Angelou" ], "style": 2 }, - "innerBlocks": [ - { - "uid": "_uid_0", - "name": "core/paragraph", - "isValid": true, - "attributes": { - "content": [ - "There is no greater agony than bearing an untold story inside you." - ], - "dropCap": false - }, - "innerBlocks": [], - "originalContent": "

    There is no greater agony than bearing an untold story inside you.

    " - } - ], - "originalContent": "
    \n\t\n\tMaya Angelou\n
    " + "innerBlocks": [], + "originalContent": "

    There is no greater agony than bearing an untold story inside you.

    Maya Angelou
    " } ] diff --git a/core-blocks/test/fixtures/core__quote__style-2.parsed.json b/core-blocks/test/fixtures/core__quote__style-2.parsed.json index c0e0d840ace732..5af57f9cc0706d 100644 --- a/core-blocks/test/fixtures/core__quote__style-2.parsed.json +++ b/core-blocks/test/fixtures/core__quote__style-2.parsed.json @@ -4,15 +4,8 @@ "attrs": { "style": "2" }, - "innerBlocks": [ - { - "blockName": "core/paragraph", - "attrs": null, - "innerBlocks": [], - "innerHTML": "\n\t

    There is no greater agony than bearing an untold story inside you.

    \n\t" - } - ], - "innerHTML": "\n
    \n\t\n\tMaya Angelou\n
    \n" + "innerBlocks": [], + "innerHTML": "\n

    There is no greater agony than bearing an untold story inside you.

    Maya Angelou
    \n" }, { "attrs": {}, diff --git a/core-blocks/test/fixtures/core__quote__style-2.serialized.html b/core-blocks/test/fixtures/core__quote__style-2.serialized.html index 046b58ec47a9cd..e715726fb9cc68 100644 --- a/core-blocks/test/fixtures/core__quote__style-2.serialized.html +++ b/core-blocks/test/fixtures/core__quote__style-2.serialized.html @@ -1,6 +1,4 @@
    - -

    There is no greater agony than bearing an untold story inside you.

    - Maya Angelou
    +

    There is no greater agony than bearing an untold story inside you.

    Maya Angelou diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index da228e4924991d..83b36821cb12d2 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -25,7 +25,6 @@ import { isSharedBlock, isUnmodifiedDefaultBlock, withEditorSettings, - getDefaultBlockName, } from '@wordpress/blocks'; import { withFilters } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; @@ -66,6 +65,7 @@ export class BlockListBlock extends Component { this.maybeHover = this.maybeHover.bind( this ); this.hideHoverEffects = this.hideHoverEffects.bind( this ); this.mergeBlocks = this.mergeBlocks.bind( this ); + this.insertBlocksAfter = this.insertBlocksAfter.bind( this ); this.onFocus = this.onFocus.bind( this ); this.preventDrag = this.preventDrag.bind( this ); this.onPointerDown = this.onPointerDown.bind( this ); @@ -270,6 +270,10 @@ export class BlockListBlock extends Component { } } + insertBlocksAfter( blocks ) { + this.props.onInsertBlocks( blocks, this.props.order + 1 ); + } + /** * Marks the block as selected when focused and not already selected. This * specifically handles the case where block does not set focus on its own @@ -347,9 +351,9 @@ export class BlockListBlock extends Component { case ENTER: // Insert default block after current block if enter and event // not already handled by descendant. - this.props.onInsertBlocksAfter( [ - createBlock( getDefaultBlockName() ), - ] ); + this.props.onInsertBlocks( [ + createBlock( 'core/paragraph' ), + ], this.props.order + 1 ); event.preventDefault(); break; @@ -551,7 +555,7 @@ export class BlockListBlock extends Component { isSelected={ isSelected } attributes={ block.attributes } setAttributes={ this.setAttributes } - insertBlocksAfter={ isLocked ? undefined : this.props.onInsertBlocksAfter } + insertBlocksAfter={ isLocked ? undefined : this.insertBlocksAfter } onReplace={ isLocked ? undefined : onReplace } mergeBlocks={ isLocked ? undefined : this.mergeBlocks } id={ uid } @@ -616,7 +620,6 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => { isSelectionEnabled, getSelectedBlocksInitialCaretPosition, getBlockSelectionEnd, - getBlockRootUID, } = select( 'core/editor' ); const isSelected = isBlockSelected( uid ); return { @@ -636,8 +639,6 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => { isSelectionEnabled: isSelectionEnabled(), initialPosition: getSelectedBlocksInitialCaretPosition(), isSelected, - rootUIDOfRoot: getBlockRootUID( rootUID ), - orderOfRoot: getBlockIndex( rootUID, getBlockRootUID( rootUID ) ), }; } ); @@ -651,7 +652,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => { replaceBlocks, editPost, toggleSelection, - moveBlockToPosition, } = dispatch( 'core/editor' ); return { @@ -661,24 +661,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => { onSelect( uid = ownProps.uid, initialPosition ) { selectBlock( uid, initialPosition ); }, - onInsertBlocksAfter( blocks ) { - const { block, order, isLast, rootUID, orderOfRoot, rootUIDOfRoot, layout } = ownProps; - - blocks = blocks.map( ( oldBlock ) => cloneBlock( oldBlock, { layout } ) ); - - // If the current block is the last nested empty paragraph block, - // and we're about to insert another empty paragraph block, then - // move the empty paragraph block behind the wrapping block. - // This is a way for the user to escape out of wrapping blocks. - if ( - rootUID && isLast && blocks.length === 1 && - isUnmodifiedDefaultBlock( first( blocks ) ) && - isUnmodifiedDefaultBlock( block ) - ) { - moveBlockToPosition( block.uid, rootUID, rootUIDOfRoot, layout, orderOfRoot + 1 ); - } else { - insertBlocks( blocks, order + 1, rootUID ); - } + onInsertBlocks( blocks, index ) { + const { rootUID, layout } = ownProps; + blocks = blocks.map( ( block ) => cloneBlock( block, { layout } ) ); + insertBlocks( blocks, index, rootUID ); }, onRemove( uid ) { removeBlock( uid ); diff --git a/post-content.js b/post-content.js index fe042e409ed4de..d556c8c74df1f9 100644 --- a/post-content.js +++ b/post-content.js @@ -72,12 +72,7 @@ window._wpGutenbergPost.content = { '', '', - '
    ', - '', - '

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    ', - '', - 'Matt Mullenweg, 2017', - '
    ', + '

    The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

    Matt Mullenweg, 2017
    ', '', '', @@ -140,12 +135,7 @@ window._wpGutenbergPost.content = { '', '', - '
    ', - '', - '

    Code is Poetry

    ', - '', - 'The WordPress community', - '
    ', + '

    Code is Poetry

    The WordPress community
    ', '', '', diff --git a/test/e2e/specs/__snapshots__/adding-blocks.test.js.snap b/test/e2e/specs/__snapshots__/adding-blocks.test.js.snap index c705e9d9ae54b8..adcd4803278805 100644 --- a/test/e2e/specs/__snapshots__/adding-blocks.test.js.snap +++ b/test/e2e/specs/__snapshots__/adding-blocks.test.js.snap @@ -11,13 +11,11 @@ exports[`adding blocks Should insert content using the placeholder and the regul
    -

    Quote block

    - - - - 
    Code block
    -
    -" + + + +
    Code block
    +" `; diff --git a/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap b/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap index e5a7168ef92c16..98d163a480fbd4 100644 --- a/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap +++ b/test/e2e/specs/__snapshots__/splitting-merging.test.js.snap @@ -15,17 +15,3 @@ exports[`splitting and merging blocks Should split and merge paragraph blocks us

    FirstSecond

    " `; - -exports[`splitting and merging blocks should split out of quote block using enter 1`] = ` -" -
    - -

    test

    - -
    - - - -

    -" -`; diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js index 71cfd11ee22044..973063c4613f40 100644 --- a/test/e2e/specs/adding-blocks.test.js +++ b/test/e2e/specs/adding-blocks.test.js @@ -2,7 +2,7 @@ * Internal dependencies */ import '../support/bootstrap'; -import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils'; +import { newPost, newDesktopBrowserPage } from '../support/utils'; describe( 'adding blocks', () => { beforeAll( async () => { @@ -85,6 +85,14 @@ describe( 'adding blocks', () => { await clickAtRightish( inserter ); await page.keyboard.type( 'Second paragraph' ); - expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); + // Switch to Text Mode to check HTML Output + await page.click( '.edit-post-more-menu [aria-label="More"]' ); + const codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ]; + await codeEditorButton.click( 'button' ); + + // Assertions + const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); + + expect( textEditorContent ).toMatchSnapshot(); } ); } ); diff --git a/test/e2e/specs/multi-block-selection.test.js b/test/e2e/specs/multi-block-selection.test.js index 85eba730bed696..09142e94846b08 100644 --- a/test/e2e/specs/multi-block-selection.test.js +++ b/test/e2e/specs/multi-block-selection.test.js @@ -13,7 +13,7 @@ describe( 'Multi-block selection', () => { it( 'Should select/unselect multiple blocks', async () => { const firstBlockSelector = '[data-type="core/paragraph"]'; const secondBlockSelector = '[data-type="core/image"]'; - const thirdBlockSelector = '[data-type="core/list"]'; + const thirdBlockSelector = '[data-type="core/quote"]'; const multiSelectedCssClass = 'is-multi-selected'; // Creating test blocks @@ -24,10 +24,10 @@ describe( 'Multi-block selection', () => { await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Enter' ); await page.click( '.edit-post-header [aria-label="Add block"]' ); - await page.keyboard.type( 'List' ); + await page.keyboard.type( 'Quote' ); await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'List Block' ); + await page.keyboard.type( 'Quote Block' ); const blocks = [ firstBlockSelector, secondBlockSelector, thirdBlockSelector ]; const expectMultiSelected = ( selectors, areMultiSelected ) => { diff --git a/test/e2e/specs/splitting-merging.test.js b/test/e2e/specs/splitting-merging.test.js index e11d5682bddbd5..4e78b0366eba28 100644 --- a/test/e2e/specs/splitting-merging.test.js +++ b/test/e2e/specs/splitting-merging.test.js @@ -2,10 +2,10 @@ * Internal dependencies */ import '../support/bootstrap'; -import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils'; +import { newPost, newDesktopBrowserPage } from '../support/utils'; describe( 'splitting and merging blocks', () => { - beforeEach( async () => { + beforeAll( async () => { await newDesktopBrowserPage(); await newPost(); } ); @@ -24,26 +24,32 @@ describe( 'splitting and merging blocks', () => { } await page.keyboard.press( 'Enter' ); - expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); + //Switch to Code Editor to check HTML output + await page.click( '.edit-post-more-menu [aria-label="More"]' ); + let codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ]; + await codeEditorButton.click( 'button' ); + + //Assert that there are now two paragraph blocks with correct content + let textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); + expect( textEditorContent ).toMatchSnapshot(); + + //Switch to Visual Editor to continue testing + await page.click( '.edit-post-more-menu [aria-label="More"]' ); + const visualEditorButton = ( await page.$x( '//button[contains(text(), \'Visual Editor\')]' ) )[ 0 ]; + await visualEditorButton.click( 'button' ); //Press Backspace to merge paragraph blocks await page.click( '.is-selected' ); await page.keyboard.press( 'Home' ); await page.keyboard.press( 'Backspace' ); - expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); - } ); - - it( 'should split out of quote block using enter', async () => { - //Use regular inserter to add paragraph block and text - await page.click( '.edit-post-header [aria-label="Add block"]' ); - await page.keyboard.type( 'quote' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'test' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.press( 'Enter' ); + //Switch to Code Editor to check HTML output + await page.click( '.edit-post-more-menu [aria-label="More"]' ); + codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ]; + await codeEditorButton.click( 'button' ); - expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); + //Assert that there is now one paragraph with correct content + textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); + expect( textEditorContent ).toMatchSnapshot(); } ); } ); diff --git a/test/e2e/specs/templates.test.js b/test/e2e/specs/templates.test.js index 925e589e0a41e4..15d86445d7f243 100644 --- a/test/e2e/specs/templates.test.js +++ b/test/e2e/specs/templates.test.js @@ -2,7 +2,7 @@ * Internal dependencies */ import '../support/bootstrap'; -import { newPost, newDesktopBrowserPage, getHTMLFromCodeEditor } from '../support/utils'; +import { newPost, newDesktopBrowserPage } from '../support/utils'; import { activatePlugin, deactivatePlugin } from '../support/plugins'; describe( 'Using a CPT with a predefined template', () => { @@ -18,6 +18,13 @@ describe( 'Using a CPT with a predefined template', () => { } ); it( 'Should add a custom post types with a predefined template', async () => { - expect( await getHTMLFromCodeEditor() ).toMatchSnapshot(); + //Switch to Code Editor to check HTML output + await page.click( '.edit-post-more-menu [aria-label="More"]' ); + const codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ]; + await codeEditorButton.click( 'button' ); + + // Assert that the post already contains the template defined blocks + const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); + expect( textEditorContent ).toMatchSnapshot(); } ); } ); diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js index 7dce3539143609..ae4050789f64eb 100644 --- a/test/e2e/support/utils.js +++ b/test/e2e/support/utils.js @@ -58,16 +58,3 @@ export async function newDesktopBrowserPage() { global.page = await browser.newPage(); await page.setViewport( { width: 1000, height: 700 } ); } - -export async function switchToEditor( mode ) { - await page.click( '.edit-post-more-menu [aria-label="More"]' ); - const [ button ] = await page.$x( `//button[contains(text(), \'${ mode } Editor\')]` ); - await button.click( 'button' ); -} - -export async function getHTMLFromCodeEditor() { - await switchToEditor( 'Code' ); - const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value ); - await switchToEditor( 'Visual' ); - return textEditorContent; -}