From 39e9229638cb7555e990bcc56098390b705f9868 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Mon, 12 Jun 2017 17:57:33 +0100 Subject: [PATCH 1/6] Add re-usable CSS classes for inspector controls. --- blocks/inspector-controls/index.js | 5 +++++ .../inspector-controls/{text-control => }/style.scss | 8 ++++---- blocks/inspector-controls/text-control/index.js | 11 +++-------- 3 files changed, 12 insertions(+), 12 deletions(-) rename blocks/inspector-controls/{text-control => }/style.scss (54%) diff --git a/blocks/inspector-controls/index.js b/blocks/inspector-controls/index.js index a17de3acc56d8e..307f32dc9a6be5 100644 --- a/blocks/inspector-controls/index.js +++ b/blocks/inspector-controls/index.js @@ -3,6 +3,11 @@ */ import { Fill } from 'react-slot-fill'; +/** + * Internal dependencies + */ +import './style.scss'; + export default function InspectorControls( { children } ) { return ( diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/style.scss similarity index 54% rename from blocks/inspector-controls/text-control/style.scss rename to blocks/inspector-controls/style.scss index f211160c5558b7..aa702fbdb40dad 100644 --- a/blocks/inspector-controls/text-control/style.scss +++ b/blocks/inspector-controls/style.scss @@ -1,14 +1,14 @@ -.blocks-text-control { +.blocks-inspector-control { margin-bottom: 10px; } -.blocks-text-control__label { +.blocks-inspector-control__label { display: block; font-weight: 500; margin-bottom: 5px; } -.blocks-text-control__input { +.blocks-inspector-control__input { width: 100%; padding: 6px 10px; -} +} \ No newline at end of file diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js index a4a2cc80ce3997..a88fb64501f723 100644 --- a/blocks/inspector-controls/text-control/index.js +++ b/blocks/inspector-controls/text-control/index.js @@ -3,19 +3,14 @@ */ import { withInstanceId } from 'components'; -/** - * Internal dependencies - */ -import './style.scss'; - function TextControl( { label, value, instanceId, onChange } ) { const id = 'inspector-text-control-' + instanceId; const onChangeValue = ( event ) => onChange( event.target.value ); return ( -
- - +
+ +
); } From 4b0ff41ee51cc56296e42c0ed9aaaf97e56c8252 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Mon, 12 Jun 2017 18:05:12 +0100 Subject: [PATCH 2/6] =?UTF-8?q?Allow=20custom=20attributes=20for=20the=20i?= =?UTF-8?q?nspector=20text=20control.=20Default=20the=20type=20attribute?= =?UTF-8?q?=20to=20=E2=80=98text=E2=80=99=20to=20inherit=20the=20WordPress?= =?UTF-8?q?=20CSS=20styles.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blocks/inspector-controls/text-control/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js index a88fb64501f723..1e217a2d844b38 100644 --- a/blocks/inspector-controls/text-control/index.js +++ b/blocks/inspector-controls/text-control/index.js @@ -3,14 +3,15 @@ */ import { withInstanceId } from 'components'; -function TextControl( { label, value, instanceId, onChange } ) { +function TextControl( { label, value, instanceId, onChange, ...attributes } ) { const id = 'inspector-text-control-' + instanceId; + const type = attributes.type || 'text'; const onChangeValue = ( event ) => onChange( event.target.value ); return (
- +
); } From 79711a50f47d41607a9417c7c6f713bd6a3980b0 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Mon, 12 Jun 2017 18:05:39 +0100 Subject: [PATCH 3/6] Add inspector range control. --- .../inspector-controls/range-control/index.js | 25 +++++++++++++++++++ .../range-control/style.scss | 10 ++++++++ blocks/library/gallery/index.js | 8 +++--- 3 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 blocks/inspector-controls/range-control/index.js create mode 100644 blocks/inspector-controls/range-control/style.scss diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js new file mode 100644 index 00000000000000..b946b509316f0f --- /dev/null +++ b/blocks/inspector-controls/range-control/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { withInstanceId } from 'components'; + +/** + * Internal dependencies + */ +import './style.scss'; + +function RangeControl( { label, value, instanceId, onChange, ...attributes } ) { + const id = 'inspector-range-control-' + instanceId; + + return ( +
+ +
+ + { value } +
+
+ ); +} + +export default withInstanceId( RangeControl ); diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss new file mode 100644 index 00000000000000..db7be2a3c66f3c --- /dev/null +++ b/blocks/inspector-controls/range-control/style.scss @@ -0,0 +1,10 @@ +.blocks-range-control { + display: flex; + + input[type="range"] { + width: 100%; + } + > span { + margin-left: 10px; + } +} \ No newline at end of file diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index aabfe75b178bb3..fcf1fd4e8fa046 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -13,6 +13,7 @@ import { Toolbar, Placeholder } from 'components'; import MediaUploadButton from '../../media-upload-button'; import InspectorControls from '../../inspector-controls'; +import RangeControl from '../../inspector-controls/range-control'; import GalleryImage from './gallery-image'; @@ -120,8 +121,7 @@ registerBlockType( 'core/gallery', { edit( { attributes, setAttributes, focus, id } ) { const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes; - const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); - const rangeId = `blocks-gallery-range-${ id }`; + const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); if ( images.length === 0 ) { const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } ); return ( @@ -156,9 +156,7 @@ registerBlockType( 'core/gallery', { ) ) } { focus && images.length > 1 && - - - {columns} + }
); From 858bd714cd47a45a1e776f7f283d8e2c144a5530 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Tue, 13 Jun 2017 14:58:57 +0100 Subject: [PATCH 4/6] * Change attributes to props. * Remove unused id. * Conform to CSS guideline naming conventions. --- blocks/inspector-controls/index.js | 5 ----- .../inspector-controls/range-control/index.js | 12 +++++------- .../inspector-controls/range-control/style.scss | 17 ++++++++--------- blocks/inspector-controls/text-control/index.js | 15 ++++++++++----- .../{ => text-control}/style.scss | 9 +++++---- blocks/library/gallery/index.js | 2 +- 6 files changed, 29 insertions(+), 31 deletions(-) rename blocks/inspector-controls/{ => text-control}/style.scss (54%) diff --git a/blocks/inspector-controls/index.js b/blocks/inspector-controls/index.js index 307f32dc9a6be5..a17de3acc56d8e 100644 --- a/blocks/inspector-controls/index.js +++ b/blocks/inspector-controls/index.js @@ -3,11 +3,6 @@ */ import { Fill } from 'react-slot-fill'; -/** - * Internal dependencies - */ -import './style.scss'; - export default function InspectorControls( { children } ) { return ( diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js index b946b509316f0f..63c526b841dc79 100644 --- a/blocks/inspector-controls/range-control/index.js +++ b/blocks/inspector-controls/range-control/index.js @@ -8,16 +8,14 @@ import { withInstanceId } from 'components'; */ import './style.scss'; -function RangeControl( { label, value, instanceId, onChange, ...attributes } ) { +function RangeControl( { label, value, instanceId, onChange, ...props } ) { const id = 'inspector-range-control-' + instanceId; return ( -
- -
- - { value } -
+
+ + + { value }
); } diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss index db7be2a3c66f3c..81b946ecd9393c 100644 --- a/blocks/inspector-controls/range-control/style.scss +++ b/blocks/inspector-controls/range-control/style.scss @@ -1,10 +1,9 @@ .blocks-range-control { - display: flex; - - input[type="range"] { - width: 100%; - } - > span { - margin-left: 10px; - } -} \ No newline at end of file + margin-bottom: 10px; +} + +.blocks-range-control__label { + display: block; + font-weight: 500; + margin-bottom: 5px; +} diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js index 1e217a2d844b38..39af5dc9e5c5ab 100644 --- a/blocks/inspector-controls/text-control/index.js +++ b/blocks/inspector-controls/text-control/index.js @@ -3,15 +3,20 @@ */ import { withInstanceId } from 'components'; -function TextControl( { label, value, instanceId, onChange, ...attributes } ) { +/** + * Internal dependencies + */ +import './style.scss'; + +function TextControl( { label, value, instanceId, onChange, ...props } ) { const id = 'inspector-text-control-' + instanceId; - const type = attributes.type || 'text'; + const type = props.type || 'text'; const onChangeValue = ( event ) => onChange( event.target.value ); return ( -
- - +
+ +
); } diff --git a/blocks/inspector-controls/style.scss b/blocks/inspector-controls/text-control/style.scss similarity index 54% rename from blocks/inspector-controls/style.scss rename to blocks/inspector-controls/text-control/style.scss index aa702fbdb40dad..be49efd08ff5cd 100644 --- a/blocks/inspector-controls/style.scss +++ b/blocks/inspector-controls/text-control/style.scss @@ -1,14 +1,15 @@ -.blocks-inspector-control { +.blocks-text-control { margin-bottom: 10px; } -.blocks-inspector-control__label { +.blocks-text-control__label { display: block; font-weight: 500; margin-bottom: 5px; } -.blocks-inspector-control__input { +.blocks-text-control__input { width: 100%; padding: 6px 10px; -} \ No newline at end of file +} + diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index fcf1fd4e8fa046..28673a5de7e4ed 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -119,7 +119,7 @@ registerBlockType( 'core/gallery', { } }, - edit( { attributes, setAttributes, focus, id } ) { + edit( { attributes, setAttributes, focus } ) { const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes; const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); if ( images.length === 0 ) { From 3a400b2784754b4f6f21547443d1acde3d092ee4 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Tue, 13 Jun 2017 15:09:38 +0100 Subject: [PATCH 5/6] Use default value/destructuring for the input type instead of defining a new constant. --- blocks/inspector-controls/text-control/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js index 39af5dc9e5c5ab..4294e20c321f8f 100644 --- a/blocks/inspector-controls/text-control/index.js +++ b/blocks/inspector-controls/text-control/index.js @@ -8,9 +8,8 @@ import { withInstanceId } from 'components'; */ import './style.scss'; -function TextControl( { label, value, instanceId, onChange, ...props } ) { +function TextControl( { label, value, instanceId, onChange, type = 'text', ...props } ) { const id = 'inspector-text-control-' + instanceId; - const type = props.type || 'text'; const onChangeValue = ( event ) => onChange( event.target.value ); return ( From 961be08c2c29076e6d2ce449be047954fbd137e2 Mon Sep 17 00:00:00 2001 From: Paul Wilde Date: Tue, 13 Jun 2017 15:12:13 +0100 Subject: [PATCH 6/6] Fixed whitespace vs tab issue. --- blocks/inspector-controls/range-control/index.js | 10 +++++----- blocks/library/gallery/index.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js index 63c526b841dc79..a596513fdd9ca0 100644 --- a/blocks/inspector-controls/range-control/index.js +++ b/blocks/inspector-controls/range-control/index.js @@ -12,11 +12,11 @@ function RangeControl( { label, value, instanceId, onChange, ...props } ) { const id = 'inspector-range-control-' + instanceId; return ( -
- - - { value } -
+
+ + + { value } +
); } diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 28673a5de7e4ed..3de6361aafd436 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -121,7 +121,7 @@ registerBlockType( 'core/gallery', { edit( { attributes, setAttributes, focus } ) { const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes; - const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); + const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); if ( images.length === 0 ) { const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } ); return ( @@ -156,7 +156,7 @@ registerBlockType( 'core/gallery', { ) ) } { focus && images.length > 1 && - + }
);