From 72289b30cbf2cb416dd39a6914e492516bdadd97 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Mon, 9 Apr 2018 16:02:46 +0200 Subject: [PATCH 01/16] Register the _more_ block in blocks/library --- core-blocks/index.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core-blocks/index.native.js b/core-blocks/index.native.js index 44a282e6a1eae..df6b8b623b293 100644 --- a/core-blocks/index.native.js +++ b/core-blocks/index.native.js @@ -9,10 +9,12 @@ import { * Internal dependencies */ import * as code from './code'; +import * as more from './more'; export const registerCoreBlocks = () => { [ code, + more, ].forEach( ( { name, settings } ) => { registerBlockType( name, settings ); } ); From 394f8750417b07618fe663c2934ae1cab22dfe41 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Mon, 9 Apr 2018 16:03:18 +0200 Subject: [PATCH 02/16] Move the edit function to its own file --- core-blocks/more/edit.js | 65 +++++++++++++++++++++++++++++++++++++++ core-blocks/more/index.js | 59 ++--------------------------------- 2 files changed, 68 insertions(+), 56 deletions(-) create mode 100644 core-blocks/more/edit.js diff --git a/core-blocks/more/edit.js b/core-blocks/more/edit.js new file mode 100644 index 0000000000000..6ad8bf5fd135d --- /dev/null +++ b/core-blocks/more/edit.js @@ -0,0 +1,65 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, ToggleControl } from '@wordpress/components'; +import { Component, Fragment } from '@wordpress/element'; +import { InspectorControls } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import './editor.scss'; + +export default class edit extends Component { + constructor() { + super( ...arguments ); + this.onChangeInput = this.onChangeInput.bind( this ); + + this.state = { + defaultText: __( 'Read more' ), + }; + } + + onChangeInput( event ) { + // Set defaultText to an empty string, allowing the user to clear/replace the input field's text + this.setState( { + defaultText: '', + } ); + + const value = event.target.value.length === 0 ? undefined : event.target.value; + this.props.setAttributes( { customText: value } ); + } + + render() { + const { customText, noTeaser } = this.props.attributes; + const { setAttributes } = this.props; + + const toggleNoTeaser = () => setAttributes( { noTeaser: ! noTeaser } ); + const { defaultText } = this.state; + const value = customText !== undefined ? customText : defaultText; + const inputLength = value.length + 1; + + return ( + + + + + + +
+ +
+ + ); + } +}; diff --git a/core-blocks/more/index.js b/core-blocks/more/index.js index 9d8e1b9c617a6..61e0a6785f013 100644 --- a/core-blocks/more/index.js +++ b/core-blocks/more/index.js @@ -7,15 +7,13 @@ import { compact } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, ToggleControl } from '@wordpress/components'; -import { Component, Fragment, RawHTML } from '@wordpress/element'; +import { RawHTML } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; -import { InspectorControls } from '@wordpress/editor'; /** * Internal dependencies */ -import './editor.scss'; +import edit from './edit'; export const name = 'core/more'; @@ -71,58 +69,7 @@ export const settings = { ], }, - edit: class extends Component { - constructor() { - super( ...arguments ); - this.onChangeInput = this.onChangeInput.bind( this ); - - this.state = { - defaultText: __( 'Read more' ), - }; - } - - onChangeInput( event ) { - // Set defaultText to an empty string, allowing the user to clear/replace the input field's text - this.setState( { - defaultText: '', - } ); - - const value = event.target.value.length === 0 ? undefined : event.target.value; - this.props.setAttributes( { customText: value } ); - } - - render() { - const { customText, noTeaser } = this.props.attributes; - const { setAttributes } = this.props; - - const toggleNoTeaser = () => setAttributes( { noTeaser: ! noTeaser } ); - const { defaultText } = this.state; - const value = customText !== undefined ? customText : defaultText; - const inputLength = value.length + 1; - - return ( - - - - - - -
- -
- - ); - } - }, + edit, save( { attributes } ) { const { customText, noTeaser } = attributes; From 129bdfc4aafdc14cb58120b3c771fa3738e9ad15 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Mon, 9 Apr 2018 16:03:30 +0200 Subject: [PATCH 03/16] Embryo of a RN more tag --- core-blocks/more/edit.native.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 core-blocks/more/edit.native.js diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js new file mode 100644 index 0000000000000..81a464fbabcef --- /dev/null +++ b/core-blocks/more/edit.native.js @@ -0,0 +1,16 @@ +/** @format */ + +import { View, Text } from 'react-native'; + +/** + * WordPress dependencies + */ +import { __ } from '../../../i18n'; + +export function edit( { attributes, setAttributes, isSelected } ) { + return ( + + <!-- More --> + + ); +} From 6f2f0f2f5f200ea8b20a6fc35b6a0b03be838962 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Mon, 9 Apr 2018 16:06:24 +0200 Subject: [PATCH 04/16] Add read only text to the more tag --- core-blocks/more/edit.native.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 81a464fbabcef..6838aa9c352e5 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -8,9 +8,13 @@ import { View, Text } from 'react-native'; import { __ } from '../../../i18n'; export function edit( { attributes, setAttributes, isSelected } ) { + const { customText, noTeaser } = attributes; + const defaultText = __( 'Read more' ); + const value = customText !== undefined ? customText : defaultText; + return ( - - <!-- More --> + + <!-- More: { value } --> ); } From 3d7ab77fabda9d973080c6e56da39ff87fe62388 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Tue, 10 Apr 2018 13:34:24 +0200 Subject: [PATCH 05/16] Add PlainText input to the more block --- core-blocks/more/edit.native.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 6838aa9c352e5..99c7b260e4824 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -7,14 +7,28 @@ import { View, Text } from 'react-native'; */ import { __ } from '../../../i18n'; +/** + * Internal dependencies + */ +import PlainText from '../../plain-text'; + export function edit( { attributes, setAttributes, isSelected } ) { const { customText, noTeaser } = attributes; const defaultText = __( 'Read more' ); const value = customText !== undefined ? customText : defaultText; return ( - - <!-- More: { value } --> - - ); + + + <!-- + setAttributes( { content } ) } + placeholder={ defaultText } + /> + <Text style={{ fontFamily: 'monospace' }}>--&gt;</Text> + </View> + </View>); } From c5aa745ecb1c833d5886bc9bf30474d6830a6909 Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Tue, 17 Apr 2018 11:05:36 +0200 Subject: [PATCH 06/16] Remove the 100% width on the plain-text style --- editor/components/plain-text/style.native.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/editor/components/plain-text/style.native.scss b/editor/components/plain-text/style.native.scss index 89c33a45d4704..5e0face119c73 100644 --- a/editor/components/plain-text/style.native.scss +++ b/editor/components/plain-text/style.native.scss @@ -5,5 +5,4 @@ padding: 0; margin: 0; - width: 100%; } From 01bd7930d37d43ed1db027c6813e3a02772cf46b Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Tue, 17 Apr 2018 11:07:00 +0200 Subject: [PATCH 07/16] Fix styling on the core/more block --- core-blocks/more/edit.native.js | 34 ++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 99c7b260e4824..ff79795a9852d 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -13,22 +13,22 @@ import { __ } from '../../../i18n'; import PlainText from '../../plain-text'; export function edit( { attributes, setAttributes, isSelected } ) { - const { customText, noTeaser } = attributes; - const defaultText = __( 'Read more' ); - const value = customText !== undefined ? customText : defaultText; + const { customText, noTeaser } = attributes; + const defaultText = __( 'Read more' ); + const value = customText !== undefined ? customText : defaultText; - return ( - <View style={{ padding: 4, alignItems: 'center' }}> - <View style={{ alignItems: 'center', flexDirection: "row"}}> - <Text style={{ fontFamily: 'monospace' }}>&lt;!--</Text> - <PlainText - value={ value } - multiline={ false } - underlineColorAndroid="transparent" - onChange={ content => setAttributes( { content } ) } - placeholder={ defaultText } - /> - <Text style={{ fontFamily: 'monospace' }}>--&gt;</Text> - </View> - </View>); + return ( + <View style={ { padding: 4, alignItems: 'center' } }> + <View style={ { alignItems: 'center', flexDirection: 'row' } }> + <Text style={ { fontFamily: 'monospace' } }>&lt;!--</Text> + <PlainText + value={ value } + multiline={ false } + underlineColorAndroid="transparent" + onChange={ content => setAttributes( { content } ) } + placeholder={ defaultText } + /> + <Text style={ { fontFamily: 'monospace' } }>--&gt;</Text> + </View> + </View> ); } From 49d086b08daa1e6ee168073236b39f0265e7ff3e Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Tue, 17 Apr 2018 14:52:04 +0200 Subject: [PATCH 08/16] Move styles to .scss file --- core-blocks/more/edit.native.js | 14 ++++++++------ core-blocks/more/editor.native.scss | 25 +++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 core-blocks/more/editor.native.scss diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index ff79795a9852d..5cec9624f3026 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -11,6 +11,7 @@ import { __ } from '../../../i18n'; * Internal dependencies */ import PlainText from '../../plain-text'; +import styles from './editor.scss'; export function edit( { attributes, setAttributes, isSelected } ) { const { customText, noTeaser } = attributes; @@ -18,17 +19,18 @@ export function edit( { attributes, setAttributes, isSelected } ) { const value = customText !== undefined ? customText : defaultText; return ( - <View style={ { padding: 4, alignItems: 'center' } }> - <View style={ { alignItems: 'center', flexDirection: 'row' } }> - <Text style={ { fontFamily: 'monospace' } }>&lt;!--</Text> + <View className={ styles.blocks_more_container }> + <View className={ styles.blocks_more_sub_container }> + <Text className={ styles.blocks_more_left_marker }>&lt;!--</Text> <PlainText + className={ styles.blocks_more_plain_text } value={ value } - multiline={ false } + multiline={ true } underlineColorAndroid="transparent" - onChange={ content => setAttributes( { content } ) } + onChange={ value => setAttributes( { customText: value } ) } placeholder={ defaultText } /> - <Text style={ { fontFamily: 'monospace' } }>--&gt;</Text> + <Text className={ styles.blocks_more_right_marker }>--&gt;</Text> </View> </View> ); } diff --git a/core-blocks/more/editor.native.scss b/core-blocks/more/editor.native.scss new file mode 100644 index 0000000000000..5a35079c46f15 --- /dev/null +++ b/core-blocks/more/editor.native.scss @@ -0,0 +1,25 @@ +// @format + +.blocks_more_container { + align-items: center; + padding-left: 4; + padding-right: 4; + padding-top: 4; + padding-bottom: 4; +} + +.blocks_more_sub_container { + align-items: center; + flex-direction: row; +} + +.blocks_more_left_marker { + font-family: monospace; + padding-right: 4; +} + +.blocks_more_right_marker { + font-family: monospace; + padding-left: 4; +} + From 073d4c32c39b718edf219f8eb62e79b537b01f3d Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Tue, 17 Apr 2018 17:40:04 +0200 Subject: [PATCH 09/16] Fix i18n import --- core-blocks/more/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 5cec9624f3026..a656c259f172f 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -5,7 +5,7 @@ import { View, Text } from 'react-native'; /** * WordPress dependencies */ -import { __ } from '../../../i18n'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies From e8c2e368a9f1e9c7e3de458759a10272d8ee93cb Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Wed, 18 Apr 2018 15:43:21 +0200 Subject: [PATCH 10/16] Remove font styling for the more block marker --- core-blocks/more/editor.native.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/core-blocks/more/editor.native.scss b/core-blocks/more/editor.native.scss index 5a35079c46f15..3c7dd66a9010f 100644 --- a/core-blocks/more/editor.native.scss +++ b/core-blocks/more/editor.native.scss @@ -14,12 +14,10 @@ } .blocks_more_left_marker { - font-family: monospace; padding-right: 4; } .blocks_more_right_marker { - font-family: monospace; padding-left: 4; } From 9e694da22f94c54b6779dafca6eec7fd24e0e6cd Mon Sep 17 00:00:00 2001 From: Maxime Biais <maxime.biais@gmail.com> Date: Thu, 19 Apr 2018 11:28:22 +0200 Subject: [PATCH 11/16] Replace underscores by hyphens in css names --- core-blocks/more/edit.native.js | 10 +++++----- core-blocks/more/editor.native.scss | 9 ++++----- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index a656c259f172f..d68cffb941aeb 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -19,18 +19,18 @@ export function edit( { attributes, setAttributes, isSelected } ) { const value = customText !== undefined ? customText : defaultText; return ( - <View className={ styles.blocks_more_container }> - <View className={ styles.blocks_more_sub_container }> - <Text className={ styles.blocks_more_left_marker }>&lt;!--</Text> + <View className={ styles[ 'blocks-more-container' ] }> + <View className={ styles[ 'blocks-more-sub-container' ] }> + <Text className={ styles[ 'blocks-more-left-marker' ] }>&lt;!--</Text> <PlainText - className={ styles.blocks_more_plain_text } + className={ styles[ 'blocks-more-plain-text' ] } value={ value } multiline={ true } underlineColorAndroid="transparent" onChange={ value => setAttributes( { customText: value } ) } placeholder={ defaultText } /> - <Text className={ styles.blocks_more_right_marker }>--&gt;</Text> + <Text className={ styles[ 'blocks-more-right-marker' ] }>--&gt;</Text> </View> </View> ); } diff --git a/core-blocks/more/editor.native.scss b/core-blocks/more/editor.native.scss index 3c7dd66a9010f..bd86b75072404 100644 --- a/core-blocks/more/editor.native.scss +++ b/core-blocks/more/editor.native.scss @@ -1,6 +1,6 @@ // @format -.blocks_more_container { +.blocks-more-container { align-items: center; padding-left: 4; padding-right: 4; @@ -8,16 +8,15 @@ padding-bottom: 4; } -.blocks_more_sub_container { +.blocks-more-sub-container { align-items: center; flex-direction: row; } -.blocks_more_left_marker { +.blocks-more-left-marker { padding-right: 4; } -.blocks_more_right_marker { +.blocks-more-right-marker { padding-left: 4; } - From aa9c111ca289db5306658c821652efd575feeb0e Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Mon, 7 May 2018 23:15:53 +0300 Subject: [PATCH 12/16] editor/index.js needs nativization --- core-blocks/more/edit.native.js | 6 +++--- editor/index.native.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 editor/index.native.js diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index d68cffb941aeb..41b05daf03e3e 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -10,10 +10,10 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import PlainText from '../../plain-text'; +import { PlainText } from '@wordpress/editor'; import styles from './editor.scss'; -export function edit( { attributes, setAttributes, isSelected } ) { +export default function edit( { attributes, setAttributes, isSelected } ) { const { customText, noTeaser } = attributes; const defaultText = __( 'Read more' ); const value = customText !== undefined ? customText : defaultText; @@ -27,7 +27,7 @@ export function edit( { attributes, setAttributes, isSelected } ) { value={ value } multiline={ true } underlineColorAndroid="transparent" - onChange={ value => setAttributes( { customText: value } ) } + onChange={ ( newValue ) => setAttributes( { customText: newValue } ) } placeholder={ defaultText } /> <Text className={ styles[ 'blocks-more-right-marker' ] }>--&gt;</Text> diff --git a/editor/index.native.js b/editor/index.native.js new file mode 100644 index 0000000000000..07635cbbc8e7a --- /dev/null +++ b/editor/index.native.js @@ -0,0 +1 @@ +export * from './components'; From b2a04ab2c3ca54703de507862eb6be3e880651f6 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue, 8 May 2018 01:37:04 +0300 Subject: [PATCH 13/16] Fix eslint issues --- core-blocks/more/edit.js | 2 +- core-blocks/more/edit.native.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core-blocks/more/edit.js b/core-blocks/more/edit.js index 6ad8bf5fd135d..3bb1cf189ce7e 100644 --- a/core-blocks/more/edit.js +++ b/core-blocks/more/edit.js @@ -62,4 +62,4 @@ export default class edit extends Component { </Fragment> ); } -}; +} diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 41b05daf03e3e..7a42817f78729 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -13,8 +13,8 @@ import { __ } from '@wordpress/i18n'; import { PlainText } from '@wordpress/editor'; import styles from './editor.scss'; -export default function edit( { attributes, setAttributes, isSelected } ) { - const { customText, noTeaser } = attributes; +export default function edit( { attributes, setAttributes } ) { + const { customText } = attributes; const defaultText = __( 'Read more' ); const value = customText !== undefined ? customText : defaultText; From e50d85c3412570b6cf540f6a211b34d57bb6309c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= <grzegorz.ziolkowski@automattic.com> Date: Tue, 8 May 2018 10:20:40 +0200 Subject: [PATCH 14/16] Core blocks: Rename component to follow pattern --- core-blocks/more/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core-blocks/more/edit.js b/core-blocks/more/edit.js index 3bb1cf189ce7e..72aebf0288f78 100644 --- a/core-blocks/more/edit.js +++ b/core-blocks/more/edit.js @@ -11,7 +11,7 @@ import { InspectorControls } from '@wordpress/editor'; */ import './editor.scss'; -export default class edit extends Component { +export default class MoreEdit extends Component { constructor() { super( ...arguments ); this.onChangeInput = this.onChangeInput.bind( this ); From fa5f3e444e71e28f9ac869a5a89199539c4ccffb Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue, 8 May 2018 11:39:54 +0300 Subject: [PATCH 15/16] Follow naming pattern in `code`, `more` edit modules --- core-blocks/code/edit.js | 3 ++- core-blocks/code/edit.native.js | 2 +- core-blocks/more/edit.native.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/core-blocks/code/edit.js b/core-blocks/code/edit.js index 8dd4f95078632..984c11fc0c13c 100644 --- a/core-blocks/code/edit.js +++ b/core-blocks/code/edit.js @@ -1,3 +1,4 @@ + /** * WordPress dependencies */ @@ -9,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import './editor.scss'; import { PlainText } from '@wordpress/editor'; -export default function edit( { attributes, setAttributes, className } ) { +export default function CodeEdit( { attributes, setAttributes, className } ) { return ( <div className={ className }> <PlainText diff --git a/core-blocks/code/edit.native.js b/core-blocks/code/edit.native.js index f9e745e75a260..39f31b496a206 100644 --- a/core-blocks/code/edit.native.js +++ b/core-blocks/code/edit.native.js @@ -12,7 +12,7 @@ import { PlainText } from '@wordpress/editor'; // Note: styling is applied directly to the (nested) PlainText component. Web-side components // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet. -export default function edit( { attributes, setAttributes, style } ) { +export default function CodeEdit( { attributes, setAttributes, style } ) { return ( <View> <PlainText diff --git a/core-blocks/more/edit.native.js b/core-blocks/more/edit.native.js index 7a42817f78729..d63d1f5b0b666 100644 --- a/core-blocks/more/edit.native.js +++ b/core-blocks/more/edit.native.js @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n'; import { PlainText } from '@wordpress/editor'; import styles from './editor.scss'; -export default function edit( { attributes, setAttributes } ) { +export default function MoreEdit( { attributes, setAttributes } ) { const { customText } = attributes; const defaultText = __( 'Read more' ); const value = customText !== undefined ? customText : defaultText; From 70fa4e138ab60b516600fd970f17803e620d805f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= <grzegorz.ziolkowski@automattic.com> Date: Tue, 8 May 2018 10:54:08 +0200 Subject: [PATCH 16/16] Core blocks: Remove empty line from Code edit --- core-blocks/code/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/core-blocks/code/edit.js b/core-blocks/code/edit.js index 984c11fc0c13c..be2828c5912f4 100644 --- a/core-blocks/code/edit.js +++ b/core-blocks/code/edit.js @@ -1,4 +1,3 @@ - /** * WordPress dependencies */