Pullquote Block #607

mkaz · 2017-05-02T18:34:33Z

Creates the pullquote block which is a highly stylized quote for dramatic effect, see Issue #547

mkaz · 2017-05-02T18:41:41Z

@jasmussen The initial commit for pullquote, take a look at the styles and feel free to tweak away, probably will want to move background/font to variables, but easier to play with here without generating conflicts until we're set.

The full width implementation is a stand-in until the img full-width solution is set and then can use, likewise for Placeholder.

mkaz · 2017-05-02T23:37:10Z

Added ability to set background color, though these colors right now are variables in this block, I think we will want to get them out of the theme, though I don't know how.

jasmussen · 2017-05-03T11:52:13Z

Really nice work, Marcus. You've got this.

In fact, you may have got this too much :) and I think we might want to pull back a little. I also pulled back a little in some revised mockups here: #547 (comment)

That is — some of your ideas here, like color, are really powerful ideas. But we may want to get a V1 of this block merged in without that, and then add it back when we have a good plan for it. The thing is, it's not a live preview of what you'll see in the theme. So how would a theme know what color to apply? If we were to apply the color as an inline color, then we'd want some way for the theme to be able to provide the palette, for consistency. A noble goal, in other words, but probably best tackled separately.

We might even want to wait on including the background image for the same reason.

I'm going to jump in and try and get the pullquote looking like the latest version of the mockup — big and bold, but with a generic font and generic colors. And a theme can then style this quote via the CSS class it is born with.

jasmussen · 2017-05-03T12:14:56Z

Pushed a few style tweaks. You'll hate me and think I'm terribly boring. But the truth is, you were too good here. You added features that we aren't even ready to add :D

Changed to default fonts and tweaked sizes
Removed background and full width trick
Removed colors

Still need to do:

Remove the JS for multiple quote styles
Remove the color code for now, then it can make its triumphant return separately later on

Can be done later on:

Add switcher
Add block alignment toolbar, like how Image adds it

mkaz · 2017-05-03T13:26:08Z

Thanks @jasmussen I knew we would want to get colors from the theme, but wasn't sure how. We can tackle that one later - I can do the rest of the clean up for you and get this PR ready to ship.

jasmussen · 2017-05-04T08:36:27Z

Looks like this is ready for final review. @iseulde how's the editable placeholder text looking? It would be nice to use actual placeholder text rather than output it directly like this PR does.

ellatrix · 2017-05-04T08:47:00Z

@jasmussen Yeah, working on it

jasmussen · 2017-05-04T08:53:38Z

Yeah, working on it

Should we merge this in and open a separate placeholder ticket, or should we wait?

ellatrix · 2017-05-04T08:55:35Z

Hm, aren't there tickets? #475
Feel free to go ahead, I'm not sure how these are dependent.

aduth · 2017-05-04T14:39:47Z

blocks/library/pullquote/index.js

+		return (
+			<blockquote className="blocks-pullquote">
+				<Editable
+					value={ value || 'Write quote...' }


Should be translated via wp.i18n.__

Should use ellipsis character for semantic meaning over three dots (…)

aduth · 2017-05-04T14:41:12Z

editor/components/toolbar/index.js

@@ -28,7 +28,7 @@ function Toolbar( { controls } ) {
 					} }
 					className={ classNames( 'editor-toolbar__control', {
 						'is-active': control.isActive
-					} ) } />
+					}, control.classNames ) } />


We're not using this?

The change that used the classname got backed out, it was created to pass a class to the control icon and provide a different color. It could be useful to leave for others to be able to tweak controls.

It could be useful to leave for others to be able to tweak controls.

We can always reintroduce it if it proves to be useful, but I'm generally against introducing functionality we expect could be useful but not actually use (YAGNI).

If and when it can be shown to provide value, I think there could also be a discussion on the naming and shape of classNames. Is it a className (singular) string? A classNames (plural) array of strings?

The flip side of this argument might be that we can't always anticipate the needs of a plugin implementing a block. To this point, I think we'll have pretty good exposure in the course of implementing a core set of blocks to the sorts of needs we'll need to accommodate. Or at least, we should consider whether this is an extension point we want to offer. Class names in particular are pretty susceptible to conflict (plugins trying to use the same name), and we may end up doing a disservice by exposing it. There could be alternative solutions such as inline styles, or more built-in customization such as icon color in your original usage.

To be able to color icon controls, needed to support passing in additional classnames to the IconButton.

Revert to a more minimalist design for now.

mkaz · 2017-05-04T18:50:05Z

@aduth I backed out the extra classNames for toolbar, easy to add back if/when we need it ff87c9f

Plus added i18n and ellipsis in placeholders f05af0d

aduth · 2017-05-05T17:50:37Z

Sorry that I neglected to revisit this prior to merging other changes this morning, but there are a few revisions that've been made to the quote block that I think are relevant here.

Specifically those made in 76d62e7#diff-cda27cec5557c5b032f2b19c44309a1d

Use inline prop for caption Editable
Collapse caption footer by assigning as tagName of Editable

You may need to rebase for these changes to take effect.

Otherwise, this looks good 👍

aduth · 2017-05-05T18:03:30Z

See also #684 which includes a fix for testing the citation attribute length.

aduth · 2017-05-05T19:40:50Z

blocks/library/pullquote/index.js

+				{ ( citation || !! focus ) && (
+					<footer>
+						<Editable
+							tagName="footer"


With tagName you no longer need the <footer> wrapper. Currently this will render as <footer><footer></footer></footer>.

Whoops, fixed in #687

mkaz added the [Status] In Progress Tracking issues with work in progress label May 2, 2017

mkaz self-assigned this May 2, 2017

mtias added the [Feature] Blocks Overall functionality of blocks label May 3, 2017

mkaz force-pushed the add/547-pullquote branch from a6b92ca to 102f9b8 Compare May 3, 2017 18:53

mkaz removed the [Status] In Progress Tracking issues with work in progress label May 3, 2017

mkaz mentioned this pull request May 3, 2017

Pullquote: Background image & colors enhancements #636

Closed

aduth reviewed May 4, 2017

View reviewed changes

mkaz and others added 6 commits May 4, 2017 11:43

Pullquote Block - initial block

a3a03be

Allow classnames to be specified for icon

0017e3a

To be able to color icon controls, needed to support passing in additional classnames to the IconButton.

Merge

056cd7c

Pull back the design a little bit ;)

75df7b6

Revert to a more minimalist design for now.

Merge

31a51ae

Remove unused attr import

ab81b8e

mkaz force-pushed the add/547-pullquote branch from 102f9b8 to ab81b8e Compare May 4, 2017 18:43

mkaz added 2 commits May 4, 2017 11:45

Remove additional classnames from control - not needed yet

ff87c9f

Add i18n for placeholders, use ellipsis

f05af0d

mkaz added 2 commits May 5, 2017 11:50

Add inline to Editable component

98197c1

Add check for citation length

5996a31

mkaz merged commit dac64a6 into master May 5, 2017

mkaz deleted the add/547-pullquote branch May 5, 2017 19:13

aduth reviewed May 5, 2017

View reviewed changes

snyk-bot mentioned this pull request Apr 15, 2020

[Snyk] Upgrade babel-eslint from 8.0.3 to 8.2.6 makbarGroup/gutenberg#3

Open

snyk-bot mentioned this pull request Jun 6, 2021

[Snyk] Upgrade babel-eslint from 8.0.3 to 8.2.6 monzerfoda/gutenberg#2

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities yassine4999/gutenberg#11

Open

npneeraj mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities npneeraj/gutenberg#13

Open

This was referenced Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities naiba4/gutenberg#7

Open

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#95

Open

soloinovator mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities soloinovator/gutenberg#84

Open

MaxMood96 mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#96

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities captainbarber99/gutenberg#11

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pullquote Block #607

Pullquote Block #607

mkaz commented May 2, 2017 •

edited

Loading

mkaz commented May 2, 2017

mkaz commented May 2, 2017

jasmussen commented May 3, 2017 •

edited

Loading

jasmussen commented May 3, 2017

mkaz commented May 3, 2017

jasmussen commented May 4, 2017

ellatrix commented May 4, 2017

jasmussen commented May 4, 2017

ellatrix commented May 4, 2017

aduth May 4, 2017

aduth May 4, 2017

mkaz May 4, 2017

aduth May 4, 2017

aduth May 4, 2017

mkaz commented May 4, 2017

aduth commented May 5, 2017

aduth commented May 5, 2017 •

edited

Loading

aduth May 5, 2017

mkaz May 5, 2017

Pullquote Block #607

Pullquote Block #607

Conversation

mkaz commented May 2, 2017 • edited Loading

mkaz commented May 2, 2017

mkaz commented May 2, 2017

jasmussen commented May 3, 2017 • edited Loading

jasmussen commented May 3, 2017

mkaz commented May 3, 2017

jasmussen commented May 4, 2017

ellatrix commented May 4, 2017

jasmussen commented May 4, 2017

ellatrix commented May 4, 2017

aduth May 4, 2017

Choose a reason for hiding this comment

aduth May 4, 2017

Choose a reason for hiding this comment

mkaz May 4, 2017

Choose a reason for hiding this comment

aduth May 4, 2017

Choose a reason for hiding this comment

aduth May 4, 2017

Choose a reason for hiding this comment

mkaz commented May 4, 2017

aduth commented May 5, 2017

aduth commented May 5, 2017 • edited Loading

aduth May 5, 2017

Choose a reason for hiding this comment

mkaz May 5, 2017

Choose a reason for hiding this comment

mkaz commented May 2, 2017 •

edited

Loading

jasmussen commented May 3, 2017 •

edited

Loading

aduth commented May 5, 2017 •

edited

Loading