From 03b88bff6e1d02eb97a69ea78e3eaca6847c5fda Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 14:58:05 -0500 Subject: [PATCH 01/15] =?UTF-8?q?set=20default:=20=E2=80=98is-left?= =?UTF-8?q?=E2=80=99=20for=20align=20attribute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/block-library/src/quote/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 67cf5cc67692a0..127ad43c05318a 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -33,6 +33,7 @@ const blockAttributes = { }, align: { type: 'string', + default: 'is-left', }, }; From 6fa0ef601505ef731b516263c5cea8af74bd0da9 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 15:01:52 -0500 Subject: [PATCH 02/15] prepend 'is-' when setAttributes on align --- packages/block-library/src/quote/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 127ad43c05318a..8c609398152b00 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -196,7 +196,7 @@ export const settings = { { - setAttributes( { align: nextAlign } ); + setAttributes( { align: 'is-' + nextAlign } ); } } /> From 8ca35a5fe7350148830a95ab8c563b59a88f8769 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 15:13:15 -0500 Subject: [PATCH 03/15] import classnames dependency --- packages/block-library/src/quote/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 8c609398152b00..70fee2452aa4a1 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { omit } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies @@ -200,7 +201,7 @@ export const settings = { } } /> -
+
Date: Thu, 8 Nov 2018 15:16:15 -0500 Subject: [PATCH 04/15] pass WP className object along with align for edit --- packages/block-library/src/quote/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 70fee2452aa4a1..f57e5630dabd1c 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -191,6 +191,12 @@ export const settings = { edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) { const { align, value, citation } = attributes; + + const classes = classnames( + className, + align, + ); + return ( From 1c50191ddaae20508c324dcc3553ee16570e6370 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 15:17:02 -0500 Subject: [PATCH 05/15] pass classes object to className in edit --- packages/block-library/src/quote/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index f57e5630dabd1c..784e5b8b4d124d 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -207,7 +207,7 @@ export const settings = { } } /> -
+
Date: Thu, 8 Nov 2018 15:18:02 -0500 Subject: [PATCH 06/15] swap style property for className on save --- packages/block-library/src/quote/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index 784e5b8b4d124d..928585b9e01dfa 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -248,11 +248,16 @@ export const settings = { ); }, - save( { attributes } ) { + save( { attributes, className } ) { const { align, value, citation } = attributes; + const classes = classnames( + className, + align, + ); + return ( -
+
{ ! RichText.isEmpty( citation ) && }
From c42233123a8a9b4f9b200dc889591d8b813c1e3e Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:22:55 -0500 Subject: [PATCH 07/15] set side margins to inherit on .wp-block-quote --- packages/block-library/src/quote/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss index 3826e0a998b3e8..62f0df53680fb8 100644 --- a/packages/block-library/src/quote/editor.scss +++ b/packages/block-library/src/quote/editor.scss @@ -1,5 +1,5 @@ .wp-block-quote { - margin: 0; + margin: 0 inherit; &__citation { font-size: $default-font-size; From f42ee249bac90c1224e3b88eeedbba1805046556 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:23:42 -0500 Subject: [PATCH 08/15] add editor styling for new .is-left, is-right --- packages/block-library/src/quote/editor.scss | 44 +++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss index 62f0df53680fb8..d0cad8e00a0a28 100644 --- a/packages/block-library/src/quote/editor.scss +++ b/packages/block-library/src/quote/editor.scss @@ -3,5 +3,45 @@ &__citation { font-size: $default-font-size; - } -} + } // &__citation + + &.is-left { + border-left: 4px solid $black; + padding-left: 1em; + } // &.is-left + + &.is-right { + border-right: 4px solid $black; + padding-right: 1em; + text-align: right; + } // &.is-right + + &.is-center { + margin: 3em inherit; + padding-left: 2em; + padding-right: 2em; + text-align: center; + + &::before { + background-color: $black; + content: ""; + display: block; + height: 4px; + margin-left: calc(50% - 10%); + margin-bottom: 2em; + width: 20%; + } // &::before + + &::after { + background-color: $black; + content: ""; + display: block; + height: 4px; + margin-left: calc(50% - 10%); + margin-top: 2em; + width: 20%; + } // &::after + + } // .is-center + +} // .wp-block-quote From b1bb7d75c003a7803882431f0e1b4dd0acbc341c Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:24:13 -0500 Subject: [PATCH 09/15] set margin to em and inherit for .wp-block-quote --- packages/block-library/src/quote/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 8fbe1ef7b3b210..69db6973899da1 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,5 +1,5 @@ .wp-block-quote { - margin: 20px 0; + margin: 1em inherit; cite, footer, From 9f2295a71137597d13d84ece2417dcf09f1665f4 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:25:00 -0500 Subject: [PATCH 10/15] add theme styles for new .is-left, .is-right, .is-center --- packages/block-library/src/quote/theme.scss | 47 ++++++++++++++++++--- 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 69db6973899da1..5f2a8eaa1fb042 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -9,10 +9,45 @@ margin-top: 1em; position: relative; font-style: normal; - } -} + } // cite, footer, &__citation -.wp-block-quote:not(.is-large):not(.is-style-large) { - border-left: 4px solid $black; - padding-left: 1em; -} + &.is-left { + border-left: 4px solid $black; + padding-left: 1em; + } // &.is-left + + &.is-right { + border-right: 4px solid $black; + padding-right: 1em; + text-align: right; + } // &.is-right + + &.is-center { + margin: 3em inherit; + padding-left: 2em; + padding-right: 2em; + text-align: center; + + &::before { + background-color: $black; + content: ""; + display: block; + height: 4px; + margin-left: calc(50% - 10%); + margin-bottom: 2em; + width: 20%; + } // &::before + + &::after { + background-color: $black; + content: ""; + display: block; + height: 4px; + margin-left: calc(50% - 10%); + margin-top: 2em; + width: 20%; + } // &::after + + } // .is-center + +} // .wp-block-quote From 0378935a360484d7779aef1d335146263335ee34 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:25:41 -0500 Subject: [PATCH 11/15] remove margin/padding on .is-large, .is-style-large --- packages/block-library/src/quote/style.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index c1206d68958f7b..5406e8748a1d6c 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -1,8 +1,6 @@ .wp-block-quote { &.is-style-large, &.is-large { - margin: 0 0 16px; - padding: 0 1em; p { font-size: 24px; From 543a3d88a4cef2cc1cb80941cd80eaddb9ca12c5 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:26:08 -0500 Subject: [PATCH 12/15] use em for font-size of p element --- packages/block-library/src/quote/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index 5406e8748a1d6c..872dad4faee01c 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -3,7 +3,7 @@ &.is-large { p { - font-size: 24px; + font-size: 1.33em; font-style: italic; line-height: 1.6; } From 56cc948ce3eff69fd66a6b9d61df7a42e6286a7a Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:26:30 -0500 Subject: [PATCH 13/15] remove text-align: right on cite, footer --- packages/block-library/src/quote/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index 872dad4faee01c..94bfd2d3d567f9 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -11,7 +11,6 @@ cite, footer { font-size: 18px; - text-align: right; } } } From 023043da19569adede9528cba111b2c804ab4c03 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:27:50 -0500 Subject: [PATCH 14/15] use em for unit on cite, footer font-size --- packages/block-library/src/quote/style.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index 94bfd2d3d567f9..d9e5f80ea4e8e7 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -10,7 +10,9 @@ cite, footer { - font-size: 18px; - } - } -} + font-size: 1em; + } // cite, footer + + } // &.is-style-large, &.is-large + +} // .wp-block-quote From fd1d798049e5e8f55bda4f12742851e45b1063db Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 8 Nov 2018 16:28:20 -0500 Subject: [PATCH 15/15] add closing CSS comments for clarify/consistency --- packages/block-library/src/quote/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index d9e5f80ea4e8e7..d34c99271fa7fe 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -1,4 +1,5 @@ .wp-block-quote { + &.is-style-large, &.is-large { @@ -6,7 +7,7 @@ font-size: 1.33em; font-style: italic; line-height: 1.6; - } + } // p cite, footer {