From e5a9b16ea6c50e32e3218868df503fb22df5975b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 8 May 2018 11:34:53 +0200 Subject: [PATCH 1/2] Core blocks: Extract edit to their own file - part 1 --- core-blocks/audio/edit.js | 134 +++++++++++++++ core-blocks/audio/index.js | 128 +------------- core-blocks/block/edit.js | 169 +++++++++++++++++++ core-blocks/block/index.js | 165 +----------------- core-blocks/button/edit.js | 167 ++++++++++++++++++ core-blocks/button/index.js | 152 +---------------- core-blocks/categories/{block.js => edit.js} | 5 +- core-blocks/categories/index.js | 5 +- package-lock.json | 102 +++++------ 9 files changed, 533 insertions(+), 494 deletions(-) create mode 100644 core-blocks/audio/edit.js create mode 100644 core-blocks/block/edit.js create mode 100644 core-blocks/button/edit.js rename core-blocks/categories/{block.js => edit.js} (98%) diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js new file mode 100644 index 0000000000000..5db78844da349 --- /dev/null +++ b/core-blocks/audio/edit.js @@ -0,0 +1,134 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + Button, + FormFileUpload, + IconButton, + Placeholder, + Toolbar, +} from '@wordpress/components'; +import { Component, Fragment } from '@wordpress/element'; +import { editorMediaUpload } from '@wordpress/blocks'; +import { + MediaUpload, + RichText, + BlockControls, +} from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import './editor.scss'; + +export default class AudioEdit extends Component { + constructor() { + super( ...arguments ); + // edit component has its own src in the state so it can be edited + // without setting the actual value outside of the edit UI + this.state = { + editing: ! this.props.attributes.src, + src: this.props.attributes.src, + }; + } + + render() { + const { caption, id } = this.props.attributes; + const { setAttributes, isSelected, className } = this.props; + const { editing, src } = this.state; + const switchToEditing = () => { + this.setState( { editing: true } ); + }; + const onSelectAudio = ( media ) => { + if ( media && media.url ) { + // sets the block's attribute and updates the edit component from the + // selected media, then switches off the editing UI + setAttributes( { src: media.url, id: media.id } ); + this.setState( { src: media.url, editing: false } ); + } + }; + const onSelectUrl = ( event ) => { + event.preventDefault(); + if ( src ) { + // set the block's src from the edit component's state, and switch off the editing UI + setAttributes( { src } ); + this.setState( { editing: false } ); + } + return false; + }; + const setAudio = ( [ audio ] ) => onSelectAudio( audio ); + const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setAudio, 'audio' ); + + if ( editing ) { + return ( + +
+ this.setState( { src: event.target.value } ) } + value={ src || '' } /> + +
+ + { __( 'Upload' ) } + + ( + + ) } + /> + + ); + } + + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ + return ( + + + + + + +
+
+ + ); + /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ + } +} diff --git a/core-blocks/audio/index.js b/core-blocks/audio/index.js index 955a72ae528c8..f8c112f9e27c4 100644 --- a/core-blocks/audio/index.js +++ b/core-blocks/audio/index.js @@ -2,26 +2,13 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - Button, - FormFileUpload, - IconButton, - Placeholder, - Toolbar, -} from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; -import { editorMediaUpload } from '@wordpress/blocks'; -import { - MediaUpload, - RichText, - BlockControls, -} from '@wordpress/editor'; +import { RichText } from '@wordpress/editor'; /** * Internal dependencies */ import './style.scss'; -import './editor.scss'; +import edit from './edit'; export const name = 'core/audio'; @@ -55,116 +42,7 @@ export const settings = { align: true, }, - edit: class extends Component { - constructor() { - super( ...arguments ); - // edit component has its own src in the state so it can be edited - // without setting the actual value outside of the edit UI - this.state = { - editing: ! this.props.attributes.src, - src: this.props.attributes.src, - }; - } - - render() { - const { caption, id } = this.props.attributes; - const { setAttributes, isSelected, className } = this.props; - const { editing, src } = this.state; - const switchToEditing = () => { - this.setState( { editing: true } ); - }; - const onSelectAudio = ( media ) => { - if ( media && media.url ) { - // sets the block's attribute and updates the edit component from the - // selected media, then switches off the editing UI - setAttributes( { src: media.url, id: media.id } ); - this.setState( { src: media.url, editing: false } ); - } - }; - const onSelectUrl = ( event ) => { - event.preventDefault(); - if ( src ) { - // set the block's src from the edit component's state, and switch off the editing UI - setAttributes( { src } ); - this.setState( { editing: false } ); - } - return false; - }; - const setAudio = ( [ audio ] ) => onSelectAudio( audio ); - const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setAudio, 'audio' ); - - if ( editing ) { - return ( - -
- this.setState( { src: event.target.value } ) } - value={ src || '' } /> - -
- - { __( 'Upload' ) } - - ( - - ) } - /> - - ); - } - - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ - return ( - - - - - - -
-
- - ); - /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ - } - }, + edit, save( { attributes } ) { const { src, caption } = attributes; diff --git a/core-blocks/block/edit.js b/core-blocks/block/edit.js new file mode 100644 index 0000000000000..deb56593f1827 --- /dev/null +++ b/core-blocks/block/edit.js @@ -0,0 +1,169 @@ +/** + * External dependencies + */ +import { noop, partial } from 'lodash'; + +/** + * WordPress dependencies + */ +import { Component, Fragment, compose } from '@wordpress/element'; +import { Placeholder, Spinner, Disabled } from '@wordpress/components'; +import { withSelect, withDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { BlockEdit } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import SharedBlockEditPanel from './edit-panel'; +import SharedBlockIndicator from './indicator'; + +class SharedBlockEdit extends Component { + constructor( { sharedBlock } ) { + super( ...arguments ); + + this.startEditing = this.startEditing.bind( this ); + this.stopEditing = this.stopEditing.bind( this ); + this.setAttributes = this.setAttributes.bind( this ); + this.setTitle = this.setTitle.bind( this ); + this.save = this.save.bind( this ); + + this.state = { + isEditing: !! ( sharedBlock && sharedBlock.isTemporary ), + title: null, + changedAttributes: null, + }; + } + + componentDidMount() { + if ( ! this.props.sharedBlock ) { + this.props.fetchSharedBlock(); + } + } + + startEditing() { + const { sharedBlock } = this.props; + + this.setState( { + isEditing: true, + title: sharedBlock.title, + changedAttributes: {}, + } ); + } + + stopEditing() { + this.setState( { + isEditing: false, + title: null, + changedAttributes: null, + } ); + } + + setAttributes( attributes ) { + this.setState( ( prevState ) => { + if ( prevState.changedAttributes !== null ) { + return { changedAttributes: { ...prevState.changedAttributes, ...attributes } }; + } + } ); + } + + setTitle( title ) { + this.setState( { title } ); + } + + save() { + const { sharedBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props; + const { title, changedAttributes } = this.state; + + if ( title !== sharedBlock.title ) { + onUpdateTitle( title ); + } + + updateAttributes( block.uid, changedAttributes ); + onSave(); + + this.stopEditing(); + } + + render() { + const { isSelected, sharedBlock, block, isFetching, isSaving } = this.props; + const { isEditing, title, changedAttributes } = this.state; + + if ( ! sharedBlock && isFetching ) { + return ; + } + + if ( ! sharedBlock || ! block ) { + return { __( 'Block has been deleted or is unavailable.' ) }; + } + + let element = ( + + ); + + if ( ! isEditing ) { + element = { element }; + } + + return ( + + { element } + { ( isSelected || isEditing ) && ( + + ) } + { ! isSelected && ! isEditing && } + + ); + } +} + +export default compose( [ + withSelect( ( select, ownProps ) => { + const { + getSharedBlock, + isFetchingSharedBlock, + isSavingSharedBlock, + getBlock, + } = select( 'core/editor' ); + const { ref } = ownProps.attributes; + const sharedBlock = getSharedBlock( ref ); + + return { + sharedBlock, + isFetching: isFetchingSharedBlock( ref ), + isSaving: isSavingSharedBlock( ref ), + block: sharedBlock ? getBlock( sharedBlock.uid ) : null, + }; + } ), + withDispatch( ( dispatch, ownProps ) => { + const { + fetchSharedBlocks, + updateBlockAttributes, + updateSharedBlockTitle, + saveSharedBlock, + } = dispatch( 'core/editor' ); + const { ref } = ownProps.attributes; + + return { + fetchSharedBlock: partial( fetchSharedBlocks, ref ), + updateAttributes: updateBlockAttributes, + onUpdateTitle: partial( updateSharedBlockTitle, ref ), + onSave: partial( saveSharedBlock, ref ), + }; + } ), +] )( SharedBlockEdit ); diff --git a/core-blocks/block/index.js b/core-blocks/block/index.js index 1ae8a3c345cbd..20fffc3dcaf3c 100644 --- a/core-blocks/block/index.js +++ b/core-blocks/block/index.js @@ -1,172 +1,12 @@ -/** - * External dependencies - */ -import { noop, partial } from 'lodash'; - /** * WordPress dependencies */ -import { Component, Fragment, compose } from '@wordpress/element'; -import { Placeholder, Spinner, Disabled } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { BlockEdit } from '@wordpress/editor'; /** * Internal dependencies */ -import SharedBlockEditPanel from './edit-panel'; -import SharedBlockIndicator from './indicator'; - -class SharedBlockEdit extends Component { - constructor( { sharedBlock } ) { - super( ...arguments ); - - this.startEditing = this.startEditing.bind( this ); - this.stopEditing = this.stopEditing.bind( this ); - this.setAttributes = this.setAttributes.bind( this ); - this.setTitle = this.setTitle.bind( this ); - this.save = this.save.bind( this ); - - this.state = { - isEditing: !! ( sharedBlock && sharedBlock.isTemporary ), - title: null, - changedAttributes: null, - }; - } - - componentDidMount() { - if ( ! this.props.sharedBlock ) { - this.props.fetchSharedBlock(); - } - } - - startEditing() { - const { sharedBlock } = this.props; - - this.setState( { - isEditing: true, - title: sharedBlock.title, - changedAttributes: {}, - } ); - } - - stopEditing() { - this.setState( { - isEditing: false, - title: null, - changedAttributes: null, - } ); - } - - setAttributes( attributes ) { - this.setState( ( prevState ) => { - if ( prevState.changedAttributes !== null ) { - return { changedAttributes: { ...prevState.changedAttributes, ...attributes } }; - } - } ); - } - - setTitle( title ) { - this.setState( { title } ); - } - - save() { - const { sharedBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props; - const { title, changedAttributes } = this.state; - - if ( title !== sharedBlock.title ) { - onUpdateTitle( title ); - } - - updateAttributes( block.uid, changedAttributes ); - onSave(); - - this.stopEditing(); - } - - render() { - const { isSelected, sharedBlock, block, isFetching, isSaving } = this.props; - const { isEditing, title, changedAttributes } = this.state; - - if ( ! sharedBlock && isFetching ) { - return ; - } - - if ( ! sharedBlock || ! block ) { - return { __( 'Block has been deleted or is unavailable.' ) }; - } - - let element = ( - - ); - - if ( ! isEditing ) { - element = { element }; - } - - return ( - - { element } - { ( isSelected || isEditing ) && ( - - ) } - { ! isSelected && ! isEditing && } - - ); - } -} - -const EnhancedSharedBlockEdit = compose( [ - withSelect( ( select, ownProps ) => { - const { - getSharedBlock, - isFetchingSharedBlock, - isSavingSharedBlock, - getBlock, - } = select( 'core/editor' ); - const { ref } = ownProps.attributes; - const sharedBlock = getSharedBlock( ref ); - - return { - sharedBlock, - isFetching: isFetchingSharedBlock( ref ), - isSaving: isSavingSharedBlock( ref ), - block: sharedBlock ? getBlock( sharedBlock.uid ) : null, - }; - } ), - withDispatch( ( dispatch, ownProps ) => { - const { - fetchSharedBlocks, - updateBlockAttributes, - updateSharedBlockTitle, - saveSharedBlock, - } = dispatch( 'core/editor' ); - const { ref } = ownProps.attributes; - - return { - fetchSharedBlock: partial( fetchSharedBlocks, ref ), - updateAttributes: updateBlockAttributes, - onUpdateTitle: partial( updateSharedBlockTitle, ref ), - onSave: partial( saveSharedBlock, ref ), - }; - } ), -] )( SharedBlockEdit ); +import edit from './edit'; export const name = 'core/block'; @@ -186,6 +26,7 @@ export const settings = { html: false, }, - edit: EnhancedSharedBlockEdit, + edit, + save: () => null, }; diff --git a/core-blocks/button/edit.js b/core-blocks/button/edit.js new file mode 100644 index 0000000000000..8823f96f9749b --- /dev/null +++ b/core-blocks/button/edit.js @@ -0,0 +1,167 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { + Dashicon, + IconButton, + PanelBody, + ToggleControl, + withFallbackStyles, +} from '@wordpress/components'; +import { + UrlInput, + RichText, + BlockControls, + BlockAlignmentToolbar, + ContrastChecker, + InspectorControls, + withColors, + PanelColor, +} from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import './editor.scss'; + +const { getComputedStyle } = window; + +const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => { + const { textColor, backgroundColor } = ownProps; + //avoid the use of querySelector if textColor color is known and verify if node is available. + const textNode = ! textColor && node ? node.querySelector( '[contenteditable="true"]' ) : null; + return { + fallbackBackgroundColor: backgroundColor || ! node ? undefined : getComputedStyle( node ).backgroundColor, + fallbackTextColor: textColor || ! textNode ? undefined : getComputedStyle( textNode ).color, + }; +} )( ContrastChecker ); + +class ButtonEdit extends Component { + constructor() { + super( ...arguments ); + this.nodeRef = null; + this.bindRef = this.bindRef.bind( this ); + this.updateAlignment = this.updateAlignment.bind( this ); + this.toggleClear = this.toggleClear.bind( this ); + } + + updateAlignment( nextAlign ) { + this.props.setAttributes( { align: nextAlign } ); + } + + toggleClear() { + const { attributes, setAttributes } = this.props; + setAttributes( { clear: ! attributes.clear } ); + } + + bindRef( node ) { + if ( ! node ) { + return; + } + this.nodeRef = node; + } + + render() { + const { + attributes, + backgroundColor, + textColor, + setBackgroundColor, + setTextColor, + setAttributes, + isSelected, + className, + } = this.props; + + const { + text, + url, + title, + align, + clear, + } = attributes; + + return ( + + + + + + setAttributes( { text: value } ) } + formattingControls={ [ 'bold', 'italic', 'strikethrough' ] } + className={ classnames( + 'wp-block-button__link', { + 'has-background': backgroundColor.value, + [ backgroundColor.class ]: backgroundColor.class, + 'has-text-color': textColor.value, + [ textColor.class ]: textColor.class, + } + ) } + style={ { + backgroundColor: backgroundColor.class ? undefined : backgroundColor.value, + color: textColor.class ? undefined : textColor.value, + } } + keepPlaceholderOnFocus + /> + + + + + + { this.nodeRef && } + + + + { isSelected && ( +
event.preventDefault() }> + + setAttributes( { url: value } ) } + /> + + + ) } +
+ ); + } +} + +export default withColors( ( getColor, setColor, { attributes, setAttributes } ) => { + return { + backgroundColor: getColor( attributes.backgroundColor, attributes.customBackgroundColor, 'background-color' ), + setBackgroundColor: setColor( 'backgroundColor', 'customBackgroundColor', setAttributes ), + textColor: getColor( attributes.textColor, attributes.customTextColor, 'color' ), + setTextColor: setColor( 'textColor', 'customTextColor', setAttributes ), + }; +} )( ButtonEdit ); diff --git a/core-blocks/button/index.js b/core-blocks/button/index.js index e9fb9fbd9218f..2c06e3a021174 100644 --- a/core-blocks/button/index.js +++ b/core-blocks/button/index.js @@ -8,157 +8,16 @@ import { omit, pick } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; import { - Dashicon, - IconButton, - PanelBody, - ToggleControl, - withFallbackStyles, -} from '@wordpress/components'; -import { - UrlInput, RichText, - BlockControls, - BlockAlignmentToolbar, - ContrastChecker, - InspectorControls, getColorClass, - withColors, - PanelColor, } from '@wordpress/editor'; /** * Internal dependencies */ -import './editor.scss'; import './style.scss'; - -const { getComputedStyle } = window; - -const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => { - const { textColor, backgroundColor } = ownProps; - //avoid the use of querySelector if textColor color is known and verify if node is available. - const textNode = ! textColor && node ? node.querySelector( '[contenteditable="true"]' ) : null; - return { - fallbackBackgroundColor: backgroundColor || ! node ? undefined : getComputedStyle( node ).backgroundColor, - fallbackTextColor: textColor || ! textNode ? undefined : getComputedStyle( textNode ).color, - }; -} )( ContrastChecker ); - -class ButtonBlock extends Component { - constructor() { - super( ...arguments ); - this.nodeRef = null; - this.bindRef = this.bindRef.bind( this ); - this.updateAlignment = this.updateAlignment.bind( this ); - this.toggleClear = this.toggleClear.bind( this ); - } - - updateAlignment( nextAlign ) { - this.props.setAttributes( { align: nextAlign } ); - } - - toggleClear() { - const { attributes, setAttributes } = this.props; - setAttributes( { clear: ! attributes.clear } ); - } - - bindRef( node ) { - if ( ! node ) { - return; - } - this.nodeRef = node; - } - - render() { - const { - attributes, - backgroundColor, - textColor, - setBackgroundColor, - setTextColor, - setAttributes, - isSelected, - className, - } = this.props; - - const { - text, - url, - title, - align, - clear, - } = attributes; - - return ( - - - - - - setAttributes( { text: value } ) } - formattingControls={ [ 'bold', 'italic', 'strikethrough' ] } - className={ classnames( - 'wp-block-button__link', { - 'has-background': backgroundColor.value, - [ backgroundColor.class ]: backgroundColor.class, - 'has-text-color': textColor.value, - [ textColor.class ]: textColor.class, - } - ) } - style={ { - backgroundColor: backgroundColor.class ? undefined : backgroundColor.value, - color: textColor.class ? undefined : textColor.value, - } } - keepPlaceholderOnFocus - /> - - - - - - { this.nodeRef && } - - - - { isSelected && ( -
event.preventDefault() }> - - setAttributes( { url: value } ) } - /> - - - ) } -
- ); - } -} +import edit from './edit'; const blockAttributes = { url: { @@ -232,14 +91,7 @@ export const settings = { return props; }, - edit: withColors( ( getColor, setColor, { attributes, setAttributes } ) => { - return { - backgroundColor: getColor( attributes.backgroundColor, attributes.customBackgroundColor, 'background-color' ), - setBackgroundColor: setColor( 'backgroundColor', 'customBackgroundColor', setAttributes ), - textColor: getColor( attributes.textColor, attributes.customTextColor, 'color' ), - setTextColor: setColor( 'textColor', 'customTextColor', setAttributes ), - }; - } )( ButtonBlock ), + edit, save( { attributes } ) { const { diff --git a/core-blocks/categories/block.js b/core-blocks/categories/edit.js similarity index 98% rename from core-blocks/categories/block.js rename to core-blocks/categories/edit.js index c3152e3406a2f..1e34203a9d136 100644 --- a/core-blocks/categories/block.js +++ b/core-blocks/categories/edit.js @@ -16,9 +16,8 @@ import { * Internal dependencies */ import './editor.scss'; -import './style.scss'; -class CategoriesBlock extends Component { +class CategoriesEdit extends Component { constructor() { super( ...arguments ); @@ -215,4 +214,4 @@ export default withSelect( ( select ) => { categories: getCategories(), isRequesting: isRequestingCategories(), }; -} )( CategoriesBlock ); +} )( CategoriesEdit ); diff --git a/core-blocks/categories/index.js b/core-blocks/categories/index.js index d180b7df245df..dfcfd8d0b8918 100644 --- a/core-blocks/categories/index.js +++ b/core-blocks/categories/index.js @@ -6,9 +6,8 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import './editor.scss'; import './style.scss'; -import CategoriesBlock from './block'; +import edit from './edit'; export const name = 'core/categories'; @@ -50,7 +49,7 @@ export const settings = { } }, - edit: CategoriesBlock, + edit, save() { return null; diff --git a/package-lock.json b/package-lock.json index 881a7ae2cfc22..5f9eec08de3c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5416,8 +5416,8 @@ "dev": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.2.9" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "asn1": { @@ -5696,14 +5696,14 @@ "dev": true, "optional": true, "requires": { - "aproba": "1.1.1", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.2" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "getpass": { @@ -5731,12 +5731,12 @@ "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "graceful-fs": { @@ -5806,8 +5806,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -5829,7 +5829,7 @@ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-typedarray": { @@ -5943,7 +5943,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.7" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -5995,8 +5995,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.0", - "osenv": "0.1.4" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npmlog": { @@ -6038,7 +6038,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -6245,9 +6245,9 @@ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -6272,7 +6272,7 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { @@ -6374,7 +6374,7 @@ "dev": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2" } }, "wrappy": { @@ -7821,7 +7821,7 @@ "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", "dev": true, "requires": { - "has-flag": "1.0.0" + "has-flag": "^1.0.0" } } } @@ -9678,12 +9678,12 @@ "integrity": "sha1-Ah+cLPlR1rk5lDyJ617lrdT9kkw=", "dev": true, "requires": { - "clone": "2.1.2", - "clone-buffer": "1.0.0", - "clone-stats": "1.0.0", - "cloneable-readable": "1.1.2", - "remove-trailing-separator": "1.1.0", - "replace-ext": "1.0.0" + "clone": "^2.1.1", + "clone-buffer": "^1.0.0", + "clone-stats": "^1.0.0", + "cloneable-readable": "^1.0.0", + "remove-trailing-separator": "^1.0.1", + "replace-ext": "^1.0.0" } } } @@ -15487,11 +15487,11 @@ "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { - "array-union": "1.0.2", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "has-flag": { @@ -15594,10 +15594,10 @@ "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "parse-json": "4.0.0", - "pify": "3.0.0", - "strip-bom": "3.0.0" + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" } }, "minimist": { @@ -15612,8 +15612,8 @@ "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", "dev": true, "requires": { - "error-ex": "1.3.1", - "json-parse-better-errors": "1.0.1" + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" } }, "path-type": { @@ -15637,9 +15637,9 @@ "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", "dev": true, "requires": { - "load-json-file": "4.0.0", - "normalize-package-data": "2.4.0", - "path-type": "3.0.0" + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" } }, "read-pkg-up": { @@ -15648,8 +15648,8 @@ "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", "dev": true, "requires": { - "find-up": "2.1.0", - "read-pkg": "3.0.0" + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" } }, "supports-color": { From b25ba3d3b678b6fb4faef07d5ce70253d7f09483 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Tue, 8 May 2018 12:58:55 +0300 Subject: [PATCH 2/2] Own file for heading block's edit function --- core-blocks/heading/edit.js | 82 ++++++++++++++++++++++++++++++++++++ core-blocks/heading/index.js | 79 +++------------------------------- 2 files changed, 87 insertions(+), 74 deletions(-) create mode 100644 core-blocks/heading/edit.js diff --git a/core-blocks/heading/edit.js b/core-blocks/heading/edit.js new file mode 100644 index 0000000000000..229232515ed08 --- /dev/null +++ b/core-blocks/heading/edit.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ + +import { __, sprintf } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { PanelBody, Toolbar } from '@wordpress/components'; +import { createBlock } from '@wordpress/blocks'; +import { RichText, BlockControls, InspectorControls, AlignmentToolbar } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import './editor.scss'; + +export default function HeadingEdit( { + attributes, + setAttributes, + mergeBlocks, + insertBlocksAfter, + onReplace, + className, +} ) { + const { align, content, nodeName, placeholder } = attributes; + + return ( + + ( { + icon: 'heading', + title: sprintf( __( 'Heading %s' ), level ), + isActive: 'H' + level === nodeName, + onClick: () => setAttributes( { nodeName: 'H' + level } ), + subscript: level, + } ) ) } + /> + + +

{ __( 'Level' ) }

+ ( { + icon: 'heading', + title: sprintf( __( 'Heading %s' ), level ), + isActive: 'H' + level === nodeName, + onClick: () => setAttributes( { nodeName: 'H' + level } ), + subscript: level, + } ) ) } + /> +

{ __( 'Text Alignment' ) }

+ { + setAttributes( { align: nextAlign } ); + } } + /> + + + setAttributes( { content: value } ) } + onMerge={ mergeBlocks } + onSplit={ + insertBlocksAfter ? + ( before, after, ...blocks ) => { + setAttributes( { content: before } ); + insertBlocksAfter( [ + ...blocks, + createBlock( 'core/paragraph', { content: after } ), + ] ); + } : + undefined + } + onRemove={ () => onReplace( [] ) } + style={ { textAlign: align } } + className={ className } + placeholder={ placeholder || __( 'Write heading…' ) } + /> + + ); +} diff --git a/core-blocks/heading/index.js b/core-blocks/heading/index.js index 84e656b957ddc..03896d5281869 100644 --- a/core-blocks/heading/index.js +++ b/core-blocks/heading/index.js @@ -1,21 +1,15 @@ /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { concatChildren, Fragment } from '@wordpress/element'; -import { PanelBody, Toolbar } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { concatChildren } from '@wordpress/element'; import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; -import { - RichText, - BlockControls, - InspectorControls, - AlignmentToolbar, -} from '@wordpress/editor'; +import { RichText } from '@wordpress/editor'; /** * Internal dependencies */ -import './editor.scss'; +import edit from './edit'; export const name = 'core/heading'; @@ -111,70 +105,7 @@ export const settings = { }; }, - edit( { attributes, setAttributes, mergeBlocks, insertBlocksAfter, onReplace, className } ) { - const { align, content, nodeName, placeholder } = attributes; - - return ( - - ( { - icon: 'heading', - title: sprintf( __( 'Heading %s' ), level ), - isActive: 'H' + level === nodeName, - onClick: () => setAttributes( { nodeName: 'H' + level } ), - subscript: level, - } ) ) - } - /> - - -

{ __( 'Level' ) }

- ( { - icon: 'heading', - title: sprintf( __( 'Heading %s' ), level ), - isActive: 'H' + level === nodeName, - onClick: () => setAttributes( { nodeName: 'H' + level } ), - subscript: level, - } ) ) - } - /> -

{ __( 'Text Alignment' ) }

- { - setAttributes( { align: nextAlign } ); - } } - /> - - - setAttributes( { content: value } ) } - onMerge={ mergeBlocks } - onSplit={ - insertBlocksAfter ? - ( before, after, ...blocks ) => { - setAttributes( { content: before } ); - insertBlocksAfter( [ - ...blocks, - createBlock( 'core/paragraph', { content: after } ), - ] ); - } : - undefined - } - onRemove={ () => onReplace( [] ) } - style={ { textAlign: align } } - className={ className } - placeholder={ placeholder || __( 'Write heading…' ) } - /> - - ); - }, + edit, save( { attributes } ) { const { align, nodeName, content } = attributes;