From 495ccc86de805f6ca3ba7cb39400a2f50846d9d6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 10 Aug 2018 11:20:07 +0200 Subject: [PATCH] WIP/Try: Make pullquote a variation This PR takes a meager stab at #5947 by copying the pullquote styles to the basic quote block and making it a variation, now titled "Elaborate". Name aside, which is up for discussion, this PR is mostly intended to get the ball rolling on eventually doing this, vs. keeping the status quo. If we mean to move forward, aside from feedback, the actual pullquote needs to be deprecated and removed, and I'd need help doing that as I assume it's not enough to just delete the pullquote folder. One issue already surfaced from this: the pullquote block features block level alignments, whereas the quote block features only inline level alignments (text align). That means you can float the pullquote, but not the quote. At least not yet, though presumably with a container block you'd be able to do that in the future. What are your thoughts on how to move forward with this? --- packages/block-library/src/quote/index.js | 1 + packages/block-library/src/quote/style.scss | 21 +++++++++++++++++++++ packages/block-library/src/quote/theme.scss | 2 +- 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index c63ff379114e5..475d3eb746045 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -55,6 +55,7 @@ export const settings = { styles: [ { name: 'default', label: __( 'Regular' ), isDefault: true }, { name: 'large', label: __( 'Large' ) }, + { name: 'fancy', label: __( 'Fancy' ) }, ], transforms: { diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index c1206d68958f7..a8a1400f76e5e 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -16,4 +16,25 @@ text-align: right; } } + + &.is-style-fancy { + padding: 3em 0; + text-align: center; + border-top: 4px solid $dark-gray-500; + border-bottom: 4px solid $dark-gray-500; + color: $dark-gray-600; + + p { + font-size: 24px; + line-height: 1.6; + } + + cite, + footer { + position: relative; + color: $dark-gray-600; + text-transform: uppercase; + font-size: $default-font-size; + } + } } diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index df07d206febe5..fab98c19c1516 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -11,7 +11,7 @@ } } -.wp-block-quote:not(.is-large):not(.is-style-large) { +.wp-block-quote:not(.is-large):not(.is-style-large):not(.is-style-fancy) { border-left: 4px solid $black; padding-left: 1em; }