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

Generate playground previews for theme changes #7719

Merged
merged 1 commit into from Apr 24, 2024

Conversation

vcanales
Copy link
Member

@vcanales vcanales commented Apr 5, 2024

Adds a GitHub action that creates Preview Links for changed themes within a PR.
The action leverages two key tools:

  • WordPress Playground's URL fragment blueprints.
  • github-proxy.com by @stoph — used to allow the Playground to download a zip of the changed themes in the PR.

The created links are then added as a comment on the PR thread, as you can see below.
The comment is updated after every push, accounting for changes to other themes.

Testing

Feel free to push changes to other themes to this branch.
I'll remove all theme-related changes before merging.

@vcanales vcanales marked this pull request as ready for review April 5, 2024 15:26
@vcanales vcanales changed the title Generate playground previews for themes Experiment: Generate playground previews for themes Apr 5, 2024
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@vcanales vcanales force-pushed the add/playground-theme-preview branch 6 times, most recently from b021a93 to ece2f44 Compare April 12, 2024 19:05
@Automattic Automattic deleted a comment from github-actions bot Apr 12, 2024
@vcanales vcanales force-pushed the add/playground-theme-preview branch from ece2f44 to b741aaa Compare April 12, 2024 19:10
@vcanales vcanales changed the title Experiment: Generate playground previews for themes Generate playground previews for theme changes Apr 12, 2024
@pbking
Copy link
Contributor

pbking commented Apr 15, 2024

This is the best kind of magic.

@pbking
Copy link
Contributor

pbking commented Apr 15, 2024

image

I'm not sure how to address (or that we should) but CHILD themes (which we probably won't build any more) don't work since the parent themes aren't also installed.

@pbking
Copy link
Contributor

pbking commented Apr 15, 2024

Should we also have the Gutenberg plugin activated as well?

@vcanales vcanales force-pushed the add/playground-theme-preview branch from 19b6421 to de009b9 Compare April 15, 2024 20:56
@vcanales
Copy link
Member Author

I'm not sure how to address (or that we should) but CHILD themes (which we probably won't build any more) don't work since the parent themes aren't also installed.

I've added a check and a warning for child themes, advising the user to install the parent theme in order for the preview to work.

Should we also have the Gutenberg plugin activated as well?

For what purpose? I'd imagine that if we intend on shipping themes compatible with the latest version that might be necessary, but I don't know if that's the case.

Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is ace! Thank you for working on it.

I tested this by making changes to LowFi and Programme, and I can see the preview links were generated correctly and the GH comment was updated, but I don't think I'm seeing the changes made to the themes correctly. For Programme, I updated the theme.json color presets, but they're not reflected in the preview link version of the theme:

image

The palette should include a new "accent" color (#E619CE) and "secondary" should be changed to #000000.

.github/scripts/create-preview-links.js Show resolved Hide resolved
@vcanales vcanales force-pushed the add/playground-theme-preview branch from b9e5cf9 to 45796d8 Compare April 19, 2024 17:33
@vcanales
Copy link
Member Author

I tested this by making changes to LowFi and Programme, and I can see the preview links were generated correctly and the GH comment was updated, but I don't think I'm seeing the changes made to the themes correctly. For Programme, I updated the theme.json color presets, but they're not reflected in the preview link version of the theme:

Thanks for noticing this. It took a bit of debugging to figure out what was happening, and it's caused by the fact that the branch name includes a /, and how github-proxy reads and uses branch names. I've filed a PR to get that fixed upstream: stoph/github-proxy#3

@mikachan
Copy link
Member

Thanks for noticing this. It took a bit of debugging to figure out what was happening, and it's caused by the fact that the branch name includes a /, and how github-proxy reads and uses branch names.

Oh wow, good detective work there. Is this ready to test again? I saw your PR/proposed changes for github-proxy were merged 🎉

@pbking
Copy link
Contributor

pbking commented Apr 22, 2024

It doesn't seem to have fixed things yet... I made some changes in Blockbase and don't see them reflected yet.

@vcanales
Copy link
Member Author

Things should be working now, this is good for another review.

@pbking
Copy link
Contributor

pbking commented Apr 22, 2024

Yesss!

Works for me. This is beautiful.

@pbking
Copy link
Contributor

pbking commented Apr 22, 2024

I have removed my Blockbase changes and approve this message.

Copy link
Contributor

@pbking pbking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great now.

fotograma/functions.php Outdated Show resolved Hide resolved
fotograma/patterns/404.php Outdated Show resolved Hide resolved
@mikachan
Copy link
Member

I'm still not seeing changes to Programme, am I testing in a weird way? 😅 I changed the Secondary colour and removed the 404 template, but I'm not seeing either change in the Playground link.

@pbking
Copy link
Contributor

pbking commented Apr 23, 2024

Weird. I also made some changes to Programme and am not seeing them reflected in the link. Strange. I'm certain I saw Blockbase changes earlier (the same type).

I'm not sure what's going on. :P

@vcanales
Copy link
Member Author

vcanales commented Apr 23, 2024

@pbking @mikachan the problem with Programme in particular is caused upstream, by the github-proxy service, because there seem to be temp files around from before the bug related to branch naming was fixed. I'm working with the author of that tool to get it fixed.

Could you try with another theme? I believe this PR is ready to be shipped if a theme that we haven't tried before works fine.

@pbking
Copy link
Contributor

pbking commented Apr 23, 2024

Hrm...

I made font and color changes to Pendant. However I'm not seeing either change now.

@vcanales
Copy link
Member Author

Hrm...

I made font and color changes to Pendant. However I'm not seeing either change now.

I see. Yeah, still an upstream issue. I'll let you know when to review again.

@vcanales
Copy link
Member Author

It's been fixed upstream now. @pbking your changes to Pendant are actually being loaded correctly now.

image

I think we're good for one more — final? — test now :)
cc. @mikachan — your changes to Programme also seem to be previewed correctly.

Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working great for me now, when testing Programme again and a different theme, Raw 🎉

Nice work @vcanales!

@vcanales vcanales force-pushed the add/playground-theme-preview branch 2 times, most recently from 1aa0367 to 8c2cc06 Compare April 24, 2024 14:47
@vcanales vcanales force-pushed the add/playground-theme-preview branch from 8c2cc06 to 0ecb30c Compare April 24, 2024 14:53
@vcanales vcanales merged commit 8d3da22 into trunk Apr 24, 2024
1 check passed
@vcanales vcanales deleted the add/playground-theme-preview branch April 24, 2024 14:54
vcanales added a commit to WordPress/community-themes that referenced this pull request Apr 24, 2024
Changing where we make the call to download the theme, to make sure that
we're using stable code.

Additionally, add child theme handling.

Discussion around this:
- Automattic/themes#7719
- stoph/github-proxy#3
MaggieCabrera added a commit to WordPress/community-themes that referenced this pull request Apr 24, 2024
* Playground Previews: use correct github proxy URL

Changing where we make the call to download the theme, to make sure that
we're using stable code.

Additionally, add child theme handling.

Discussion around this:
- Automattic/themes#7719
- stoph/github-proxy#3

* change on a child theme

* pushed another test

* remove tests

* Update .github/scripts/create-preview-links.js

---------

Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants