From db779edb2dddc3fb28a96ea24a6f39539a7a58bb Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 26 Jun 2017 13:08:56 +0200 Subject: [PATCH 01/27] Add checked attribute to FormToggle. --- components/form-toggle/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js index 20571ad5ef8753..8237e1d36cb612 100644 --- a/components/form-toggle/index.js +++ b/components/form-toggle/index.js @@ -28,6 +28,7 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true id={ id } type="checkbox" value={ checked } + checked={ checked } onChange={ onChange } /> { showHint && From bf75da706c65f2bdc32114bf5480c93b19e90068 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 26 Jun 2017 14:30:15 +0200 Subject: [PATCH 02/27] Drop the value attribute. --- components/form-toggle/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js index 8237e1d36cb612..4bb1c279be986a 100644 --- a/components/form-toggle/index.js +++ b/components/form-toggle/index.js @@ -27,7 +27,6 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true className="components-form-toggle__input" id={ id } type="checkbox" - value={ checked } checked={ checked } onChange={ onChange } /> From 88427ede8b879db5e54033b397b0e3c574acd074 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 26 Jun 2017 14:32:53 +0200 Subject: [PATCH 03/27] Fix test. --- components/form-toggle/test/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/form-toggle/test/index.js b/components/form-toggle/test/index.js index 72a8d15d3d0fbb..44598462ccc3bf 100644 --- a/components/form-toggle/test/index.js +++ b/components/form-toggle/test/index.js @@ -17,7 +17,6 @@ describe( 'FormToggle', () => { expect( formToggle.hasClass( 'components-form-toggle' ) ).to.be.true(); expect( formToggle.hasClass( 'is-checked' ) ).to.be.false(); expect( formToggle.type() ).to.equal( 'span' ); - expect( formToggle.find( '.components-form-toggle__input' ).prop( 'value' ) ).to.be.undefined(); expect( formToggle.find( '.components-form-toggle__hint' ).text() ).to.equal( 'Off' ); expect( formToggle.find( '.components-form-toggle__hint' ).prop( 'aria-hidden' ) ).to.be.true(); } ); @@ -25,7 +24,6 @@ describe( 'FormToggle', () => { it( 'should render a checked checkbox and change the accessability text to On when providing checked prop', () => { const formToggle = shallow( ); expect( formToggle.hasClass( 'is-checked' ) ).to.be.true(); - expect( formToggle.find( '.components-form-toggle__input' ).prop( 'value' ) ).to.be.true(); expect( formToggle.find( '.components-form-toggle__hint' ).text() ).to.equal( 'On' ); } ); From c01dc871ba814ab644543f138f4e429441344514 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 26 Jun 2017 14:44:58 +0200 Subject: [PATCH 04/27] Add tests for the checked prop. --- components/form-toggle/test/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/form-toggle/test/index.js b/components/form-toggle/test/index.js index 44598462ccc3bf..34500ccd1c6fe3 100644 --- a/components/form-toggle/test/index.js +++ b/components/form-toggle/test/index.js @@ -17,13 +17,15 @@ describe( 'FormToggle', () => { expect( formToggle.hasClass( 'components-form-toggle' ) ).to.be.true(); expect( formToggle.hasClass( 'is-checked' ) ).to.be.false(); expect( formToggle.type() ).to.equal( 'span' ); + expect( formToggle.find( '.components-form-toggle__input' ).prop( 'checked' ) ).to.be.undefined(); expect( formToggle.find( '.components-form-toggle__hint' ).text() ).to.equal( 'Off' ); expect( formToggle.find( '.components-form-toggle__hint' ).prop( 'aria-hidden' ) ).to.be.true(); } ); - it( 'should render a checked checkbox and change the accessability text to On when providing checked prop', () => { + it( 'should render a checked checkbox and change the accessibility text to On when providing checked prop', () => { const formToggle = shallow( ); expect( formToggle.hasClass( 'is-checked' ) ).to.be.true(); + expect( formToggle.find( '.components-form-toggle__input' ).prop( 'checked' ) ).to.be.true(); expect( formToggle.find( '.components-form-toggle__hint' ).text() ).to.equal( 'On' ); } ); From 8562c16985858194a1c7beb0f0ee2441e46ed9cd Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 29 Jun 2017 04:46:11 -0400 Subject: [PATCH 05/27] Load `word-count` and do not allow our `wp-utils` script to clobber it (#1571) --- lib/client-assets.php | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/client-assets.php b/lib/client-assets.php index 99f3036b835815..2942d0283d61a2 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -386,6 +386,13 @@ function gutenberg_scripts_and_styles( $hook ) { true // enqueue in the footer. ); + // Register `wp-utils` as a dependency of `word-count` to ensure that + // `wp-utils` doesn't clobbber `word-count`. See WordPress/gutenberg#1569. + $word_count_script = wp_scripts()->query( 'word-count' ); + array_push( $word_count_script->deps, 'wp-utils' ); + // Now load the `word-count` script from core. + wp_enqueue_script( 'word-count' ); + $post_id = null; if ( isset( $_GET['post_id'] ) && (int) $_GET['post_id'] > 0 ) { $post_id = (int) $_GET['post_id']; From 1b5a6c5286c62795fe984f11a833cb14bf0a850e Mon Sep 17 00:00:00 2001 From: dixitadusara Date: Thu, 29 Jun 2017 14:56:09 +0530 Subject: [PATCH 06/27] README.md file minor Changes --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3dc74731858965..f0af420c355bb4 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Please see [CONTRIBUTING.md](CONTRIBUTING.md). ## Why -One thing that sets WordPress apart from other systems is that it allows you to create as rich a post layout as you can imagine -- but only if you know HTML & CSS and build your own custom theme. By thinking of the editor as a tool to let you write rich posts, and in a few clicks create beautiful layouts, hopefully we can make people start to _love_ WordPress, as opposed to pick it because it's what everyone else uses to blog. +One thing that sets WordPress apart from other systems is that it allows you to create as rich a post layout as you can imagine -- but only if you know HTML & CSS and build your own custom theme. By thinking of the editor as a tool to let you write rich posts, and in a few clicks create beautiful layouts, hopefully, we can make people start to _love_ WordPress, as opposed to pick it because it's what everyone else uses to blog. ## Ingredients @@ -40,6 +40,6 @@ By showing critical UI in the body of the content, many can get their basic blog **Advanced Formatting** -When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default you'll see all your metaboxes right there. +When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default, you'll see all your metaboxes right there. Every block can be _inspected_ by clicking it. And every block has advanced layout options available in the inspector; text might have drop-cap, image might have fixed position scrolling. As such, block attributes fall in two camps — the most important ones available right on the block, advanced ones living in the sidebar inspector. From 7973c700a0d5266eb25bd4f0c4f3f81408c8d3a8 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 29 Jun 2017 12:01:06 +0200 Subject: [PATCH 07/27] Add CSS classes to the Gallery insert from media library button. --- blocks/library/gallery/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index f0cdf650157c0c..3a8066d9d7c7ca 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -97,6 +97,8 @@ registerBlockType( 'core/gallery', { if ( images.length === 0 ) { const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } ); + const uploadButtonProps = { isLarge: true }; + return [ controls, Date: Thu, 15 Jun 2017 11:51:48 +0200 Subject: [PATCH 08/27] Add base structure for rendering in Inspector --- blocks/library/latest-posts/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index b9b4f0a66f07ef..876f703c12ce95 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -10,6 +10,7 @@ import { __ } from 'i18n'; */ import { registerBlockType } from '../../api'; import { getLatestPosts } from './data.js'; +import InspectorControls from '../../inspector-controls'; registerBlockType( 'core/latestposts', { title: __( 'Latest Posts' ), @@ -51,15 +52,22 @@ registerBlockType( 'core/latestposts', { ); } - return ( -
+ const { focus } = this.props; + + return [ + focus && ( + + + + ), +
-
- ); +
, + ]; } componentWillUnmount() { From ac2489c6671c8f588561ea8104de2d8f17d7d6e4 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Thu, 15 Jun 2017 12:22:50 +0200 Subject: [PATCH 09/27] Add display post date toggle (not working atm) --- blocks/library/latest-posts/index.js | 30 ++++++++++++++++++++++---- blocks/library/latest-posts/style.scss | 6 ++++++ 2 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 blocks/library/latest-posts/style.scss diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 876f703c12ce95..acc7d10345b8d2 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -2,12 +2,13 @@ * WordPress dependencies */ import { Component } from 'element'; -import { Placeholder } from 'components'; +import { Placeholder, FormToggle } from 'components'; import { __ } from 'i18n'; /** * Internal dependencies */ +import './style.scss'; import { registerBlockType } from '../../api'; import { getLatestPosts } from './data.js'; import InspectorControls from '../../inspector-controls'; @@ -21,22 +22,32 @@ registerBlockType( 'core/latestposts', { defaultAttributes: { poststoshow: 5, + displayPostDate: false, }, edit: class extends Component { constructor() { super( ...arguments ); - const { poststoshow } = this.props.attributes; + const { poststoshow, displayPostDate } = this.props.attributes; this.state = { latestPosts: [], }; - this.latestPostsRequest = getLatestPosts( poststoshow ); + this.latestPostsRequest = getLatestPosts( poststoshow, displayPostDate ); this.latestPostsRequest .then( latestPosts => this.setState( { latestPosts } ) ); + + this.toggleDisplayPostDate = this.toggleDisplayPostDate.bind( this ); + } + + toggleDisplayPostDate() { + const { displayPostDate } = this.props.attributes; + const { setAttributes } = this.props; + + setAttributes( { displayPostDate: ! displayPostDate } ); } render() { @@ -53,11 +64,22 @@ registerBlockType( 'core/latestposts', { } const { focus } = this.props; + const { displayPostDate } = this.props.attributes; + + const displayPostDateId = 'post-date-toggle'; return [ focus && ( - +
+ + +
),
diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss new file mode 100644 index 00000000000000..4d6544e5015b26 --- /dev/null +++ b/blocks/library/latest-posts/style.scss @@ -0,0 +1,6 @@ +.editor-latest-posts__row { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; +} From 4a2a6a41fd828fb93cd83db7bae0a14272001ad4 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Thu, 15 Jun 2017 14:04:38 +0200 Subject: [PATCH 10/27] Make the display post date toggle working Props @jasmussen for design hints. --- blocks/library/latest-posts/index.js | 18 ++++++++++++++---- blocks/library/latest-posts/style.scss | 10 ++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index acc7d10345b8d2..493f954462c99e 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -4,6 +4,7 @@ import { Component } from 'element'; import { Placeholder, FormToggle } from 'components'; import { __ } from 'i18n'; +import moment from 'moment'; /** * Internal dependencies @@ -29,13 +30,13 @@ registerBlockType( 'core/latestposts', { constructor() { super( ...arguments ); - const { poststoshow, displayPostDate } = this.props.attributes; + const { poststoshow } = this.props.attributes; this.state = { latestPosts: [], }; - this.latestPostsRequest = getLatestPosts( poststoshow, displayPostDate ); + this.latestPostsRequest = getLatestPosts( poststoshow ); this.latestPostsRequest .then( latestPosts => this.setState( { latestPosts } ) ); @@ -83,9 +84,18 @@ registerBlockType( 'core/latestposts', { ),
-
, diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index 4d6544e5015b26..e5fc7a0a6b38b2 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -3,4 +3,14 @@ justify-content: space-between; align-items: center; padding-top: 20px; + + margin-bottom: 1em; +} + +.blocks-latest-posts .blocks-latest-posts__list { + padding-left: 1em; +} + +.blocks-latest-posts__post-date { + padding-left: 1em; } From 1d6fc6b6de67bf7dc7b855cdb8fcc9b1238f5257 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Thu, 15 Jun 2017 14:15:04 +0200 Subject: [PATCH 11/27] Remove question mark from "display post date" phrase --- blocks/library/latest-posts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 493f954462c99e..d189f4d2932282 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -73,7 +73,7 @@ registerBlockType( 'core/latestposts', { focus && (
- + Date: Thu, 15 Jun 2017 14:23:59 +0200 Subject: [PATCH 12/27] Add unique instance ids to the latest posts `edit` component --- blocks/library/latest-posts/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index d189f4d2932282..852eef6497ae33 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -5,6 +5,7 @@ import { Component } from 'element'; import { Placeholder, FormToggle } from 'components'; import { __ } from 'i18n'; import moment from 'moment'; +import { withInstanceId } from 'components'; /** * Internal dependencies @@ -26,7 +27,7 @@ registerBlockType( 'core/latestposts', { displayPostDate: false, }, - edit: class extends Component { + edit: withInstanceId( class extends Component { constructor() { super( ...arguments ); @@ -64,10 +65,10 @@ registerBlockType( 'core/latestposts', { ); } - const { focus } = this.props; + const { focus, instanceId } = this.props; const { displayPostDate } = this.props.attributes; - const displayPostDateId = 'post-date-toggle'; + const displayPostDateId = `post-date-toggle-${ instanceId }`; return [ focus && ( @@ -107,7 +108,7 @@ registerBlockType( 'core/latestposts', { this.latestPostsRequest.abort(); } } - }, + } ), save() { return null; From 340567a0b587099e071547e8c35f9c6603f9ddd1 Mon Sep 17 00:00:00 2001 From: Alexandra Nyitraiova Date: Thu, 15 Jun 2017 15:17:59 +0200 Subject: [PATCH 13/27] Add first version of number-of-posts-to-show Inspector option --- blocks/library/latest-posts/index.js | 35 ++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 852eef6497ae33..3fa23b66d6a855 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -30,6 +30,7 @@ registerBlockType( 'core/latestposts', { edit: withInstanceId( class extends Component { constructor() { super( ...arguments ); + this.changePostsToShow = this.changePostsToShow.bind(this); const { poststoshow } = this.props.attributes; @@ -52,6 +53,33 @@ registerBlockType( 'core/latestposts', { setAttributes( { displayPostDate: ! displayPostDate } ); } + componentWillReceiveProps(nextProps) { + const { poststoshow: postToShowCurrent } = this.props.attributes; + let { poststoshow: postToShowNext } = nextProps.attributes; + const { setAttributes } = this.props; + + postToShowNext = parseInt( postToShowNext ); + + if( postToShowCurrent === postToShowNext ) { + return; + } + + if( !isNaN(postToShowNext) && postToShowNext > 0 && postToShowNext <= 100 ) { + this.latestPostsRequest = getLatestPosts( postToShowNext ); + + this.latestPostsRequest + .then( latestPosts => this.setState( { latestPosts } ) ); + + setAttributes( { poststoshow: postToShowNext } ); + } + } + + changePostsToShow( postsToShow ) { + const { setAttributes } = this.props; + + setAttributes( { poststoshow: postsToShow } ); + } + render() { const { latestPosts } = this.state; @@ -82,6 +110,13 @@ registerBlockType( 'core/latestposts', { showHint={ false } />
+ + this.changePostsToShow( this.refs.poststoshow.value ) } + /> ),
From 809942311e50a335135184dc0404f31495b232c4 Mon Sep 17 00:00:00 2001 From: Alexandra Nyitraiova Date: Thu, 15 Jun 2017 16:38:45 +0200 Subject: [PATCH 14/27] Refactor code according eslint --- blocks/library/latest-posts/index.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 3fa23b66d6a855..0d9c0d6b62547b 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -2,10 +2,9 @@ * WordPress dependencies */ import { Component } from 'element'; -import { Placeholder, FormToggle } from 'components'; +import { Placeholder, FormToggle, withInstanceId } from 'components'; import { __ } from 'i18n'; import moment from 'moment'; -import { withInstanceId } from 'components'; /** * Internal dependencies @@ -30,7 +29,7 @@ registerBlockType( 'core/latestposts', { edit: withInstanceId( class extends Component { constructor() { super( ...arguments ); - this.changePostsToShow = this.changePostsToShow.bind(this); + this.changePostsToShow = this.changePostsToShow.bind( this ); const { poststoshow } = this.props.attributes; @@ -53,18 +52,18 @@ registerBlockType( 'core/latestposts', { setAttributes( { displayPostDate: ! displayPostDate } ); } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps( nextProps ) { const { poststoshow: postToShowCurrent } = this.props.attributes; let { poststoshow: postToShowNext } = nextProps.attributes; const { setAttributes } = this.props; postToShowNext = parseInt( postToShowNext ); - if( postToShowCurrent === postToShowNext ) { + if ( postToShowCurrent === postToShowNext ) { return; } - if( !isNaN(postToShowNext) && postToShowNext > 0 && postToShowNext <= 100 ) { + if ( ! isNaN( postToShowNext ) && postToShowNext > 0 && postToShowNext <= 100 ) { this.latestPostsRequest = getLatestPosts( postToShowNext ); this.latestPostsRequest @@ -77,7 +76,7 @@ registerBlockType( 'core/latestposts', { changePostsToShow( postsToShow ) { const { setAttributes } = this.props; - setAttributes( { poststoshow: postsToShow } ); + setAttributes( { poststoshow: postsToShow } ); } render() { @@ -97,6 +96,7 @@ registerBlockType( 'core/latestposts', { const { displayPostDate } = this.props.attributes; const displayPostDateId = `post-date-toggle-${ instanceId }`; + const postToShowId = `post-to-show-${ instanceId }`; return [ focus && ( @@ -110,12 +110,13 @@ registerBlockType( 'core/latestposts', { showHint={ false } />
- + this.changePostsToShow( this.refs.poststoshow.value ) } + value={ this.props.attributes.poststoshow } + ref={ postToShowId } + id={ postToShowId } + onChange={ () => this.changePostsToShow( this.refs[ postToShowId ].value ) } /> ), From 324f5a896a6b56e3226ff44ad29c6a22a8deb205 Mon Sep 17 00:00:00 2001 From: Rastislav Lamos Date: Thu, 15 Jun 2017 17:10:45 +0200 Subject: [PATCH 15/27] Fix fixtures --- blocks/test/fixtures/core-latestposts.html | 2 +- blocks/test/fixtures/core-latestposts.json | 3 ++- blocks/test/fixtures/core-latestposts.serialized.html | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/blocks/test/fixtures/core-latestposts.html b/blocks/test/fixtures/core-latestposts.html index 41ab4bb453f324..44972fd76efc7a 100644 --- a/blocks/test/fixtures/core-latestposts.html +++ b/blocks/test/fixtures/core-latestposts.html @@ -1 +1 @@ - + diff --git a/blocks/test/fixtures/core-latestposts.json b/blocks/test/fixtures/core-latestposts.json index 619edde2c7b2c0..64ea6fc63157ab 100644 --- a/blocks/test/fixtures/core-latestposts.json +++ b/blocks/test/fixtures/core-latestposts.json @@ -3,7 +3,8 @@ "uid": "_uid_0", "name": "core/latestposts", "attributes": { - "poststoshow": 5 + "poststoshow": 5, + "displayPostDate": false } } ] diff --git a/blocks/test/fixtures/core-latestposts.serialized.html b/blocks/test/fixtures/core-latestposts.serialized.html index 41ab4bb453f324..44972fd76efc7a 100644 --- a/blocks/test/fixtures/core-latestposts.serialized.html +++ b/blocks/test/fixtures/core-latestposts.serialized.html @@ -1 +1 @@ - + From 7c41c3e27806f80d6e1d9106a1dfb3667f608ebd Mon Sep 17 00:00:00 2001 From: Alexandra Nyitraiova Date: Thu, 15 Jun 2017 17:10:25 +0200 Subject: [PATCH 16/27] Style "number of posts to show" row --- blocks/library/latest-posts/index.js | 19 +++++++++++-------- blocks/library/latest-posts/style.scss | 7 +++++++ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 0d9c0d6b62547b..9c78b4b02956c7 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -110,14 +110,17 @@ registerBlockType( 'core/latestposts', { showHint={ false } />
- - this.changePostsToShow( this.refs[ postToShowId ].value ) } - /> +
+ + this.changePostsToShow( this.refs[ postToShowId ].value ) } + /> +
),
diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index e5fc7a0a6b38b2..53f5494d44fab4 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -14,3 +14,10 @@ .blocks-latest-posts__post-date { padding-left: 1em; } + +.editor-latest-posts__input { + width: 3em; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; +} \ No newline at end of file From bb85c8b6f46f929309d7e52507fa1ef90b1549c4 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 23 Jun 2017 11:56:59 +0200 Subject: [PATCH 17/27] Tweak the post date display a little bit. --- blocks/library/latest-posts/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index 53f5494d44fab4..9abf2d06be8ba7 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -12,7 +12,9 @@ } .blocks-latest-posts__post-date { - padding-left: 1em; + display: block; + color: $dark-gray-100; + font-size: $default-font-size; } .editor-latest-posts__input { @@ -20,4 +22,4 @@ -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; -} \ No newline at end of file +} From b1d7fbf771f861bdd06d152bd09b2dd0c62f93d8 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 29 Jun 2017 11:15:54 +0200 Subject: [PATCH 18/27] Adjust parseInt and add min max to input --- blocks/library/latest-posts/index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 9c78b4b02956c7..3bee207948848a 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -14,6 +14,9 @@ import { registerBlockType } from '../../api'; import { getLatestPosts } from './data.js'; import InspectorControls from '../../inspector-controls'; +const MIN_POSTS = 1; +const MAX_POSTS = 100; + registerBlockType( 'core/latestposts', { title: __( 'Latest Posts' ), @@ -54,16 +57,14 @@ registerBlockType( 'core/latestposts', { componentWillReceiveProps( nextProps ) { const { poststoshow: postToShowCurrent } = this.props.attributes; - let { poststoshow: postToShowNext } = nextProps.attributes; + const { poststoshow: postToShowNext } = nextProps.attributes; const { setAttributes } = this.props; - postToShowNext = parseInt( postToShowNext ); - if ( postToShowCurrent === postToShowNext ) { return; } - if ( ! isNaN( postToShowNext ) && postToShowNext > 0 && postToShowNext <= 100 ) { + if ( postToShowNext >= MIN_POSTS && postToShowNext <= MAX_POSTS ) { this.latestPostsRequest = getLatestPosts( postToShowNext ); this.latestPostsRequest @@ -76,7 +77,7 @@ registerBlockType( 'core/latestposts', { changePostsToShow( postsToShow ) { const { setAttributes } = this.props; - setAttributes( { poststoshow: postsToShow } ); + setAttributes( { poststoshow: parseInt( postsToShow, 10 ) || 0 } ); } render() { @@ -113,7 +114,9 @@ registerBlockType( 'core/latestposts', {
Date: Thu, 29 Jun 2017 11:33:46 +0200 Subject: [PATCH 19/27] Use common inspector controls --- blocks/library/latest-posts/index.js | 48 ++++++++++---------------- blocks/library/latest-posts/style.scss | 16 --------- 2 files changed, 19 insertions(+), 45 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 3bee207948848a..46a359b452a033 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { Component } from 'element'; -import { Placeholder, FormToggle, withInstanceId } from 'components'; +import { Placeholder } from 'components'; import { __ } from 'i18n'; import moment from 'moment'; @@ -13,6 +13,8 @@ import './style.scss'; import { registerBlockType } from '../../api'; import { getLatestPosts } from './data.js'; import InspectorControls from '../../inspector-controls'; +import TextControl from '../../inspector-controls/text-control'; +import ToggleControl from '../../inspector-controls/toggle-control'; const MIN_POSTS = 1; const MAX_POSTS = 100; @@ -29,7 +31,7 @@ registerBlockType( 'core/latestposts', { displayPostDate: false, }, - edit: withInstanceId( class extends Component { + edit: class extends Component { constructor() { super( ...arguments ); this.changePostsToShow = this.changePostsToShow.bind( this ); @@ -93,37 +95,25 @@ registerBlockType( 'core/latestposts', { ); } - const { focus, instanceId } = this.props; + const { focus } = this.props; const { displayPostDate } = this.props.attributes; - const displayPostDateId = `post-date-toggle-${ instanceId }`; - const postToShowId = `post-to-show-${ instanceId }`; - return [ focus && ( -
- - -
-
- - this.changePostsToShow( this.refs[ postToShowId ].value ) } - /> -
+ + this.changePostsToShow( value ) } + /> ),
@@ -150,7 +140,7 @@ registerBlockType( 'core/latestposts', { this.latestPostsRequest.abort(); } } - } ), + }, save() { return null; diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index 9abf2d06be8ba7..ae1705d0361e5f 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -1,12 +1,3 @@ -.editor-latest-posts__row { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 20px; - - margin-bottom: 1em; -} - .blocks-latest-posts .blocks-latest-posts__list { padding-left: 1em; } @@ -16,10 +7,3 @@ color: $dark-gray-100; font-size: $default-font-size; } - -.editor-latest-posts__input { - width: 3em; - -webkit-border-radius: 0.3em; - -moz-border-radius: 0.3em; - border-radius: 0.3em; -} From e37894c95c6e196b983510a683a5fae0ba355921 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 29 Jun 2017 12:00:27 +0200 Subject: [PATCH 20/27] Fix block padding + wrapping --- blocks/library/latest-posts/index.js | 28 +++++++++++--------------- blocks/library/latest-posts/style.scss | 6 +++--- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 46a359b452a033..96a395087acbf3 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -116,22 +116,18 @@ registerBlockType( 'core/latestposts', { /> ), -
-
    - { latestPosts.map( ( post, i ) => -
  • - { post.title.rendered } - { displayPostDate && post.date_gmt && - ( - - { moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) } - - ) - } -
    • - ) } -
-
, +
    + { latestPosts.map( ( post, i ) => +
  • + { post.title.rendered } + { displayPostDate && post.date_gmt && + + { moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) } + + } +
    • + ) } +
, ]; } diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index ae1705d0361e5f..08ff5aab784e01 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -1,8 +1,8 @@ -.blocks-latest-posts .blocks-latest-posts__list { - padding-left: 1em; +div[data-type="core/latestposts"] .wp-block-latestposts { + padding-left: 2.5em; } -.blocks-latest-posts__post-date { +.wp-block-latestposts__post-date { display: block; color: $dark-gray-100; font-size: $default-font-size; From f54936b24611cf948c0eb4d78a2118c067021568 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Thu, 29 Jun 2017 14:20:30 +0200 Subject: [PATCH 21/27] Target direct descendants when hiding common blocks to insert. (#1583) --- editor/modes/visual-editor/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index e6767d4da4d41b..bb235daf4e643a 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -327,7 +327,7 @@ $sticky-bottom-offset: 20px; display: flex; align-items: baseline; - .editor-inserter__block { + > .editor-inserter__block { opacity: 0; transition: opacity 150ms; margin: 0 10px; @@ -335,8 +335,8 @@ $sticky-bottom-offset: 20px; font-family: $default-font; font-size: $default-font-size; } - &:hover .editor-inserter__block, - &:focus .editor-inserter__block { + &:hover > .editor-inserter__block, + &:focus > .editor-inserter__block { opacity: 1; } } From f12224f7ee98d569b95420176334be763d70d4fe Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 29 Jun 2017 15:05:12 +0200 Subject: [PATCH 22/27] Add gallery crop option in Inspector (#1545) * Crop gallery images by default This is a work in progress. Pushing so as to test in IE. * Polish inspector controls generally. This is pending more improvements happening separately in #1440 and #1523. * Make the crop actually work. * Enable crop by default. Props @mtias. * Move to is-cropped classname. * Fix for IE11. * Revert back to object-fit. --- blocks/library/gallery/index.js | 13 ++++++++++++- blocks/library/gallery/style.scss | 15 +++++++++++++++ editor/sidebar/style.scss | 6 ++++++ 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 3a8066d9d7c7ca..a4b1d13a85d9b0 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -12,6 +12,7 @@ import { registerBlockType, query as hpq } from '../../api'; import MediaUploadButton from '../../media-upload-button'; import InspectorControls from '../../inspector-controls'; import RangeControl from '../../inspector-controls/range-control'; +import ToggleControl from '../../inspector-controls/toggle-control'; import BlockControls from '../../block-controls'; import BlockAlignmentToolbar from '../../block-alignment-toolbar'; import GalleryImage from './gallery-image'; @@ -75,6 +76,8 @@ registerBlockType( 'core/gallery', { const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes; const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } ); const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); + const { imageCrop = true } = attributes; + const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } ); const controls = ( focus && ( @@ -124,6 +127,9 @@ registerBlockType( 'core/gallery', { controls, focus && images.length > 1 && ( +

Image galleries are a great way to share groups of pictures on your site.

+
+

{ __( 'Gallery Settings' ) }

+ ), -
+
{ images.map( ( img ) => ( ) ) } diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index b0f33ac630eb1c..e4b7d4d33bd012 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -17,6 +17,21 @@ } } + // Cropped + &.is-cropped .blocks-gallery-image { + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + // Alas, IE11+ doesn't support object-fit + _:-ms-lang(x), img { + height: auto; + width: auto; + } + } + &.columns-1 figure { width: calc(100% / 1 - 2 * 8px); } diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss index 6ea3385238b249..04dd183889aefa 100644 --- a/editor/sidebar/style.scss +++ b/editor/sidebar/style.scss @@ -33,6 +33,12 @@ font-size: $default-font-size; } + hr { + border-top: none; + border-bottom: 1px solid $light-gray-500; + margin: 1.5em 0; + } + ul.components-toolbar { box-shadow: none; margin-bottom: $panel-padding; From 339a20d3394f322da00c248c9f433e0582852883 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Thu, 29 Jun 2017 15:36:41 +0200 Subject: [PATCH 23/27] Inserter: add tabs. (#1582) * Inserter: add tabs. - Recent, blocks, and embeds. - Displays different sets of blocks. Don't show category header for single category display. * Add bottom border to search item. * Polish the inserter tabs. Address feedback. * Relax paddings and margins. Also restyle the separator heading. * Fix neutral grays. --- components/popover/style.scss | 2 +- editor/assets/stylesheets/_z-index.scss | 2 + editor/inserter/menu.js | 111 ++++++++++++++++++------ editor/inserter/style.scss | 52 ++++++++--- 4 files changed, 128 insertions(+), 39 deletions(-) diff --git a/components/popover/style.scss b/components/popover/style.scss index 3c01adcbf26379..51537e03dcae60 100644 --- a/components/popover/style.scss +++ b/components/popover/style.scss @@ -8,7 +8,7 @@ right: 0; @include break-medium { - width: 280px; + width: 300px; left: -122px; right: auto; height: auto; diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 4f33cb775ce62f..50c4b1896453d1 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -6,6 +6,8 @@ $z-layers: ( '.editor-visual-editor__block-controls': 1, '.components-form-toggle__input': 1, '.editor-format-list__menu': 1, + '.editor-inserter__tabs': 1, + '.editor-inserter__tab.is-active': 1, '.editor-sidebar': 19, '.editor-header': 20, '.editor-post-visibility__dialog': 30, diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 7a75ee4e07b64f..22b91ba459b25f 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -26,6 +26,7 @@ class InserterMenu extends Component { this.state = { filterValue: '', currentFocus: 'search', + tab: 'recent', }; this.filter = this.filter.bind( this ); this.isShownBlock = this.isShownBlock.bind( this ); @@ -224,6 +225,28 @@ class InserterMenu extends Component { this.changeMenuSelection( 'search' ); } + getBlockItem( block ) { + return ( + + ); + } + + switchTab( tab ) { + this.setState( { tab: tab } ); + } + render() { const { position, instanceId } = this.props; const visibleBlocksByCategory = this.getVisibleBlocksByCategory( getBlockTypes() ); @@ -246,42 +269,78 @@ class InserterMenu extends Component { tabIndex="-1" />
- { getCategories() - .map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && ( -
- - ) ) + ) ) }
+
+ + + +
); /* eslint-enable jsx-a11y/no-autofocus */ diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index 4596d96815f0fc..70a719f2571220 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -36,8 +36,7 @@ height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } ); @include break-medium { - height: auto; - max-height: 50vh; + height: 240px; } overflow: auto; @@ -54,7 +53,7 @@ input[type="search"].editor-inserter__search { margin: 0; box-shadow: none; border: 1px solid transparent; - border-top: 1px solid $light-gray-500; + border-bottom: 1px solid $light-gray-500; padding: 8px 11px; font-size: 13px; position: relative; @@ -69,11 +68,11 @@ input[type="search"].editor-inserter__search { .editor-inserter__category-blocks { display: flex; flex-flow: row wrap; - padding: 4px; + padding: 8px; } .editor-inserter__menu.is-bottom:after { - border-bottom-color: $light-gray-100; + border-bottom-color: $white; } .editor-inserter__block { @@ -82,7 +81,7 @@ input[type="search"].editor-inserter__search { font-size: 12px; color: $dark-gray-500; margin: 0; - padding: 8px; + padding: 12px 6px; align-items: center; cursor: pointer; border: none; @@ -111,11 +110,40 @@ input[type="search"].editor-inserter__search { .editor-inserter__separator { display: block; margin: 0; - padding: 4px 12px; - font-size: 11px; + padding: 12px 14px 0 14px; + font-size: $default-font-size; font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - background: $light-gray-100; - border-bottom: 1px solid $light-gray-500; +} + +.editor-inserter__tabs { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + z-index: z-index( '.editor-inserter__tabs' ); +} + +.editor-inserter__tab { + background: $light-gray-300; + border: none; + border-bottom: 2px solid transparent; + border-top: 2px solid transparent; + box-shadow: 0 0 0 1px $light-gray-500; + font-size: $default-font; + padding: 8px 8px; + width: 100%; + margin: 0; + color: $dark-gray-500; + + &.is-active { + background: $white; + border-bottom-color: $blue-medium-500; + position: relative; + z-index: z-index( '.editor-inserter__tab.is-active' ); + } + + &:focus { + box-shadow: $button-focus-style; + outline: none; + } } From e65a7cec921086e16038234b6e4ab4bb6811b2e9 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Thu, 29 Jun 2017 16:25:28 +0200 Subject: [PATCH 24/27] Inserter: fix missing keys. (#1587) --- editor/inserter/menu.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 22b91ba459b25f..fa93131cf9c447 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -278,6 +278,7 @@ class InserterMenu extends Component { role="menu" tabIndex="0" aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` } + key={ category.slug } > { visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
@@ -315,6 +316,7 @@ class InserterMenu extends Component { role="menu" tabIndex="0" aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` } + key={ category.slug } > { visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
From de00f7025ce3ca2e7288c04bb70c2f1130b4edae Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 28 Jun 2017 16:21:54 +0100 Subject: [PATCH 25/27] Chrome: Show notices on post save, schedule, update --- components/notice/style.scss | 3 +- editor/effects.js | 60 +++++++++++++++++++++++++++++++----- 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/components/notice/style.scss b/components/notice/style.scss index 745d259bf42294..a57109491d4683 100644 --- a/components/notice/style.scss +++ b/components/notice/style.scss @@ -2,6 +2,7 @@ position: fixed; top: 40px; right: 0; - width: 300px; + min-width: 300px; + max-width: 400px; z-index: z-index( ".components-notice-list" ); } diff --git a/editor/effects.js b/editor/effects.js index cc21fe829c98bc..948c8ead3163cd 100644 --- a/editor/effects.js +++ b/editor/effects.js @@ -14,9 +14,9 @@ import { __ } from 'i18n'; * Internal dependencies */ import { getGutenbergURL, getWPAdminURL } from './utils/url'; -import { focusBlock, replaceBlocks } from './actions'; +import { focusBlock, replaceBlocks, successNotice, errorNotice } from './actions'; import { - getCurrentPostId, + getCurrentPost, getCurrentPostType, getBlocks, getPostEdits, @@ -26,8 +26,8 @@ export default { REQUEST_POST_UPDATE( action, store ) { const { dispatch, getState } = store; const state = getState(); - const postId = getCurrentPostId( state ); - const isNew = ! postId; + const post = getCurrentPost( state ); + const isNew = ! post.id; const edits = getPostEdits( state ); const toSend = { ...edits, @@ -36,7 +36,7 @@ export default { const transactionId = uniqueId(); if ( ! isNew ) { - toSend.id = postId; + toSend.id = post.id; } dispatch( { @@ -56,6 +56,7 @@ export default { } ); dispatch( { type: 'REQUEST_POST_UPDATE_SUCCESS', + previousPost: post, post: newPost, isNew, optimist: { type: COMMIT, id: transactionId }, @@ -67,13 +68,40 @@ export default { code: 'unknown_error', message: __( 'An unknown error occurred.' ), } ), + post, edits, optimist: { type: REVERT, id: transactionId }, } ); } ); }, - REQUEST_POST_UPDATE_SUCCESS( action ) { - const { post, isNew } = action; + REQUEST_POST_UPDATE_SUCCESS( action, store ) { + const { previousPost, post, isNew } = action; + const { dispatch } = store; + + const publishStatus = [ 'publish', 'private', 'future' ]; + const isPublished = publishStatus.indexOf( previousPost.status ) !== -1; + const messages = { + publish: __( 'Post published!' ), + 'private': __( 'Post published privately!' ), + future: __( 'Post schduled!' ), + }; + + // If we save a non published post, we don't show any notice + // If we publish/schedule a post, we show the corresponding publish message + // Unless we show an update notice + if ( isPublished || publishStatus.indexOf( post.status ) !== -1 ) { + const noticeMessage = ! isPublished && publishStatus.indexOf( post.status ) !== -1 + ? messages[ post.status ] + : __( 'Post updated!' ); + dispatch( successNotice( +

+ { noticeMessage } + { ' ' } + { __( 'View post' ) } +

+ ) ); + } + if ( ! isNew ) { return; } @@ -82,6 +110,24 @@ export default { } ); window.history.replaceState( {}, 'Post ' + post.id, newURL ); }, + REQUEST_POST_UPDATE_FAILURE( action, store ) { + const { post, edits } = action; + const { dispatch } = store; + + const publishStatus = [ 'publish', 'private', 'future' ]; + const isPublished = publishStatus.indexOf( post.status ) !== -1; + // If the post was being published, we show the corresponding publish error message + // Unless we publish an "updating failed" message + const messages = { + publish: __( 'Publishing failed' ), + 'private': __( 'Publishing failed' ), + future: __( 'Scheduling failed' ), + }; + const noticeMessage = ! isPublished && publishStatus.indexOf( edits.status ) !== -1 + ? messages[ edits.status ] + : __( 'Updating failed' ); + dispatch( errorNotice( noticeMessage ) ); + }, TRASH_POST( action, store ) { const { dispatch, getState } = store; const { postId } = action; From 8dfc4c51d29c8bcfc799eb335a87085cf8ece5b9 Mon Sep 17 00:00:00 2001 From: Edwin Cromley Date: Thu, 29 Jun 2017 11:40:57 -0400 Subject: [PATCH 26/27] Allow build process to split css files for front end and backend. (#1418) Related to #963. This PR splits up some of our CSS build process to have seperate files generated for blocks and editor specific styles of blocks. Block specific styles are now loaded both on the front-end and back end. Styles that should appear on both are currently in a block.scss file. Styles added: wp-edit-blocks: blocks/build/edit-block.css wp-blocks: blocks/build/style.css Adding documentation about the build process, updating variable names, reducing duplication. Making the drop cap style work on the front end as well as gallery styles. --- blocks/library/gallery/block.scss | 58 ++++++++++++++++++++++++ blocks/library/gallery/index.js | 1 + blocks/library/gallery/style.scss | 60 ------------------------- blocks/library/text/block.scss | 16 +++++++ blocks/library/text/index.js | 8 ++-- docs/coding-guidelines.md | 10 +++++ lib/client-assets.php | 17 ++++++- webpack.config.js | 74 +++++++++++++++++++++++-------- 8 files changed, 162 insertions(+), 82 deletions(-) create mode 100644 blocks/library/gallery/block.scss create mode 100644 blocks/library/text/block.scss diff --git a/blocks/library/gallery/block.scss b/blocks/library/gallery/block.scss new file mode 100644 index 00000000000000..beffdefd70155b --- /dev/null +++ b/blocks/library/gallery/block.scss @@ -0,0 +1,58 @@ +.wp-block-gallery { + display: flex; + flex-wrap: wrap; + + &:not( .components-placeholder ) { + margin-right: -16px; + margin-bottom: -16px; + } + + .blocks-gallery-image { + flex-grow: 1; + margin: 0 16px 16px 0; + + img { + max-width: 100%; + } + } + + // Cropped + &.is-cropped .blocks-gallery-image { + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + // Alas, IE11+ doesn't support object-fit + _:-ms-lang(x), img { + height: auto; + width: auto; + } + } + + &.columns-1 figure { + width: calc(100% / 1 - 2 * 8px); + } + &.columns-2 figure { + width: calc(100% / 2 - 3 * 8px); + } + &.columns-3 figure { + width: calc(100% / 3 - 4 * 8px); + } + &.columns-4 figure { + width: calc(100% / 4 - 5 * 8px); + } + &.columns-5 figure { + width: calc(100% / 5 - 6 * 8px); + } + &.columns-6 figure { + width: calc(100% / 6 - 7 * 8px); + } + &.columns-7 figure { + width: calc(100% / 7 - 8 * 8px); + } + &.columns-8 figure { + width: calc(100% / 8 - 9 * 8px); + } +} diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index a4b1d13a85d9b0..358429ad7e1ac0 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -8,6 +8,7 @@ import { Toolbar, Placeholder } from 'components'; * Internal dependencies */ import './style.scss'; +import './block.scss'; import { registerBlockType, query as hpq } from '../../api'; import MediaUploadButton from '../../media-upload-button'; import InspectorControls from '../../inspector-controls'; diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index e4b7d4d33bd012..79ba13dfe958fe 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -1,63 +1,3 @@ - -.wp-block-gallery { - display: flex; - flex-wrap: wrap; - - &:not( .components-placeholder ) { - margin-right: -16px; - margin-bottom: -16px; - } - - .blocks-gallery-image { - flex-grow: 1; - margin: 0 16px 16px 0; - - img { - max-width: 100%; - } - } - - // Cropped - &.is-cropped .blocks-gallery-image { - img { - width: 100%; - height: 100%; - object-fit: cover; - } - - // Alas, IE11+ doesn't support object-fit - _:-ms-lang(x), img { - height: auto; - width: auto; - } - } - - &.columns-1 figure { - width: calc(100% / 1 - 2 * 8px); - } - &.columns-2 figure { - width: calc(100% / 2 - 3 * 8px); - } - &.columns-3 figure { - width: calc(100% / 3 - 4 * 8px); - } - &.columns-4 figure { - width: calc(100% / 4 - 5 * 8px); - } - &.columns-5 figure { - width: calc(100% / 5 - 6 * 8px); - } - &.columns-6 figure { - width: calc(100% / 6 - 7 * 8px); - } - &.columns-7 figure { - width: calc(100% / 7 - 8 * 8px); - } - &.columns-8 figure { - width: calc(100% / 8 - 9 * 8px); - } -} - .wp-block-gallery.is-placeholder { margin: -15px; padding: 6em 0; diff --git a/blocks/library/text/block.scss b/blocks/library/text/block.scss new file mode 100644 index 00000000000000..1cc6bd7b2ff4da --- /dev/null +++ b/blocks/library/text/block.scss @@ -0,0 +1,16 @@ +p.has-drop-cap { + &:first-letter { + float: left; + font-size: 4.1em; + line-height: 0.7; + font-family: serif; + font-weight: bold; + margin: .07em .23em 0 0; + text-transform: uppercase; + font-style: normal; + } +} + +p.has-drop-cap:not( :focus ) { + overflow: hidden; +} diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js index acdd6740d1b77c..3e1f27aaba9cd2 100644 --- a/blocks/library/text/index.js +++ b/blocks/library/text/index.js @@ -7,6 +7,7 @@ import { concatChildren } from 'element'; /** * Internal dependencies */ +import './block.scss'; import { registerBlockType, createBlock, query as hpq, setDefaultBlock } from '../../api'; import AlignmentToolbar from '../../alignment-toolbar'; import BlockControls from '../../block-controls'; @@ -85,13 +86,14 @@ registerBlockType( 'core/text', { }, save( { attributes } ) { - const { align, content } = attributes; + const { align, content, dropCap } = attributes; + const className = dropCap && 'has-drop-cap'; if ( ! align ) { - return

{ content }

; + return

{ content }

; } - return

{ content }

; + return

{ content }

; }, } ); diff --git a/docs/coding-guidelines.md b/docs/coding-guidelines.md index 3bc74b444c4ce0..8032bef4130d63 100644 --- a/docs/coding-guidelines.md +++ b/docs/coding-guidelines.md @@ -32,6 +32,16 @@ In all of the above cases, except in separating the top-level element from its d You may observe that these conventions adhere closely to the [BEM (Blocks, Elements, Modifiers)](http://getbem.com/introduction/) CSS methodology, with minor adjustments to the application of modifiers. +#### SCSS File Naming Conventions for Blocks + +The build process will split SCSS from within the blocks library directory into two separate CSS files when Webpack runs. + +Styles placed in a block.scss file will be built into `blocks/build/style.css`, to load on the front end theme as well as in the editor. + +All other SCSS files will be built into `blocks/build/edit-blocks.css`, to load **only in the editor**. + +Examples of styles that appear in both the theme and the editor include gallery columns and drop caps. + ## JavaScript ### Imports diff --git a/lib/client-assets.php b/lib/client-assets.php index 2942d0283d61a2..d13492e66f0058 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -120,6 +120,12 @@ function gutenberg_register_scripts_and_styles() { array(), filemtime( gutenberg_dir_path() . 'blocks/build/style.css' ) ); + wp_register_style( + 'wp-edit-blocks', + gutenberg_url( 'blocks/build/edit-blocks.css' ), + array(), + filemtime( gutenberg_dir_path() . 'blocks/build/edit-blocks.css' ) + ); } add_action( 'init', 'gutenberg_register_scripts_and_styles' ); @@ -453,8 +459,17 @@ function gutenberg_scripts_and_styles( $hook ) { wp_enqueue_style( 'wp-editor', gutenberg_url( 'editor/build/style.css' ), - array( 'wp-components', 'wp-blocks' ), + array( 'wp-components', 'wp-blocks', 'wp-edit-blocks' ), filemtime( gutenberg_dir_path() . 'editor/build/style.css' ) ); } add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' ); + +/** + * Handles the enqueueing of front end scripts and styles from Gutenberg. + */ +function gutenberg_frontend_scripts_and_styles() { + // Enqueue basic styles built out of Gutenberg through npm build. + wp_enqueue_style( 'wp-blocks' ); +} +add_action( 'wp_enqueue_scripts', 'gutenberg_frontend_scripts_and_styles' ); diff --git a/webpack.config.js b/webpack.config.js index c20462f582084c..2648adc0bd2481 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,6 +6,38 @@ const glob = require( 'glob' ); const webpack = require( 'webpack' ); const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +// Main CSS loader for everything but blocks.. +const mainCSSExtractTextPlugin = new ExtractTextPlugin( { + filename: './[name]/build/style.css', +} ); + +// CSS loader for styles specific to block editing. +const editBlocksCSSPlugin = new ExtractTextPlugin( { + filename: './blocks/build/edit-blocks.css', +} ); + +// CSS loader for styles specific to blocks in general. +const blocksCSSPlugin = new ExtractTextPlugin( { + filename: './blocks/build/style.css', +} ); + +// Configuration for the ExtractTextPlugin. +const extractConfig = { + use: [ + { loader: 'raw-loader' }, + { loader: 'postcss-loader' }, + { + loader: 'sass-loader', + query: { + includePaths: [ 'editor/assets/stylesheets' ], + data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";', + outputStyle: 'production' === process.env.NODE_ENV ? + 'compressed' : 'nested', + }, + }, + ], +}; + const entryPointNames = [ 'element', 'i18n', @@ -64,23 +96,29 @@ const config = { exclude: /node_modules/, use: 'babel-loader', }, + { + test: /block\.s?css$/, + include: [ + /blocks/, + ], + use: blocksCSSPlugin.extract( extractConfig ), + }, + { + test: /\.s?css$/, + include: [ + /blocks/, + ], + exclude: [ + /block\.s?css$/, + ], + use: editBlocksCSSPlugin.extract( extractConfig ), + }, { test: /\.s?css$/, - use: ExtractTextPlugin.extract( { - use: [ - { loader: 'raw-loader' }, - { loader: 'postcss-loader' }, - { - loader: 'sass-loader', - query: { - includePaths: [ 'editor/assets/stylesheets' ], - data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";', - outputStyle: 'production' === process.env.NODE_ENV ? - 'compressed' : 'nested', - }, - }, - ], - } ), + exclude: [ + /blocks/, + ], + use: mainCSSExtractTextPlugin.extract( extractConfig ), }, ], }, @@ -88,9 +126,9 @@ const config = { new webpack.DefinePlugin( { 'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV || 'development' ), } ), - new ExtractTextPlugin( { - filename: './[name]/build/style.css', - } ), + blocksCSSPlugin, + editBlocksCSSPlugin, + mainCSSExtractTextPlugin, new webpack.LoaderOptionsPlugin( { minimize: process.env.NODE_ENV === 'production', debug: process.env.NODE_ENV !== 'production', From e69877511e7380e6cf1ea9050f4c49d59bb21a84 Mon Sep 17 00:00:00 2001 From: Ahmad Awais Date: Thu, 29 Jun 2017 21:22:19 +0500 Subject: [PATCH 27/27] FIX Dead Link Wrong link for `element`'s readme! --- blocks/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/README.md b/blocks/README.md index 20ce547a07c0e2..b775b9776d4ebb 100644 --- a/blocks/README.md +++ b/blocks/README.md @@ -28,7 +28,7 @@ The following sections will describe what you'll need to include in `block.js` t Let's imagine you wanted to define a block to show a randomly generated image in a post's content using [lorempixel.com](http://lorempixel.com/). The service provides a choice of category and you'd like to offer this as an option when editing the post. -Take a step back and consider the ideal workflow for adding a new random image. After inserting the block, as a user I'd expect it to be shown in some empty state, with an option to choose a category in a select dropdown. Upon confirming my selection, a preview of the image should be shown next to the dropdown. At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content). This leads to the first requirement of describing a block: __you will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content__. You needn't worry about redundant effort here, as concepts of [Elements](../elements/README.md) and componentization provide an avenue for sharing common behaviors. +Take a step back and consider the ideal workflow for adding a new random image. After inserting the block, as a user I'd expect it to be shown in some empty state, with an option to choose a category in a select dropdown. Upon confirming my selection, a preview of the image should be shown next to the dropdown. At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content). This leads to the first requirement of describing a block: __you will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content__. You needn't worry about redundant effort here, as concepts of [Elements](../element/README.md) and componentization provide an avenue for sharing common behaviors. Now that we've considered user interaction, you should think about the underlying values that determine the markup generated by your block. In our example, the output is affected only when the category changes. Put another way: __the output of a block is a function of its attributes__. The category, a simple string, is the only thing we require to be able to generate the image we want to include in the published content. We call these underlying values of a block instance its _attributes_.