Move WordPress & Gutenberg PR Preview to Playground website

[ajotka]

Motivation for the change, related issues

#1655 (comment)

I moved wordpress.html and gutenberg.html to Playground itself.
By the way, I also made a mini appearance refactor for the modal, based on Figma. And I used components from WordPress packages.

Implementation details

• Add modals with input to fill PR number
• Move & unify logic to fetch PR by number
• Error handling
• Appearance refactor for Modals
• Implement new Modal to other components
• Fetch PR number directly from query
• New Dropdown Menu in main sidebar (thanks to this, we can import playground when we don't have any active one)

Testing Instructions (or ideally a Blueprint)

• Any blueprint
• Go to Playground settings
• Click three dots next to Homepage button future Logo place
• Select Preview a WordPress PR or Preview a Gutenberg PR

It is also possible to open modal via URL params:
/?modal=preview-pr-wordpress or /?modal=preview-pr-gutenberg

[ajotka]

@adamziel Tell me, due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

FYI, I'm setting this PR as Draft for now, because I'm waiting for the changes to be accepted with other modals. After implementing those changes, I'll add this refactor of all modals -> headers and action buttons.

[adamziel]

due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

Good question! There are existing links to those files out there so adding a redirect to custom-redirects-lib.php seems like the best option. Looping in @brandonpayton.

I'm waiting for the changes to be accepted with other modals

One of them is now merged 🎉 And the other one has a last bit of pending feedback. I'm happy to merge once it's addressed. Thank you so much for contributing!

[brandonpayton]

due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

Good question! There are existing links to those files out there so adding a redirect to custom-redirects-lib.php seems like the best option. Looping in @brandonpayton.

Hi @ajotka! We could add a redirect for wordpress.html and gutenberg.html if the open Preview PR modals were reflected in the Playground app URL. For example, the GitHub Export modal is auto-opened based on the URL:

https://playground.wordpress.net/?state=github-export

If the PR Preview modals were controlled in a similar way, we could add redirects to open them.

Here is the code that controls the GitHub Export modal visibility:

wordpress-playground/packages/playground/website/src/github/github-export-form/modal.tsx

Lines 7 to 32 in 65c4a92

	const query = new URLSearchParams(window.location.search);
	export const isGitHubExportModalOpen = signal(
	query.get('state') === 'github-export'
	);
	interface GithubExportModalProps {
	allowZipExport: GitHubExportFormProps['allowZipExport'];
	onExported?: GitHubExportFormProps['onExported'];
	initialFilesBeforeChanges?: GitHubExportFormProps['initialFilesBeforeChanges'];
	initialValues?: GitHubExportFormProps['initialValues'];
	}
	export function closeModal() {
	isGitHubExportModalOpen.value = false;
	// Remove ?state=github-export from the URL.
	const url = new URL(window.location.href);
	url.searchParams.delete('state');
	window.history.replaceState({}, '', url.href);
	}
	export function openModal() {
	isGitHubExportModalOpen.value = true;
	// Add a ?state=github-export to the URL so that the user can refresh the page
	// and still see the modal.
	const url = new URL(window.location.href);
	url.searchParams.set('state', 'github-export');
	window.history.replaceState({}, '', url.href);
	}

I'm not sure it's great for each modal to control its own visibility, but it should work OK for now.

[brandonpayton]

If the PR Preview modals were controlled in a similar way, we could add redirects to open them.

Ah, I see how we are controlling other modal visibility via redux state. I think we'll need to have a way to link to certain modals or initialize that redux state if we want to redirect the old .html files to the PR Preview modals.

[brandonpayton]

Oh, good! I see how #1908 should make all modals addressable via query param:
https://github.com/WordPress/wordpress-playground/pull/1908/files#diff-7b2f9269a39b35f1cb76b6085ebbe1aea324dc8a5043cc349559ddb0827beb38R31

At least it looks that way. I haven't tested it.

If modals are indeed addressable via query param after #1908, we should have no problem adding redirects after this PR is merged. I added #1969 to track this.

[bgrgicak]

Thank you for all the changes here @ajotka! I really appreciate that you were able to get rid of some of our custom code and replaced it with existing components.

I left a bunch of comments, but most are nitpicks and suggestions.

[brandonpayton]

I made a few changes in response to @bgrgicak's feedback and believe this is ready to merge.

@bgrgicak, I tried to address many of your comments, but there is some feedback regarding the quality of the code this PR migrated from files like wordpress.html that I left alone because it seemed less risky. We can take another pass at that code if we want in a follow-up PR.

@ajotka, thanks for this PR and all your work on it!

[brandonpayton]

Note: There are e2e test failures, but those appear to be the same that are currently failing on trunk. We need to fix those under a separate PR.

[adamziel]

Great collaboration here, thank you @ajotka and @brandonpayton!

@brandonpayton – I just noticed the GitHub modal lost its styles – is this related to this PR by any chance?

[brandonpayton]

@adamziel I figured it would be due to this PR, but it turned out to be an earlier commit.

git bisect yielded aaa764a (Website: Blueprints gallery integration for single-click Playground presets) as the culprit, and I confirmed that the commit had the issue while its predecessor did not. I'll take a look. Maybe it's an easy fix.

[brandonpayton]

Ah, that change added a CSS reset for the web app. That would do it. 😅