Iotix theme updates (Beafialho playground changes) #7945

jasmussen · 2024-07-10T07:41:17Z

Changes proposed in this Pull Request:

This PR replaces #7819, but fixes the conflicts.

…/github.com/beafialho/themes into beafialho-playground-changes-2024-05-21T15-26-59-744Z

jasmussen · 2024-07-10T07:42:20Z

@beafialho I reviewed the original changes in the other PR, and included them here. Changes all look good, so from a design review this one is good to go. If you have a moment to take a quick look at this one, we can merge it! What do you think?

github-actions · 2024-07-10T07:42:25Z

Preview changes

I've detected changes to the following themes in this PR: Iotix, MyMenu.

You can preview these changes by following the links below:

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

beafialho · 2024-07-10T08:47:23Z

I'm not seeing the images that should be there in the home template cover and in one of the patterns below, like they are in the demo site:

iotiximages.mp4

jasmussen · 2024-07-10T09:01:45Z

Oh, good catch. Looks like there are some hardcoded localhost strings:

I wonder, aren't these URLs that newer versions of CBT automatically replace? If yes, is it possible to try a fresh export using CBT of the theme changes? Otherwise I can do manual updates to this PR, just LMK!

beafialho · 2024-07-10T10:13:36Z

If it's possible to update this one manually, it would be great. Thank you!

jasmussen · 2024-07-11T08:58:09Z

Okay I think I got it right. @mikachan since this is one of the older PRs, just would love a quick gut-check on this changeset: 5276b14

Firstly, did I get that right? And secondly, this is handled in future updates by CBT yes?

mikachan

Thanks for the ping, @jasmussen.

I noticed that we were using a mix of translation functions to translate strings in the patterns, so I've updated them all to use esc_html_e, which is the recommended function we landed on for using in CBT. It was quicker for me to replace them all locally in my code editor, so I went ahead and committed the change: 66d94c7.

this is handled in future updates by CBT yes?

Yes that's right, I'd hope CBT will handle translations in existing PHP files (patterns) in a future release.

Otherwise, I've left some minor comments about a URL but other than that, this is looking good to me!

mikachan · 2024-07-11T10:41:07Z

iotix/patterns/startup.php

 <!-- /wp:paragraph -->

 <!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 <figure class="wp-block-image size-large is-style-default"><img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/f24d9-column_1_image.webp" alt="" /></figure>
 <!-- /wp:image -->

 <!-- wp:paragraph {"fontSize":"medium"} -->
-<p class="has-medium-font-size"><a href="https://iotixdemo.wordpress.com/"><?php echo esc_html__( 'Try a demo →', 'iotix' ); ?></a></p>
+<p class="has-medium-font-size"><a href="https://iotixdemo.wordpress.com/"><?php esc_html_e( 'Try a demo →', 'iotix' ); ?></a></p>


Should this be using a placeholder url rather than https://iotixdemo.wordpress.com/?

mikachan · 2024-07-11T10:41:21Z

iotix/patterns/startup.php

 <!-- /wp:paragraph -->

 <!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
 <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/32721-column_2_image-1.webp" alt="" /></figure>
 <!-- /wp:image -->

 <!-- wp:paragraph {"fontSize":"medium"} -->
-<p class="has-medium-font-size"><a href="https://iotixdemo.wordpress.com/"><?php echo esc_html__( 'See support programs →', 'iotix' ); ?></a></p>
+<p class="has-medium-font-size"><a href="https://iotixdemo.wordpress.com/"><?php esc_html_e( 'See support programs →', 'iotix' ); ?></a></p>


Similar here - should this be using a placeholder url rather than https://iotixdemo.wordpress.com/?

jasmussen · 2024-07-11T11:17:49Z

@beafialho let me know what you think of Sarah's suggestions and I'll happily update this PR so we can merge it!

mikachan · 2024-07-11T12:31:36Z

Apologies, I missed the translations in home.php and I noticed some improvements to the translations in startup.php too. Committed these changes here: 64e833b.

jasmussen · 2024-07-11T12:53:31Z

Thanks, this is helpful for me to update all the older PRs that haven't used the later CBT pieces. Okay Bea when you have a moment, take a look at the playground link, see if this looks to expectations, then we'll merge!

jasmussen · 2024-07-15T12:28:19Z

@beafialho no rush, but if the Playground link for this one tests well for you, we can merge this and close #7819.

beafialho · 2024-07-15T14:19:53Z

Should this be using a placeholder url rather than https://iotixdemo.wordpress.com/?

Yes, these two can use placeholder url's using #, thanks for catching that!

All images are showing up now, the only one I'm still not seeing is the hero cover image:

I also noticed a lack of side padding in two templates:

on the Single Post template, the comments "Group" section
on the 404 template
on the Search Results template

Apologies for noticing it only now 😓 but these settings seem to be changing every release and when I see the themes after a while, they usually lose the global padding they had when I created them. The code below has the changes to all. Let me know if you prefer to address these in other way that's more convenient.

Single Posts

This should fix that (I added 5vw to the sides of that group):

<!-- wp:group {"style":{"spacing":{"padding":{"right":"5vw","left":"5vw"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:5vw;padding-left:5vw"><!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.22rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Posted by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"isLink":true,"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"80px"} -->
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
<div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:comments-title /-->

<!-- wp:comment-template -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"20px"} -->
<div class="wp-block-column" style="flex-basis:20px"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"},"spacing":{"margin":{"top":"10px"}}}} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:comment-author-name /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a","isLink":false} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:comment-content /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.4em"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:comment-edit-link /-->

<!-- wp:comment-reply-link /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->

<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:comments-pagination-previous {"label":"Show Newer"} /-->

<!-- wp:comments-pagination-next {"label":"Show Older"} /-->
<!-- /wp:comments-pagination -->

<!-- wp:post-comments-form /--></div>
<!-- /wp:comments -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

404

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"5vw","left":"5vw"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="padding-right:5vw;padding-left:5vw"><!-- wp:image {"id":45,"sizeSlug":"full","linkDestination":"none","align":"wide","style":{"border":{"radius":"30px"}}} -->
<figure class="wp-block-image alignwide size-full has-custom-border"><img src="https://playground.wordpress.net/scope:0.6586566997406722/wp-content/themes/iotix/assets/images/404_Image.webp" alt="" class="wp-image-45" style="border-radius:30px"/></figure>
<!-- /wp:image -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"left","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-text-align-left has-x-large-font-size" id="oops-that-page-can-t-be-found">Page not found.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It looks like nothing was found at this location. Maybe try a search?</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"","showLabel":false,"placeholder":"Search...","widthUnit":"%","buttonText":"Search","style":{"border":{"radius":"100px"}},"backgroundColor":"foreground"} /--></div>
<!-- /wp:group -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></main>
<!-- /wp:group -->

Search Results

<!-- wp:group {"style":{"spacing":{"padding":{"right":"5vw","left":"5vw"}}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:5vw;padding-left:5vw"><!-- wp:query {"queryId":38,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":true},"layout":{"type":"default"}} -->
<div class="wp-block-query"><!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:query-title {"type":"search","align":"wide","style":{"spacing":{"padding":{"bottom":"20px"}}}} /-->

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:search {"showLabel":false,"placeholder":"Search...","widthUnit":"%","buttonText":"Search","align":"left","style":{"border":{"radius":"100px"}},"backgroundColor":"foreground"} /-->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:query-no-results -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Sorry, but nothing matched your search terms. Please try again with some different keywords.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:query-no-results -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:post-template {"align":"wide","layout":{"type":"grid","columnCount":2}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}},"border":{"radius":"30px"}},"backgroundColor":"tertiary","layout":{"type":"default"}} -->
<div class="wp-block-group has-tertiary-background-color has-background" style="border-radius:30px;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3","style":{"border":{"radius":"0px"}}} /-->

<!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}}} /-->

<!-- wp:post-excerpt {"moreText":"Read article →"} /-->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"inherit":true,"type":"constrained"},"fontSize":"medium"} -->
<div class="wp-block-group alignwide has-medium-font-size" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:query-pagination {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

jasmussen · 2024-07-16T09:59:58Z

Alright, tried to address these. It got a little fiddly, so I'll need to double check the updated Playground URL in a moment.

beafialho · 2024-07-16T10:26:50Z

Thank you, I'm seeing the cover image there now!

Here's a fresh export with these latest template changes:

iotix.zip

jasmussen · 2024-07-16T12:01:43Z

@beafialho I think it's close now. Can you take a look at the demo site link, see if things are as they should be?

beafialho · 2024-07-16T13:43:17Z

Thank you @jasmussen, the changes look good to me 👍

creativecoder

When I load the home page, the heading text with background images looks very dark to me

Additionally I think there's some padding needed on the search input for the 404 template

iotix/patterns/header.php

beafialho · 2024-07-16T15:14:52Z

When I load the home page, the heading text with background images looks very dark to me

This is how this text should look. On my end, it's looking as intended:

jasmussen · 2024-07-16T15:24:49Z

When I load the home page, the heading text with background images looks very dark to me

It's looking like that for me both in the playground site, and playground site editor:

However when I activate the theme locally, I can repro. Looking into it now:

I think what we're seeing here is some incoming changes in the Gutenberg plugin which I'm running locally, changing some specificity rules. Here's the rule that wins in Playground at the moment:

That makes it white.

Here's the rule that wins when the plugin is active:

That makes it dark. Just adding a white heading color fixes it. I'll see if I can push that change.

creativecoder · 2024-07-16T15:25:48Z

This is how this text should look. On my end, it's looking as intended:

Yes, the home page heading text color issue I'm seeing is with the WP 6.6 rc and/or Gutenberg plugin activated. Looks related to CSS specificity(https://make.wordpress.org/core/2024/06/21/wordpress-6-6-css-specificity/).

jasmussen · 2024-07-16T15:28:11Z

Pushed a fix, let me know if that works.

creativecoder · 2024-07-16T15:35:46Z

Pushed a fix, let me know if that works.

@jasmussen That solves the first cover block, but not the one further down the page.

Does it make sense to do this more systemically in theme.json?

jasmussen · 2024-07-16T15:37:41Z

Does it make sense to do this more systemically in theme.json?

If you've a good trick for it. What can I learn of new magic here? In global styles the Heading block is styled to have the dark color, which makes sense since in most cases it will be on a white background. Right? Feel free to push to the branch in case you come up with a better fix.

jasmussen · 2024-07-16T17:54:05Z

I'm heading AFK for a bit, so would appreciate you push changes directly to this branch and land it!

creativecoder · 2024-07-16T19:28:59Z

I've tried a few things and I don't see a way to override the heading block text color when inside a cover block using theme.json. With all the theme.json css having equal specificity and the heading block styles being loaded after the cover block, the heading block color always wins.

A workaround would be to add the following to the theme's style.css

/*
 * Default heading block color to white when within cover block
 * to compensate for dark background colors.
 */
:root :where(.wp-block-cover .wp-block-heading:not(.has-text-color)) {
	color: var(--wp--preset--color--white);
}

This works in the front end and in the post editor, but not in the site editor (which seems like a bug, I'm looking into it.)

creativecoder · 2024-07-17T03:20:34Z

I think the best thing to do for now is to add individual block settings to override the heading text color, like in ceb1c9d

This reverts commit ceb1c9d.

…paragraph text color

creativecoder · 2024-07-17T17:36:33Z

I went ahead with a css rule to make the heading block color match the default paragraph block styles, hoping that this will be the most stable for both template and user content.

Screen.Recording.2024-07-17.at.12.34.03.mov

I'll go ahead and land this!

beafialho · 2024-07-18T10:34:29Z

Thank you @creativecoder!

beafialho and others added 2 commits May 21, 2024 16:27

Changes from WordPress Playground

d6d4374

Merge branch 'playground-changes-2024-05-21T15-26-59-744Z' of https:/…

2842055

…/github.com/beafialho/themes into beafialho-playground-changes-2024-05-21T15-26-59-744Z

jasmussen mentioned this pull request Jul 10, 2024

Iotix: Update theme and prepare for Dotorg submission #7819

Closed

Fix patterns.

5276b14

Use esc_html_e to translate strings in patterns

66d94c7

mikachan reviewed Jul 11, 2024

View reviewed changes

Update translation functions in home.php and startup.php

64e833b

Try to address feedback.

21db4b6

jasmussen added 2 commits July 16, 2024 13:17

Try to fix Search and 404.

0e9202e

Update search and 404 again.

6267f3c

creativecoder reviewed Jul 16, 2024

View reviewed changes

iotix/patterns/header.php Show resolved Hide resolved

Fix header color.

ceb1c9d

creativecoder added 2 commits July 17, 2024 12:26

Revert "Fix header color."

ff93007

This reverts commit ceb1c9d.

Adds css rule for heading color inside cover blocks to match default …

f040e60

…paragraph text color

creativecoder changed the title ~~Beafialho playground changes 2024 05 21 t15 26 59 744 z~~ Iotix theme updates (Beafialho playground changes) Jul 17, 2024

creativecoder merged commit 5e0efe7 into trunk Jul 17, 2024
2 checks passed

creativecoder deleted the beafialho-playground-changes-2024-05-21T15-26-59-744Z branch July 17, 2024 18:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Iotix theme updates (Beafialho playground changes) #7945

Iotix theme updates (Beafialho playground changes) #7945

jasmussen commented Jul 10, 2024

jasmussen commented Jul 10, 2024

github-actions bot commented Jul 10, 2024 •

edited

Loading

beafialho commented Jul 10, 2024

jasmussen commented Jul 10, 2024

beafialho commented Jul 10, 2024

jasmussen commented Jul 11, 2024

mikachan left a comment •

edited

Loading

mikachan Jul 11, 2024

mikachan Jul 11, 2024

jasmussen commented Jul 11, 2024

mikachan commented Jul 11, 2024

jasmussen commented Jul 11, 2024

jasmussen commented Jul 15, 2024

beafialho commented Jul 15, 2024

jasmussen commented Jul 16, 2024

beafialho commented Jul 16, 2024

jasmussen commented Jul 16, 2024

beafialho commented Jul 16, 2024 •

edited

Loading

creativecoder left a comment

beafialho commented Jul 16, 2024

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

jasmussen commented Jul 16, 2024 •

edited

Loading

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

creativecoder commented Jul 17, 2024

creativecoder commented Jul 17, 2024 •

edited

Loading

beafialho commented Jul 18, 2024

Iotix theme updates (Beafialho playground changes) #7945

Iotix theme updates (Beafialho playground changes) #7945

Conversation

jasmussen commented Jul 10, 2024

Changes proposed in this Pull Request:

jasmussen commented Jul 10, 2024

github-actions bot commented Jul 10, 2024 • edited Loading

Preview changes

beafialho commented Jul 10, 2024

jasmussen commented Jul 10, 2024

beafialho commented Jul 10, 2024

jasmussen commented Jul 11, 2024

mikachan left a comment • edited Loading

Choose a reason for hiding this comment

mikachan Jul 11, 2024

Choose a reason for hiding this comment

mikachan Jul 11, 2024

Choose a reason for hiding this comment

jasmussen commented Jul 11, 2024

mikachan commented Jul 11, 2024

jasmussen commented Jul 11, 2024

jasmussen commented Jul 15, 2024

beafialho commented Jul 15, 2024

jasmussen commented Jul 16, 2024

beafialho commented Jul 16, 2024

jasmussen commented Jul 16, 2024

beafialho commented Jul 16, 2024 • edited Loading

creativecoder left a comment

Choose a reason for hiding this comment

beafialho commented Jul 16, 2024

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

jasmussen commented Jul 16, 2024 • edited Loading

jasmussen commented Jul 16, 2024

creativecoder commented Jul 16, 2024

creativecoder commented Jul 17, 2024

creativecoder commented Jul 17, 2024 • edited Loading

beafialho commented Jul 18, 2024

github-actions bot commented Jul 10, 2024 •

edited

Loading

mikachan left a comment •

edited

Loading

beafialho commented Jul 16, 2024 •

edited

Loading

jasmussen commented Jul 16, 2024 •

edited

Loading

creativecoder commented Jul 17, 2024 •

edited

Loading