From 0b4c44d9b024b7ecde3eec9fa3c565d1f70878a7 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Sat, 27 Jul 2019 17:14:28 +0100 Subject: [PATCH 1/7] add color support to separator block --- packages/block-library/src/separator/edit.js | 70 ++++++++++++++++++- .../block-library/src/separator/style.scss | 2 +- 2 files changed, 68 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 26ca8d04f2295d..32b393ef1bf972 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -1,8 +1,72 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { HorizontalRule } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +import { + Component, +} from '@wordpress/element'; -export default function SeparatorEdit( { className } ) { - return ; +import { + compose, + withInstanceId, +} from '@wordpress/compose'; + +import { + HorizontalRule, +} from '@wordpress/components'; + +import { + InspectorControls, + withColors, + PanelColorSettings, +} from '@wordpress/block-editor'; + +class SeparatorEdit extends Component { + render() { + const { + backgroundColor, + setBackgroundColor, + className, + } = this.props; + return ( +
+ + + + + +
+ ); + } } + +export default compose( [ + withInstanceId, + withColors( 'backgroundColor', { textColor: 'color' } ), +] )( SeparatorEdit ); diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index 57175b5f83bedb..584b0018ac7e1f 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -17,7 +17,7 @@ &::before { content: "\00b7 \00b7 \00b7"; - color: $dark-gray-900; + color: currentColor; font-size: 20px; letter-spacing: 2em; padding-left: 2em; From ce2d57a18fe7381fc43e75161b75d279aea22bcd Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Sat, 27 Jul 2019 22:05:58 +0100 Subject: [PATCH 2/7] add color to frontend render --- packages/block-library/src/separator/save.js | 34 ++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index 72ddec8db51cee..d391a0eb43b3db 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -1,3 +1,33 @@ -export default function save() { - return
; +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + getColorClassName, +} from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { + backgroundColor, + customBackgroundColor, + } = attributes; + + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const separatorClasses = classnames( { + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + const separatorStyle = { + backgroundColor: backgroundClass ? undefined : customBackgroundColor, + }; + return
; } From 3cba3fdd04adf1478697c1e5ee820978ab24d967 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Sat, 27 Jul 2019 23:05:00 +0100 Subject: [PATCH 3/7] add support for dots style in frontend --- packages/block-library/src/separator/save.js | 5 ++++- packages/block-library/src/separator/style.scss | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index d391a0eb43b3db..fa760411b5d4b0 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -17,14 +17,17 @@ export default function save( { attributes } ) { } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + const textClass = getColorClassName( 'color', backgroundColor ); const separatorClasses = classnames( { - 'has-background': backgroundColor || customBackgroundColor, + 'has-text-color has-background': backgroundColor || customBackgroundColor, [ backgroundClass ]: backgroundClass, + [ textClass ]: textClass, } ); const separatorStyle = { backgroundColor: backgroundClass ? undefined : customBackgroundColor, + color: textClass ? undefined : customBackgroundColor, }; return
Date: Mon, 29 Jul 2019 12:21:27 +0100 Subject: [PATCH 4/7] fix review problems, update block.json file --- .../block-library/src/separator/block.json | 10 ++- packages/block-library/src/separator/edit.js | 87 +++++++------------ packages/block-library/src/separator/save.js | 27 +++--- .../block-library/src/separator/style.scss | 5 +- 4 files changed, 60 insertions(+), 69 deletions(-) diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 70060a329cdfd1..98bcbb9150609f 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -1,4 +1,12 @@ { "name": "core/separator", - "category": "layout" + "category": "layout", + "attributes": { + "color": { + "type": "string" + }, + "customColor": { + "type": "string" + } + } } diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 32b393ef1bf972..059eb61426dccc 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -7,66 +7,43 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; - -import { - Component, -} from '@wordpress/element'; - -import { - compose, - withInstanceId, -} from '@wordpress/compose'; - -import { - HorizontalRule, -} from '@wordpress/components'; - +import { HorizontalRule } from '@wordpress/components'; import { InspectorControls, withColors, PanelColorSettings, } from '@wordpress/block-editor'; -class SeparatorEdit extends Component { - render() { - const { - backgroundColor, - setBackgroundColor, - className, - } = this.props; - return ( -
- - - - - -
- ); - } +function SeparatorEdit( { color, setColor, className } ) { + return ( + <> + + + + + + + ); } -export default compose( [ - withInstanceId, - withColors( 'backgroundColor', { textColor: 'color' } ), -] )( SeparatorEdit ); +export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit ); diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index fa760411b5d4b0..d9b899486233c8 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -10,27 +10,32 @@ import { getColorClassName, } from '@wordpress/block-editor'; -export default function save( { attributes } ) { +export default function separatorSave( { attributes } ) { const { - backgroundColor, - customBackgroundColor, + color, + customColor, } = attributes; - const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - const textClass = getColorClassName( 'color', backgroundColor ); + // the hr support changing color using border-color, since border-color + // is not yet supported in the color palette, we use background-color + const backgroundClass = getColorClassName( 'background-color', color ); + // the dots styles uses text for the dots, to change those dots color is + // using color, not backgroundColor + const colorClass = getColorClassName( 'color', color ); const separatorClasses = classnames( { - 'has-text-color has-background': backgroundColor || customBackgroundColor, + 'has-text-color has-background': color || customColor, [ backgroundClass ]: backgroundClass, - [ textClass ]: textClass, + [ colorClass ]: colorClass, } ); const separatorStyle = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customBackgroundColor, + backgroundColor: backgroundClass ? undefined : customColor, + color: colorClass ? undefined : customColor, }; - return
; + /> ); } diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index aa0462d2f10ef9..a4cf1f2fdb6d27 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -8,8 +8,9 @@ // Dots style &.is-style-dots { - background: none !important; // Override any background themes often set on the hr tag for this style. - // also override the color set on the editor + // Override any background themes often set on the hr tag for this style. + // also override the color set in the editor since it's intented for normal HR + background: none !important; border: none; text-align: center; max-width: none; From 026bb0bd568eb2b9157fae7f4fe00b752a809e89 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Tue, 30 Jul 2019 10:11:24 +0100 Subject: [PATCH 5/7] fix border issue with theme.scss --- packages/block-library/src/separator/theme.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 80834e1ebf8392..8fba47dca24645 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,6 +1,5 @@ .wp-block-separator { border: none; - border-bottom: 2px solid $dark-gray-100; margin-left: auto; margin-right: auto; From a815b5b0b96a3167b48f86ed244a66253bbe99f8 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Tue, 30 Jul 2019 10:19:03 +0100 Subject: [PATCH 6/7] extend border remove in editor --- packages/block-library/src/separator/edit.js | 2 +- packages/block-library/src/separator/theme.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 059eb61426dccc..050bd7423fb665 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -25,7 +25,7 @@ function SeparatorEdit( { color, setColor, className } ) { } ) } style={ { - borderColor: color.color, + backgroundColor: color.color, color: color.color, } } /> diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 8fba47dca24645..fcaaec3bc2b345 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -2,6 +2,7 @@ border: none; margin-left: auto; margin-right: auto; + height: 1px; // Default, thin style &:not(.is-style-wide):not(.is-style-dots) { From ad6f48c7c3f4c38d4d32c5da21ec062029b7f6c9 Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Tue, 30 Jul 2019 22:53:03 +0100 Subject: [PATCH 7/7] fix problems with no color selected --- packages/block-library/src/separator/theme.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index fcaaec3bc2b345..f0673d7bb6f5d4 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,11 +1,20 @@ .wp-block-separator { border: none; + border-bottom: 2px solid $dark-gray-100; margin-left: auto; margin-right: auto; - height: 1px; // Default, thin style &:not(.is-style-wide):not(.is-style-dots) { max-width: 100px; } + + &.has-background:not(.is-style-dots) { + border-bottom: none; + height: 1px; + } + + &.has-background:not(.is-style-wide):not(.is-style-dots) { + height: 2px; + } }