diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss index 8ebe0a7286aee5..5494e74d2a2cc3 100644 --- a/blocks/library/pullquote/editor.scss +++ b/blocks/library/pullquote/editor.scss @@ -11,6 +11,10 @@ } .wp-block-pullquote { + cite { + display: block; + } + cite .blocks-rich-text__tinymce[data-is-empty="true"]:before { font-size: 14px; font-family: $default-font; diff --git a/blocks/library/quote/editor.scss b/blocks/library/quote/editor.scss index de83bc5f7f0fe0..e36feff5126ac9 100644 --- a/blocks/library/quote/editor.scss +++ b/blocks/library/quote/editor.scss @@ -1,5 +1,9 @@ .wp-block-quote { margin: 0; + + cite { + display: block; + } } .wp-block-quote:not(.is-large) { diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index de4119dd887679..7e069be11fbffa 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -158,7 +158,9 @@ export const settings = { } )( ( { 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 } ); + const onSetActiveEditable = ( newEditable ) => () => { + setState( { editable: newEditable } ); + }; return [ isSelected && ( diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 8a94d86794e8b9..43aa1af1d8c554 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -579,7 +579,7 @@ export class RichText extends Component { const beforeElement = nodeListToReact( beforeNodes, createTinyMCEElement ); const afterElement = nodeListToReact( afterNodes, createTinyMCEElement ); - this.props.onSplit( beforeElement, afterElement ); + this.restoreContentAndSplit( beforeElement, afterElement ); } else { event.preventDefault(); this.onCreateUndoLevel(); @@ -638,9 +638,10 @@ export class RichText extends Component { const beforeElement = nodeListToReact( beforeFragment.childNodes, createTinyMCEElement ); const afterElement = nodeListToReact( filterEmptyNodes( afterFragment.childNodes ), createTinyMCEElement ); - this.props.onSplit( beforeElement, afterElement, ...blocks ); + + this.restoreContentAndSplit( beforeElement, afterElement, blocks ); } else { - this.props.onSplit( [], [], ...blocks ); + this.restoreContentAndSplit( [], [], blocks ); } } @@ -686,7 +687,7 @@ export class RichText extends Component { // Splitting into two blocks this.setContent( this.props.value ); - this.props.onSplit( + this.restoreContentAndSplit( nodeListToReact( before, createTinyMCEElement ), nodeListToReact( after, createTinyMCEElement ) ); @@ -740,7 +741,9 @@ 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 && + ! isEqual( this.props.value, prevProps.value ) && + ! isEqual( this.props.value, this.savedContent ) ) { this.updateContent(); } @@ -796,6 +799,19 @@ export class RichText extends Component { } ) ); } + /** + * Calling onSplit means we need to abort the change done by TinyMCE. + * 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.updateContent(); + this.props.onSplit( before, after, ...blocks ); + } + render() { const { tagName: Tagname = 'div',