Move CSS from style.css to theme.json or block stylesheets

[donnapep]

Changes proposed in this Pull Request:

This PR seeks to clean up style.css, putting the CSS in theme.json where possible (and when there aren't too many styles), or block stylesheets otherwise.

It also puts the block styles in alpha order in theme.json for ease of maintenance.

Testing Instructions

Click around in the frontend and in the editor and ensure the UI looks the same as before. Specific things to check:

• Navigation menu on desktop and mobile
• 404 page
• Search results page
• Comments (comments still don't look great in some scenarios, but they should look the same as before)
• Course List block on the course overview page with multiple pages

[github-actions]

Preview changes

I've detected changes to the following themes in this PR: Course.
You can preview these changes by following the links below:

• Preview changes for Course

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.

[m1r0]

Kudos for taking on such a big cleanup!

Overall it looks great! I've noticed just a few minor bugs:

• The "Contact Teacher" button is missing some padding. The "Reset Lesson" and "Complete Lesson" buttons have the same issue.

• The buttons are a bit bigger compared to before. I'm not sure if this is intended.

(before -> after)

[donnapep]

Thanks @m1r0! I took a quick peek but wasn't able to reproduce the Contact Teacher button issue immediately. I know they are Outline style buttons. Would you mind checking the DevTools to see what's happening there? It's clearly not getting the same padding as the Fill style. 🙏🏻

[donnapep]

The buttons are a bit bigger compared to before. I'm not sure if this is intended.

@m1r0 The padding shouldn't be any different. The only related change I made was to move the custom button padding from theme.json. It was only used in one place so didn't need to be a variable.

I spent some more time trying to reproduce these issues but wasn't able to. Perhaps there are some Global Styles / site editor template customizations that need to be reset?

There are a bunch of other style-related issues that I'd like to address once I'm finished with this one.

[donnapep]

For the padding issue, it almost looks like your button is still trying to reference the CSS padding variable for some reason (maybe because the CSS was cached?), but can't find it because it was removed.

To be safe, I've reverted the padding changes in 615cb6c. This should resolve the issue with the button height as well. 🙌🏻

Thanks for the review!

[m1r0]

Thanks for the updates, Donna!

It's better but the button styles are still a bit off:

(before)

---

(after)

---

(before -> after)

---

If this helps, you can reproduce it in WP Playground. Here are the Playground links that include the Sensei plugin for trunk and your branch.