Add another pullquote style #9763

jorgefilipecosta · 2018-09-10T18:09:58Z

The PR adds a new style variation (whose name is yet to be decided) to the Pull Quote block.

This style has an additional feature that allows users to choose a background color.

This PR depends on #9599.

The design is open for feedback maybe we can improve the look of the block.

How has this been tested?

I used the new style and converted between styles and did not notice any problem.
I checked that we are compatible with pull quotes created on the previous WordPress version e.g: by pasting the following code block in the code editor.

<!-- wp:pullquote {"align":"left"} -->
<figure class="wp-block-pullquote alignleft"><blockquote><p>AAA</p><cite>BBB</cite></blockquote></figure>
<!-- /wp:pullquote -->

Screenshots

ZebulanStanphill · 2018-09-11T02:56:24Z

Nice! I think you should be able to set a text color along with the background color.

jasmussen · 2018-09-11T08:15:02Z

I love it. I also love how since we're deciding to not make the pullquote a variation of the stock quote, we are at least adding a bunch of decorative aspects to it! My GitFu hasn't yet learned how to check out two PRs at the same time, so if we can get #9599 merged, I can help you with this PR if you need it.

This is how I'd love to see it work:

Default has no background color and the same text as body (currentColor). It also has the top and bottom borders.
As soon as you add a background color, the top and bottom borders disappear (appears to already be the case in this PR). Fonts/captions are unchanged.
Text color, as suggested by Zeb, needs to be customizable too, so you can ensure contrast.
Can we make it so the delicious contrast checker we have in place can work here as well?

mtias · 2018-09-11T10:48:00Z

packages/block-library/src/pullquote/index.js

-							}
+			let colorSettings = null;
+			const isStylizedStyleVariation = includes( className, STYLIZED_CLASS );
+			if ( isStylizedStyleVariation ) {


I was thinking we could actually try calling this attribute just "Main Color", and use it in the default version for the thick borders.

That sounds like a neat idea!

mtias · 2018-09-11T10:49:14Z

packages/block-library/src/pullquote/index.js

@@ -47,51 +64,89 @@ export const settings = {

 	attributes: blockAttributes,

+	styles: [
+		{ name: 'default', label: __( 'Regular' ), isDefault: true },
+		{ name: STYLIZED_STYLE_NAME, label: __( 'Stylized' ) },


Maybe call this "Solid" instead? cc @jasmussen

Or "Color"? Or "Solid Color"? I think it's fine to be slightly verbose here. Agree "Stylized" is not super descriptive. The block itself is stylized :D

jorgefilipecosta · 2018-09-12T18:41:44Z

Thank you for the review, I tried to mix the feedback and I updated this PR.
The block now looks like this:

jasmussen · 2018-09-13T09:32:22Z

In the last change I'm a little confused about how to change the background color. The new "main color" only styles the border for me.

I think we can actually be a bit simpler in the implementation:

"Main color" is renamed "Background color"
When no background color is chosen, there's a border top and bottom. Perhaps the top and bottom border are currentColor, so the color of both text, caption, and borders are set by the Text Color swatch.
As soon as you add a background color, the top and bottom borders disappear.

What do you think?

jorgefilipecosta · 2018-09-13T10:56:28Z

Hi @jasmussen,
I tried to follow @mtias suggestion ( I'm sorry if I missed something and did not got it right):

I was thinking we could actually try calling this attribute just "Main Color", and use it in the default version for the thick borders.

So the "Main Color" has two different behaviors, with the default style it changes the border color, on the solid color style it changes the background color.

"Main color" is renamed "Background color"
When no background color is chosen, there's a border top and bottom. Perhaps the top and bottom border are currentColor, so the color of both text, caption, and borders are set by the Text Color swatch.
As soon as you add a background color, the top and bottom borders disappear.

I also like this approach, and I'm open to both version. In this approach, we don't have an explicit style, right? The style changes when a background color is applied?
@mtias any thoughts on this?

jasmussen · 2018-09-13T10:58:42Z

Hah I see that now — okay, well, I honestly prefer the approach I suggested, but I can stomach the other appraoch too if Matías wants to drop the lead hammer 😉 — but as it is, I wasn't able to figure out how to make a solid background color, so we need a clearer UI in case we go that route.

ZebulanStanphill · 2018-09-13T13:30:35Z

Is there any reason why we should not allow having a colored background for both style variations?

jasmussen · 2018-09-13T13:34:50Z

Is there any reason why we should not allow having a colored background for both style variations?

Yes: fewer options, simplicity, ease of use.

It's always a balancing act.

jorgefilipecosta · 2018-09-21T23:38:53Z

A new feature suggested by @mtias that automatically computes the text color based on the background color if the user has not explicitly chosen a text color before was added.

jasmussen · 2018-09-24T06:49:19Z

automatically computes the text color based on the background color if the user has no explicitly chosen a text color before was added.

This sounds smart, especially if we can reuse the contrast code. But also perhaps a bit overkill. Could we use a CSS filter to achieve the same?

mtias · 2018-09-25T13:33:05Z

Tweaked design a little bit.

mtias · 2018-09-25T13:33:31Z

Could we use a CSS filter to achieve the same?

How would this work?

mtias · 2018-09-25T13:36:56Z

@jasmussen I feel like the text alignment is a bit awkward in the above example. Not quite aligned with the main text, but not offset enough either.

I like the presentation here, but wonder what you think:

jasmussen · 2018-09-25T13:48:09Z

How would this work?

Like this. Okay that's not perfect. But it was really easy to write.

I feel like the text alignment is a bit awkward in the above example. Not quite aligned with the main text, but not offset enough either.

I think it's fine :D ship it.

jorgefilipecosta · 2018-09-27T10:35:48Z

I think the feedback was applied. Thank you for the reviews! And thank you @mtias for improving the UI. cc: @karmatosed for a last check up on the UX.
We are also missing a code review before the merge.

jorgefilipecosta · 2018-09-28T10:36:59Z

Given that @mtias and @jasmussen looked at this PR I'm going to merge so it gets on the next RC and we have more time to test it.
That said if anyone finds a problem in the UX or code just comment here and I will look into the problem ASAP.
Thank you all for the help.

ZebulanStanphill · 2018-09-28T19:30:01Z

@jorgefilipecosta I just noticed an issue with the automatic color picking: it does not work very well when you are using the Regular style variation.

Can the automatic color picking be turned off for the Regular style?

aduth · 2018-11-13T20:23:28Z

packages/block-library/src/pullquote/index.js

-		const { value, citation } = attributes;
-
+		const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
+		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );


This is not a good way to check for the presence of a class, as it is very susceptible to false positives, such as this-style-solid-colorful-rainbow. You might consider a regular expression matching spaces or \b word boundary. Or better yet, the @wordpress/token-list module (specifically TokenList#contains) was designed for this purpose.

For what its worth, the very need to detect an assigned style appears to be a smell, as considered at #11352 (comment)

jorgefilipecosta added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Sep 10, 2018

jorgefilipecosta changed the base branch from master to try/pullquote-aside September 10, 2018 21:17

jorgefilipecosta changed the title ~~WIP Add another pullquote style~~ Add another pullquote style Sep 10, 2018

jorgefilipecosta requested review from jasmussen and mtias September 10, 2018 21:18

mtias reviewed Sep 11, 2018

View reviewed changes

jorgefilipecosta force-pushed the try/pullquote-aside branch from 5f7ceb9 to 17e4292 Compare September 11, 2018 19:48

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch 2 times, most recently from 9a78cc0 to 56b0e47 Compare September 11, 2018 20:30

jorgefilipecosta force-pushed the try/pullquote-aside branch from 17e4292 to fc1eac0 Compare September 11, 2018 22:41

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch from 56b0e47 to dbeaa02 Compare September 12, 2018 18:15

jorgefilipecosta changed the base branch from try/pullquote-aside to master September 12, 2018 18:16

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch from dbeaa02 to ae30a3f Compare September 12, 2018 19:09

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch from ae30a3f to 5aef403 Compare September 21, 2018 09:55

mtias added this to the 4.0 milestone Sep 25, 2018

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch 2 times, most recently from d44ac7c to d7a9ea8 Compare September 25, 2018 16:27

jorgefilipecosta requested review from karmatosed and a team September 27, 2018 10:36

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch from d7a9ea8 to 0b2a18b Compare September 27, 2018 10:45

mtias approved these changes Sep 27, 2018

View reviewed changes

jorgefilipecosta and others added 6 commits September 28, 2018 11:01

Add another pullquote style

b2177bf

revisions

29980be

Add automatic text color computation feature.

7f19a38

Tweak design of pullquote variation.

eeddf3a

Fix hyperlink text colors

2a20fe4

Remove center aligment

463bf78

jorgefilipecosta force-pushed the update/add-another-pullquote-style branch from 0b2a18b to 463bf78 Compare September 28, 2018 10:17

jorgefilipecosta merged commit 3a210ab into master Sep 28, 2018

jorgefilipecosta deleted the update/add-another-pullquote-style branch September 28, 2018 10:39

mtias mentioned this pull request Oct 7, 2018

Add New Pullquote Style Variation (and make it the default) #10386

Closed

aduth reviewed Nov 13, 2018

View reviewed changes

talldan mentioned this pull request Jun 3, 2020

Pullquote block missing "align center" #22784

Closed

oandregal mentioned this pull request Aug 19, 2020

theme.json: change text colors depending on background #24166

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add another pullquote style #9763

Add another pullquote style #9763

jorgefilipecosta commented Sep 10, 2018 •

edited

Loading

ZebulanStanphill commented Sep 11, 2018

jasmussen commented Sep 11, 2018

mtias Sep 11, 2018

ZebulanStanphill Sep 11, 2018

mtias Sep 11, 2018

jasmussen Sep 11, 2018

jorgefilipecosta commented Sep 12, 2018

jasmussen commented Sep 13, 2018

jorgefilipecosta commented Sep 13, 2018

jasmussen commented Sep 13, 2018

ZebulanStanphill commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jorgefilipecosta commented Sep 21, 2018 •

edited

Loading

jasmussen commented Sep 24, 2018

mtias commented Sep 25, 2018

mtias commented Sep 25, 2018

mtias commented Sep 25, 2018

jasmussen commented Sep 25, 2018

jorgefilipecosta commented Sep 27, 2018 •

edited

Loading

jorgefilipecosta commented Sep 28, 2018 •

edited

Loading

ZebulanStanphill commented Sep 28, 2018

aduth Nov 13, 2018

aduth Nov 13, 2018

Add another pullquote style #9763

Add another pullquote style #9763

Conversation

jorgefilipecosta commented Sep 10, 2018 • edited Loading

How has this been tested?

Screenshots

ZebulanStanphill commented Sep 11, 2018

jasmussen commented Sep 11, 2018

mtias Sep 11, 2018

Choose a reason for hiding this comment

ZebulanStanphill Sep 11, 2018

Choose a reason for hiding this comment

mtias Sep 11, 2018

Choose a reason for hiding this comment

jasmussen Sep 11, 2018

Choose a reason for hiding this comment

jorgefilipecosta commented Sep 12, 2018

jasmussen commented Sep 13, 2018

jorgefilipecosta commented Sep 13, 2018

jasmussen commented Sep 13, 2018

ZebulanStanphill commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jorgefilipecosta commented Sep 21, 2018 • edited Loading

jasmussen commented Sep 24, 2018

mtias commented Sep 25, 2018

mtias commented Sep 25, 2018

mtias commented Sep 25, 2018

jasmussen commented Sep 25, 2018

jorgefilipecosta commented Sep 27, 2018 • edited Loading

jorgefilipecosta commented Sep 28, 2018 • edited Loading

ZebulanStanphill commented Sep 28, 2018

aduth Nov 13, 2018

Choose a reason for hiding this comment

aduth Nov 13, 2018

Choose a reason for hiding this comment

jorgefilipecosta commented Sep 10, 2018 •

edited

Loading

jorgefilipecosta commented Sep 21, 2018 •

edited

Loading

jorgefilipecosta commented Sep 27, 2018 •

edited

Loading

jorgefilipecosta commented Sep 28, 2018 •

edited

Loading