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.

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

Quadrat: add cover pattern #3676

Merged
merged 18 commits into from
Apr 28, 2021
Merged

Quadrat: add cover pattern #3676

merged 18 commits into from
Apr 28, 2021

Conversation

jffng
Copy link
Contributor

@jffng jffng commented Apr 19, 2021

This PR adds the following block pattern (part of #3642) that leverages a new block style variation on the cover block.

Screen Shot 2021-04-20 at 10 54 25 AM

h/t @MaggieCabrera for the implementation 🙌 . Doing it this way means users can control the color using the cover blocks built in overlay. Unfortunately it doesn't seem to be working with gradients but maybe we can look into that as a next step.

Demo
Kapture 2021-04-20 at 14 26 23

@jffng jffng changed the base branch from trunk to make/quadrat April 19, 2021 21:01
@MaggieCabrera MaggieCabrera added this to the Quadrat v1 milestone Apr 20, 2021
@MaggieCabrera
Copy link
Contributor

You may want to have a look at #3615 (comment) for a way to alter the color of the svg when loaded as a background. This method is being used on the responsive navigation PR for gutenberg

@jffng
Copy link
Contributor Author

jffng commented Apr 20, 2021

Very cool! This seems like a perfect candidate for that method — mask-image + background-color

@jffng
Copy link
Contributor Author

jffng commented Apr 20, 2021

Some block markup to try it with:

<!-- wp:cover {"overlayColor":"darker-blue","align":"full","className":"is-style-quadrat-cover-diamond"} -->
<div class="wp-block-cover alignfull has-darker-blue-background-color has-background-dim is-style-quadrat-cover-diamond"><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"pink","layout":{"inherit":true}} -->
<div class="wp-block-group has-pink-color has-text-color"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Episode 3: Cycle of Emotions</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

@MaggieCabrera
Copy link
Contributor

Ok, it's not super pretty, but it works. I had to use the :after pseudoelement to cover the background of the container div because I couldn't hide it or remove the background value and still use the background value on the before pseudoelement. If only the selected values where also defined as css variables...

Screenshot 2021-04-20 at 19 38 52

@jffng jffng marked this pull request as ready for review April 20, 2021 18:29
@jffng jffng requested review from a team, beafialho and kjellr April 20, 2021 18:29
@jasmussen
Copy link
Member

This is wild, and very cool.

It seems like the primary headache is the need for two custom colors, one for the background, one for the square. Could we simply show the square as black/transparent to achieve mostly the same, or do they need to be able to be set separately?

@kjellr
Copy link
Contributor

kjellr commented Apr 21, 2021

I think having the square be black/transparent would be a decent tradeoff, provided that we do the same for the squares we use elsewhere in the theme.

Can we use a blend mode here, either in the SVG or the CSS? It's possible to replicate the color pretty closely if we use mix-blend mode. The downside is that it renders just a little differently depending on your browser.

https://codepen.io/kjellr/pen/MWJzEKK?editors=1100

Actually... have we considered creating the entire square shape using only CSS? I'm not sure we're gaining much here by using a SVG.

@jffng
Copy link
Contributor Author

jffng commented Apr 21, 2021

I like all of those suggestions and it simplifies things quite a bit. I pushed a change to reflect those ideas.

Here's what it looks like with the three theme colors presets as the cover's background color:

a b c
Screen Shot 2021-04-21 at 4 34 22 PM Screen Shot 2021-04-21 at 4 34 10 PM Screen Shot 2021-04-21 at 4 41 00 PM

have we considered creating the entire square shape using only CSS?

I am not sure, but I think downside is with an svg, we get the background-image resizing capabilities of CSS, whereas I think we have to set the size of the div explicitly if we want to guarantee it stays a square.

@MaggieCabrera
Copy link
Contributor

I prefer the svg over the square too for the same reasons Jeff explained. And I really like the solution with the blend mode.

@kjellr
Copy link
Contributor

kjellr commented Apr 22, 2021

I am not sure, but I think downside is with an svg, we get the background-image resizing capabilities of CSS, whereas I think we have to set the size of the div explicitly if we want to guarantee it stays a square.

Yeah, good call. 👍

Those screenshots look great! Does it work on pure white/black backgrounds?

@jffng
Copy link
Contributor Author

jffng commented Apr 22, 2021

Ok after some more trial and error, I think I have an approach. It even works with gradients!

Screen Shot 2021-04-22 at 2 40 43 PM

I ended up targeting the :after element. When I tried adding it to the :before element (which is already being used by the cover block) I was getting strange results with mix-blend-mode, like the backgrounds being multiplied:

Screen Shot 2021-04-22 at 2 44 47 PM

Does it work on pure white/black backgrounds?

Yes on pure white since the svg fill is black, but no on black. Scratch that, since we're using mix-blend mode it won't work with either pure white or black.

@jffng jffng mentioned this pull request Apr 22, 2021
8 tasks
@kjellr
Copy link
Contributor

kjellr commented Apr 22, 2021

Scratch that, since we're using mix-blend mode it won't work with either pure white or black.

Maybe we can add a little extra style so if the block includes has-black-background-color or has-white-background-color, we turn off the blend mode and adjust as necessary?

@MaggieCabrera
Copy link
Contributor

Would it be ok to add black and white to the palette? That way we make sure those colors classes exist, else I don’t think the generated class is actually has-black-background-color

@MaggieCabrera
Copy link
Contributor

So yeah, since the theme doesn't have a black/white color definition, picking them as custom on the editor will generate inline styles but not a white/black class that we can detect for this. Still, in light of the direction that colors will take in the future, it's safe to assume that those colors will exist in the default palette provided by Gutenberg, and adding them to the theme today shouldn't be an issue. They will show up as part of the palette today, but we can remove them once the changes to GB are done and let them be handled by the editor's default palette then.

@kjellr
Copy link
Contributor

kjellr commented Apr 23, 2021

So yeah, since the theme doesn't have a black/white color definition, picking them as custom on the editor will generate inline styles but not a white/black class that we can detect for this.

Until they're provided by default by Gutenberg, I think all of our themes should include black and white options in their palettes.

@MaggieCabrera MaggieCabrera force-pushed the add/quadrat-cover-pattern branch from b27149a to 965f0ed Compare April 23, 2021 15:50
@MaggieCabrera
Copy link
Contributor

I rebased and added the black and white colors to the json and created the exceptions. I had to use mask again, since we have to manipulate the color of the svg when we are not using the blend mode.

Screenshot 2021-04-23 at 17 50 23

@kjellr
Copy link
Contributor

kjellr commented Apr 23, 2021

Since they're not using blend mode, can we make the black and white versions have a lower opacity? Maybe something like 25%?

Also, a few other small notes:

  • This cover should be wide by default. Let's make it have a min-height of 700px too.
  • We also need to shrink down the square. It's currently taking up the full height, but it should be a smaller element proportionally:
Current Mockup
Screen Shot 2021-04-23 at 11 57 16 AM Cover block with heading

@MaggieCabrera
Copy link
Contributor

@kjellr lower the opacity of the square or of the background?

@kjellr
Copy link
Contributor

kjellr commented Apr 23, 2021

The square:

Before After
Frame 1 Frame 2

@MaggieCabrera MaggieCabrera force-pushed the add/quadrat-cover-pattern branch from 965f0ed to 674cb6c Compare April 26, 2021 09:51
@jffng jffng force-pushed the add/quadrat-cover-pattern branch from 7fee23a to 114be37 Compare April 28, 2021 15:54
@jffng
Copy link
Contributor Author

jffng commented Apr 28, 2021

This one's had a lot of back and forth. I think the main points have been addressed, it's getting a bit hard to follow so going to merge and we can address any additional feedback in a follow-up. Thanks everyone!

@jffng jffng merged commit 95eb000 into make/quadrat Apr 28, 2021
@jffng jffng deleted the add/quadrat-cover-pattern branch April 28, 2021 15:59
@kjellr
Copy link
Contributor

kjellr commented Apr 30, 2021

@kjellr want to give this another spin, with an eye for the black + white versions? 🙏

Sorry, I was afk! I'll give this a test soon and open a new issue if I run into anything.

jffng added a commit that referenced this pull request May 4, 2021
* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
pbking pushed a commit that referenced this pull request May 6, 2021
* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
pbking pushed a commit that referenced this pull request May 6, 2021
* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
scruffian added a commit that referenced this pull request May 6, 2021
* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
jffng added a commit that referenced this pull request May 6, 2021
* Scaffolding a universal theme plus basic typography and color palette.

* fixed do_blocks routes and override index.html from BCB

* added header and footer templates

* changed query to post content block

* commented with the GB issue

* Quadrat: Add new heading sizes and other small misc changes (#3649)

* Quadrat: Add new heading sizes

* Quadrat: Further work on Lists and Quotes

* Quadrat: Remove whitespace

* Quadrat: Add responsive Heading font-sizes

* Fix typo.

* Recompile.

* remove older deploy actions and adding quadrat deploy action (#3655)

* Add the hosts block pattern. (#3662)

* Add the hosts block pattern.

* Fix categories.

* Update img refs.

* Add alt text to media text pattern.

* Revise block pattern names.

* Add text domain.

* Quadrat: override BCB's templates with php ones (#3667)

* override BCB's templates with php ones

* Revert unrelated changes to Seedlet Blocks that are not in trunk.

* Quadrat: Add responsive Paragraph styles and start styling the Code b… (#3663)

* Quadrat: Add responsive Paragraph styles and start styling the Code block

* Quadrat: Remove Code block styling

* Revise heading max vw.

Co-authored-by: Jeff Ong <[email protected]>

* Quadrat: Add Latest episodes block pattern (#3665)

* added Latest episodes block pattern

* translatable strings

* staging url for media

* rebased, updated texts and adjusted paddings

* added a group with padding to the blocks

* Body line-height to 1.7.

Co-authored-by: Jeff Ong <[email protected]>

* Add menu locations to quadrat

* Remove disconnected changes

* Remove footer menu location

* rebuild theme.json

* Quadrat: Add Quote block styles

* Tightened up the line-height and lessened the space between quote and citation.

* Remove properties that already exist in the parent theme

* Remove quote sass include and rebuild.

* Quadrat: Add list styles

* Removed variable usage for list item style

* Updated list styles to be more correcter

* Try/header template part wrapped (#3714)

* Modified site-title styles to match comps

* Added a navigation rendering function to render the navigation block based on a classic data source, wrap the output in an HTML block to be inserted anywhere blocks are do_block()'ed

* Added a header template part that leverages the rendered navigation block markup

* Replaced usage of navigation block template with new template-part

* Added styles for header for proper layout unachievable with blocks.

* Quadrat: Style the Code block

* Remove unneeded declarations

* Removed font-changing settings on code block

* Quadrat: add cover pattern (#3676)

* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>

* removes template hack

* Quadrat: Add Episode block pattern (#3695)

* create episode pattern

* added group wrapper for padding

* correct url for image

* typo

* update to use media and text

* changed the url of the image, added alt content and em tag

* remove unneeded class, added wrapper for bottom padding

* Scope the 0 padding to text content without a background.

* Remove group, add spacer. Fix local image ref.

Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

* Change colors used in theme.json from descreptive to semantic (#3725)

* Change colors used in theme.json from descreptive to semantic

* semanticizing the color

* formatting

* also changed the child theme.json

* Quadrat: Add table styles (#3719)

* Quadrat: Add styles for tables

* Add tbody for extra specificity

* Add a border to the top of the first row

* Remove text-align.

Co-authored-by: Jeff Ong <[email protected]>

* Allowing overflow of group-wrapped navigation (#3732)

* Update screenshot.png (#3735)

* Quadrat: Add page templates (#3721)

* Rebase trunk.

* Revise footer.

* Add CSS for the next/prev links

* Continue rebase.

* remove test code

* used gutenberg_block_template_part to load template parts on php templates

* Remove testing text

* alignment tweaks

* Add separate templates for page and post.

* Restore header wrapper that was accidentally removed in rebase.

* Template tweaks.

* Add page block template.

Co-authored-by: Jeff Ong <[email protected]>
Co-authored-by: Maggie Cabrera <[email protected]>

* Make index query inherit query string.

* Update screenshot.png (#3742)

* Quadrat: Add CSS for a featured image

* Quadrat: Headlines and Buttons Block Pattern (#3744)

* created block pattern

* padding rules for mobile

* added new class to all the group blocks

* Remove all padding from text content on mobile.

Co-authored-by: Jeff Ong <[email protected]>

* Change hover rules for buttons

* Add hover styles for buttons and links

* Remove background color from buttons. (#3752)

* Quadrat: Add the listen pattern

* refactor patterns to single files

* move utility classes to BCB

* refactor listen to the podcast

* Quadrat: Add a join pattern

* Make the pattern wide

* Check the class exists before calling it

* Make sure the plugin is loaded before adding the pattern

* Move the block pattern CSS to a new file

Co-authored-by: Maggie Cabrera <[email protected]>
Co-authored-by: Daniel Dudzic <[email protected]>
Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Kjell Reigstad <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants