Quadrat: Add Latest episodes block pattern #3665

MaggieCabrera · 2021-04-16T10:46:54Z

Changes proposed in this Pull Request:

This PR adds the "Latest Episodes" block pattern. This pattern uses one new utility class to remove the bottom margin from the image block so that it sits flush with the following block. To do: upload the images to the staging website. ✅

Related issue(s):

Partially addresses #3642

MaggieCabrera · 2021-04-16T10:47:48Z

quadrat/inc/block-patterns.php

+ 'content' => '<!-- wp:columns {"align":"wide"} -->
+ <div class="wp-block-columns alignwide"><!-- wp:column -->
+ <div class="wp-block-column"><!-- wp:image {"id":1438,"sizeSlug":"large","linkDestination":"none","className":"image-no-margin mb-0"} -->
+ <figure class="wp-block-image size-large image-no-margin mb-0"><img src="http://freethemes.local/wp-content/uploads/2021/04/Screen-usage-1024x623.jpg" alt="' . esc_html__( 'Screen usage', 'quadrat') . '" class="wp-image-1438"/></figure>


We probably need a better alt text than this

Also, @beafialho should we keep the lorem ipsum or do we want other kind of text for these?

Yes, @MaggieCabrera here's the alt text for the images of the patterns. I'm also writing alt text for all the other abstract illustrations here.

"Illustration of two women."

"Illustration of an introspective woman."

"Illustration of a woman working on a laptop."

"Illustration of a woman climbing steps."

Also, @beafialho should we keep the lorem ipsum or do we want other kind of text for these?

I've replaced the lorem ipsum here.

Thanks so much!

jffng · 2021-04-16T16:30:49Z

On mobile, should these have some vertical margin?

If so, I wonder if that's something more global with the columns block CSS, or maybe we can wrap them in a group, I'm not sure.

jffng · 2021-04-16T16:31:23Z

quadrat/sass/_utility.scss

@@ -0,0 +1,7 @@
+.image-no-margin {


Nice candidate to move to BCB eventually?

Yes, I think so, I found out there's a .com plugin that does exactly this but adding a toggle inside the editor!

beafialho · 2021-04-19T09:04:18Z

On mobile, should these have some vertical margin?

If so, I wonder if that's something more global with the columns block CSS, or maybe we can wrap them in a group, I'm not sure.

I think this is very similar to what I had mocked up, but would like @kjellr's input here.

kjellr · 2021-04-19T12:17:59Z

If so, I wonder if that's something more global with the columns block CSS, or maybe we can wrap them in a group, I'm not sure.

I do think it makes sense to add a little top/bottom margin. Do they have margin in the editor? We should also ensure it matches in both places.

MaggieCabrera · 2021-04-22T13:30:02Z

I added a group block wrapper with 30px padding bottom.

The editor (the front is the same):

The frontend on mobile:

kjellr

This looks great! Just one small comment: the body text in here should have a line height of 1.7. Once that's all set, this should be good to go.

jffng · 2021-04-22T18:56:03Z

Nice work, thanks everyone!

* 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 <jonger4@gmail.com>

* 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 <jonger4@gmail.com> * 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 <jonger4@gmail.com> * 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 <maggie.cabrera@automattic.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> * 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 <ben@scruffian.com> Co-authored-by: Jeff Ong <jonger4@gmail.com> * 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 <jonger4@gmail.com> * 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 <jonger4@gmail.com> Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com> * 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 <jonger4@gmail.com> * 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 <maggie.cabrera@automattic.com> Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com> Co-authored-by: Jason Crist <jcrist@pbking.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

MaggieCabrera self-assigned this Apr 16, 2021

MaggieCabrera requested a review from a team April 16, 2021 10:47

MaggieCabrera added the [Theme] Quadrat label Apr 16, 2021

MaggieCabrera added this to the Quadrat v1 milestone Apr 16, 2021

MaggieCabrera commented Apr 16, 2021

View reviewed changes

MaggieCabrera mentioned this pull request Apr 16, 2021

Quadrat: Block Patterns #3642

Closed

8 tasks

MaggieCabrera added 4 commits April 16, 2021 17:53

added Latest episodes block pattern

01968fd

translatable strings

258ed8b

staging url for media

dfe01a0

rebased, updated texts and adjusted paddings

34f7db6

MaggieCabrera force-pushed the block-pattern-episodes branch from 7e5a0ae to 34f7db6 Compare April 16, 2021 16:05

jffng reviewed Apr 16, 2021

View reviewed changes

added a group with padding to the blocks

94aec6e

kjellr reviewed Apr 22, 2021

View reviewed changes

Body line-height to 1.7.

944bcec

jffng merged commit 1c7e21e into make/quadrat Apr 22, 2021

jffng deleted the block-pattern-episodes branch April 22, 2021 18:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quadrat: Add Latest episodes block pattern #3665

Quadrat: Add Latest episodes block pattern #3665

MaggieCabrera commented Apr 16, 2021 •

edited

Loading

MaggieCabrera Apr 16, 2021

MaggieCabrera Apr 16, 2021

beafialho Apr 16, 2021

MaggieCabrera Apr 16, 2021

jffng commented Apr 16, 2021

jffng Apr 16, 2021

MaggieCabrera Apr 22, 2021

beafialho commented Apr 19, 2021

kjellr commented Apr 19, 2021

MaggieCabrera commented Apr 22, 2021

kjellr left a comment •

edited

Loading

jffng commented Apr 22, 2021

Quadrat: Add Latest episodes block pattern #3665

Quadrat: Add Latest episodes block pattern #3665

Conversation

MaggieCabrera commented Apr 16, 2021 • edited Loading

Changes proposed in this Pull Request:

Related issue(s):

MaggieCabrera Apr 16, 2021

Choose a reason for hiding this comment

MaggieCabrera Apr 16, 2021

Choose a reason for hiding this comment

beafialho Apr 16, 2021

Choose a reason for hiding this comment

MaggieCabrera Apr 16, 2021

Choose a reason for hiding this comment

jffng commented Apr 16, 2021

jffng Apr 16, 2021

Choose a reason for hiding this comment

MaggieCabrera Apr 22, 2021

Choose a reason for hiding this comment

beafialho commented Apr 19, 2021

kjellr commented Apr 19, 2021

MaggieCabrera commented Apr 22, 2021

kjellr left a comment • edited Loading

Choose a reason for hiding this comment

jffng commented Apr 22, 2021

MaggieCabrera commented Apr 16, 2021 •

edited

Loading

kjellr left a comment •

edited

Loading