Archeo: Add Layered images with headline pattern #5468
Conversation
| <!-- /wp:spacer --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"300"}},"fontSize":"huge"} --> | ||
| <p class="has-huge-font-size" style="font-style:normal;font-weight:300;text-transform:uppercase">' . wp_kses_post( __( 'Palais Du <br>Cirque, à Chichen-Itza, bas-relief<br>des tigres.', 'archeo' ) ) . '</p> |
There was a problem hiding this comment.
The font-size doesn't appear to match the comps (100px). Also I think the line height needs to be adjusted to 1.
There was a problem hiding this comment.
I went with the largest font size we've set in theme.json, which is 72px (huge), but maybe we should set the font size manually here so it matches the comps? The problem with this is that it won't be dynamic/responsive, and 100px is pretty big at mobile. I've changed it for now so we can test it.
The adjusted line height looks much better, thanks!
There was a problem hiding this comment.
I've just made the font size responsive in the same way you did here, which I think works well!
| return array( | ||
| 'title' => __( 'Layered images with headline', 'archeo' ), | ||
| 'categories' => array( 'pages' ), | ||
| 'content' => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque-bg.png","dimRatio":0,"overlayColor":"background","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0vw","left":"7vw"}}}} --> |
There was a problem hiding this comment.
Is this pattern meant to take up the full page height i.e. 100vh?
There was a problem hiding this comment.
Ah yeah probably, I've added this. Thanks!
|
Is it possible to get the image on the right to stick to the right side, even on larger screens?
Also, the font weight is set correctly, but it's way heavier than the comps. I know we addressed this once, but we might need to take another look in a separate ticket. |
|
In my testing, the image seems to stick to the right side at large screens on the front end:
But in the editor, I've still got a gap between the image and the edge:
I think this is related to the div that's added on the front end when the image is left/right aligned, as discussed here WordPress/gutenberg#38613. As an alternative, I tried making the same pattern with the media + text block instead of columns, but I couldn't get the vertical spacing correct (the spacing was being applied to both the text and the image, rather than just the text). I don't know if there's another way we could do this? I also took a look at the fonts. It looks like we're using all the possible Chivo font weights that are available, with Light 300 being the lightest. I'll open up a separate issue to see if we can improve these. |
|
Maggie pointed me in the right direction for the fonts, and I've now added a thin font weight, which lets us use a weight of 100. Does this look better for this pattern?
|
|
It does, but I think we'll want to tackle that problem globally so I think it's fine to leave at 300 and then deal with this over in #5478.
Ok, no problem. I think this is good to go if we switch back to the 300 weight for now. |
Actually on second thought, let's keep the 100. I think that's more in line with the comps, and I'll open a PR to swap out the 300 weight globally for 100 to close #5478. |
jffng
force-pushed
the
add/archeo-pattern-9
branch
from
0903e4a to
ebea575
Compare
Changes proposed in this Pull Request:
This adds the 'Layered images with headline' pattern for Archeo. I've used a full-width cover block with nested columns and then used spacer blocks to move the text and image down.
The background image is 861KB (it's a transparent png) - is this too large?(Part of #5477)What should the alt text for these images be?
Related issue(s):
#5429