From 41f9ba8e47d9a825e89cea8730b0408de7231d4f Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 26 Feb 2018 20:01:13 +0700 Subject: [PATCH 1/2] Simplify quote values --- blocks/api/parser.js | 8 +++- blocks/library/pullquote/index.js | 22 ++-------- blocks/library/quote/index.js | 30 ++++--------- blocks/rich-text/index.js | 9 +--- blocks/test/fixtures/core__pullquote.json | 12 +----- .../core__pullquote__multi-paragraph.json | 42 +++++-------------- .../test/fixtures/core__quote__style-1.json | 12 +----- .../test/fixtures/core__quote__style-2.json | 12 +----- 8 files changed, 36 insertions(+), 111 deletions(-) diff --git a/blocks/api/parser.js b/blocks/api/parser.js index d2c58bab6757b..a396ce544d382 100644 --- a/blocks/api/parser.js +++ b/blocks/api/parser.js @@ -79,9 +79,13 @@ export function matcherFromSource( sourceConfig ) { return children( sourceConfig.selector ); case 'node': return node( sourceConfig.selector ); - case 'query': - const subMatchers = mapValues( sourceConfig.query, matcherFromSource ); + case 'query': { + const subMatchers = sourceConfig.query ? + mapValues( sourceConfig.query, matcherFromSource ) : + ( element ) => node()( element ); + return query( sourceConfig.selector, subMatchers ); + } default: // eslint-disable-next-line no-console console.error( `Unknown source type "${ sourceConfig.source }"` ); diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js index 8116d44d63ded..9d28020ef0f54 100644 --- a/blocks/library/pullquote/index.js +++ b/blocks/library/pullquote/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -18,20 +13,11 @@ import RichText from '../../rich-text'; import BlockControls from '../../block-controls'; import BlockAlignmentToolbar from '../../block-alignment-toolbar'; -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', @@ -84,10 +70,10 @@ export const settings = {
setAttributes( { - value: fromRichTextValue( nextValue ), + value: nextValue, } ) } placeholder={ __( 'Write quote…' ) } @@ -118,9 +104,7 @@ export const settings = { return (
- { value && value.map( ( paragraph, i ) => -

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

- ) } + { [ value ] /* Prevent keys warning... */ } { citation && citation.length > 0 && ( { citation } ) } diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 5487416b90824..6d2aa79937c36 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { castArray, get, isString } from 'lodash'; +import { castArray, get, isString, first } from 'lodash'; import classnames from 'classnames'; /** @@ -20,21 +20,11 @@ import AlignmentToolbar from '../../alignment-toolbar'; import BlockControls from '../../block-controls'; import RichText from '../../rich-text'; -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: { @@ -69,7 +59,7 @@ export const settings = { transform: ( { content } ) => { return createBlock( 'core/quote', { value: [ - { children:

{ content }

}, +

{ content }

, ], } ); }, @@ -80,7 +70,7 @@ export const settings = { transform: ( { content } ) => { return createBlock( 'core/quote', { value: [ - { children:

{ content }

}, +

{ content }

, ], } ); }, @@ -91,7 +81,7 @@ export const settings = { transform: ( { content } ) => { return createBlock( 'core/quote', { value: [ - { children:

{ content }

}, +

{ content }

, ], } ); }, @@ -112,7 +102,7 @@ export const settings = { } // transforming a quote with content return ( value || [] ).map( item => createBlock( 'core/paragraph', { - content: [ get( item, 'children.props.children', '' ) ], + content: [ get( item, 'props.children', '' ) ], } ) ).concat( citation ? createBlock( 'core/paragraph', { content: citation, } ) : [] ); @@ -130,7 +120,7 @@ export const settings = { } ); } - const firstValue = get( value, [ 0, 'children' ] ); + const firstValue = first( value ); const headingContent = castArray( isString( firstValue ) ? firstValue : get( firstValue, [ 'props', 'children' ], '' ) @@ -197,10 +187,10 @@ export const settings = { > setAttributes( { - value: fromRichTextValue( nextValue ), + value: nextValue, } ) } onMerge={ mergeBlocks } @@ -240,9 +230,7 @@ export const settings = { className={ style === 2 ? 'is-large' : '' } style={ { textAlign: align ? align : null } } > - { value.map( ( paragraph, i ) => ( -

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

- ) ) } + { [ value ] /* Prevent keys warning... */ } { citation && citation.length > 0 && ( { citation } ) } diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 592b07b49c5a7..ba2fcd4e5370a 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -146,6 +146,7 @@ export class RichText extends Component { }; this.isEmpty = ! value || ! value.length; + this.savedContent = value; } /** @@ -695,13 +696,7 @@ export class RichText extends Component { !! this.editor && this.props.tagName === prevProps.tagName && this.props.value !== prevProps.value && - 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.props.value !== this.savedContent ) { this.updateContent(); } diff --git a/blocks/test/fixtures/core__pullquote.json b/blocks/test/fixtures/core__pullquote.json index e044ae447f65f..0b46f2c7ff37b 100644 --- a/blocks/test/fixtures/core__pullquote.json +++ b/blocks/test/fixtures/core__pullquote.json @@ -6,16 +6,8 @@ "attributes": { "value": [ { - "children": { - "type": "p", - "key": null, - "ref": null, - "props": { - "children": "Testing pullquote block..." - }, - "_owner": null, - "_store": {} - } + "type": "p", + "children": "Testing pullquote block..." } ], "citation": [ diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.json b/blocks/test/fixtures/core__pullquote__multi-paragraph.json index c2a6c0d770de7..abbb803f1c526 100644 --- a/blocks/test/fixtures/core__pullquote__multi-paragraph.json +++ b/blocks/test/fixtures/core__pullquote__multi-paragraph.json @@ -6,40 +6,18 @@ "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": {} - } + "type": "p", + "children": [ + "Paragraph ", + { + "type": "strong", + "children": "one" + } + ] }, { - "children": { - "type": "p", - "key": null, - "ref": null, - "props": { - "children": "Paragraph two" - }, - "_owner": null, - "_store": {} - } + "type": "p", + "children": "Paragraph two" } ], "citation": [ diff --git a/blocks/test/fixtures/core__quote__style-1.json b/blocks/test/fixtures/core__quote__style-1.json index 1a1f57668d6bb..abbc5e6042edc 100644 --- a/blocks/test/fixtures/core__quote__style-1.json +++ b/blocks/test/fixtures/core__quote__style-1.json @@ -6,16 +6,8 @@ "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": {} - } + "type": "p", + "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." } ], "citation": [ diff --git a/blocks/test/fixtures/core__quote__style-2.json b/blocks/test/fixtures/core__quote__style-2.json index 2462f8aa0a8fc..075537a1d9b32 100644 --- a/blocks/test/fixtures/core__quote__style-2.json +++ b/blocks/test/fixtures/core__quote__style-2.json @@ -6,16 +6,8 @@ "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": {} - } + "type": "p", + "children": "There is no greater agony than bearing an untold story inside you." } ], "citation": [ From d8b27e09737206d6c37ddbf85d260e4ef5f8f95c Mon Sep 17 00:00:00 2001 From: iseulde Date: Tue, 6 Mar 2018 23:47:17 +0700 Subject: [PATCH 2/2] Add warning for block authors --- blocks/rich-text/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index ba2fcd4e5370a..37266153f062b 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -35,6 +35,11 @@ import { pickAriaProps } from './aria'; import patterns from './patterns'; import { EVENTS } from './constants'; +/** + * Browser dependencies + */ +const { console } = window; + const { BACKSPACE, DELETE, ENTER } = keycodes; export function createTinyMCEElement( type, props, ...children ) { @@ -699,6 +704,13 @@ export class RichText extends Component { 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.' ); + } } }