Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank Canvas Blocks: patch quote styles #3421

Merged
merged 4 commits into from
Mar 9, 2021
Merged

Blank Canvas Blocks: patch quote styles #3421

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aad15b6
Match quote citation font size.
jffng Mar 8, 2021
761a96d
Update border and font family styles.
jffng Mar 8, 2021
76c9e80
Add padding.
jffng Mar 8, 2021
c483fb6
Remove font families from quote styles.
jffng Mar 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 4 additions & 24 deletions blank-canvas-blocks/assets/ponyfill.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions blank-canvas-blocks/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ function blank_canvas_blocks_support() {
// Add support for editor styles.
add_theme_support( 'editor-styles' );

// Add support for basic block styles.
add_theme_support( 'wp-block-styles' );

// Enqueue editor styles.
add_editor_style( array(
'/assets/ponyfill.css'
Expand Down
2 changes: 1 addition & 1 deletion blank-canvas-blocks/sass/blocks/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "button/style";
@import "paragraph/style";
@import "navigation/style";
@import "quote/style";
@import "group/style";
5 changes: 5 additions & 0 deletions blank-canvas-blocks/sass/blocks/quote/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wp-block-quote {
cite, .wp-block-quote__citation {
font-size: var(--wp--preset--font-size--small);
Copy link
Contributor

@pbking pbking Mar 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you expect to be able to configure this? Could this be a large font in another theme? If so how would you expect to configure this once Gutenberg would allow for that?

There's no guarantee that a particular preset is going to be available in a child theme (since they can change those preset just like color). Maybe we should be leveraging only variables expressed in "custom".

Perhaps: font-size: var(--wp--custom--quote--citation--typography--font-size)?

and that could map in theme.json:

custom: quote: citation: typography: font-size: var(--wp--preset--font-size--small),

Maybe that's deeper of an object that's needed...

Copy link
Contributor Author

@jffng jffng Mar 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no guarantee that a particular preset is going to be available in a child theme (since they can change those preset just like color). Maybe we should be leveraging only variables expressed in "custom".

I see your point.

Would you expect to be able to configure this? Could this be a large font in another theme? If so how would you expect to configure this once Gutenberg would allow for that?

As a theme developer and user, I would want to be able to change the font-size of the citation in a quote. I also expect the front-end and view to match. So to clarify for our purposes — should that be done with CSS + custom theme.json variables in this theme?

(Aside: it seems to me the main difference with this approach compared to Seedlet is that I'm expressing the variables in the custom section of theme.json, rather than modular sass files.)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Aside the II: That's the main difference yea. There's some part in seedlet where the question to how to build the CSS was "how do we want it to work?" where the question here is rather "how do I expect to be able to configure that for Gutenberg and then take advantage of that configuration". I imagine the answer is often the same but likely not always.)

I think you're right. I expect that any CSS we add to this would be because it's something we're configuring in theme.json. Hopefully little would be added that isn't directly linked to a variable.

}
}