diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js index 7ead0d8bf074bd..fd17945cc63841 100644 --- a/packages/block-library/src/heading/edit.native.js +++ b/packages/block-library/src/heading/edit.native.js @@ -16,20 +16,58 @@ import { Component } from '@wordpress/element'; import { RichText, BlockControls } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; -/** - * Internal dependencies - */ -import './editor.scss'; +import styles from './editor.scss'; -const minHeight = 24; +const name = 'core/heading'; class HeadingEdit extends Component { constructor( props ) { super( props ); - this.state = { - aztecHeight: 0, - }; + this.splitBlock = this.splitBlock.bind( this ); + } + + /** + * Split handler for RichText value, namely when content is pasted or the + * user presses the Enter key. + * + * @param {?Array} before Optional before value, to be used as content + * in place of what exists currently for the + * block. If undefined, the block is deleted. + * @param {?Array} after Optional after value, to be appended in a new + * paragraph block to the set of blocks passed + * as spread. + * @param {...WPBlock} blocks Optional blocks inserted between the before + * and after value blocks. + */ + splitBlock( before, after, ...blocks ) { + const { + attributes, + insertBlocksAfter, + setAttributes, + onReplace, + } = this.props; + + if ( after !== null ) { + // Append "After" content as a new paragraph block to the end of + // any other blocks being inserted after the current paragraph. + const newBlock = createBlock( name, { content: after } ); + blocks.push( newBlock ); + } + + if ( blocks.length && insertBlocksAfter ) { + insertBlocksAfter( blocks ); + } + + const { content } = attributes; + if ( before === null ) { + onReplace( [] ); + } else if ( content !== before ) { + // Only update content if it has in-fact changed. In case that user + // has created a new paragraph at end of an existing one, the value + // of before will be strictly equal to the current content. + setAttributes( { content: before } ); + } } render() { @@ -37,7 +75,7 @@ class HeadingEdit extends Component { attributes, setAttributes, mergeBlocks, - insertBlocksAfter, + style, } = this.props; const { @@ -47,6 +85,7 @@ class HeadingEdit extends Component { } = attributes; const tagName = 'h' + level; + return ( @@ -56,28 +95,16 @@ class HeadingEdit extends Component { tagName={ tagName } value={ content } isSelected={ this.props.isSelected } + style={ { + ...style, + minHeight: styles[ 'wp-block-heading' ].minHeight, + } } onFocus={ this.props.onFocus } // always assign onFocus as a props onBlur={ this.props.onBlur } // always assign onBlur as a props onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange } - style={ { - minHeight: Math.max( minHeight, this.state.aztecHeight ), - } } onChange={ ( value ) => setAttributes( { content: value } ) } onMerge={ mergeBlocks } - onSplit={ - insertBlocksAfter ? - ( before, after, ...blocks ) => { - setAttributes( { content: before } ); - insertBlocksAfter( [ - ...blocks, - createBlock( 'core/paragraph', { content: after } ), - ] ); - } : - undefined - } - onContentSizeChange={ ( event ) => { - this.setState( { aztecHeight: event.aztecHeight } ); - } } + onSplit={ this.splitBlock } placeholder={ placeholder || __( 'Write heading…' ) } /> diff --git a/packages/block-library/src/heading/style.native.scss b/packages/block-library/src/heading/style.native.scss new file mode 100644 index 00000000000000..f4801b92a6bc50 --- /dev/null +++ b/packages/block-library/src/heading/style.native.scss @@ -0,0 +1,4 @@ + +.blockText { + min-height: $min-height-heading; +} diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 2481d1ce3184a9..8158a3612af92e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -347,14 +347,6 @@ class ImageEdit extends React.Component { imageHeightWithinContainer, } = sizes; - if ( imageWidthWithinContainer === undefined ) { - return ( - - - - ); - } - let finalHeight = imageHeightWithinContainer; if ( height > 0 && height < imageHeightWithinContainer ) { finalHeight = height; @@ -369,6 +361,9 @@ class ImageEdit extends React.Component { { getInspectorControls() } { getMediaOptions() } + { ! imageWidthWithinContainer && + + } { setAttributes( { content: nextContent, @@ -122,9 +112,6 @@ class ParagraphEdit extends Component { onSplit={ this.splitBlock } onMerge={ mergeBlocks } onReplace={ this.onReplace } - onContentSizeChange={ ( event ) => { - this.setState( { aztecHeight: event.aztecHeight } ); - } } placeholder={ placeholder || __( 'Start writing…' ) } /> diff --git a/packages/block-library/src/paragraph/style.native.scss b/packages/block-library/src/paragraph/style.native.scss index a732fa2608dd1f..87d8ccedc8dc82 100644 --- a/packages/block-library/src/paragraph/style.native.scss +++ b/packages/block-library/src/paragraph/style.native.scss @@ -1,3 +1,4 @@ + .blockText { - min-height: 24; + min-height: $min-height-paragraph; }