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.

Sign up for GitHub

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

Jump to bottom

Fix: Additional CSS button not working after back navigation #68954

Merged
merged 2 commits into from
Jan 31, 2025
Merged

Fix: Additional CSS button not working after back navigation #68954

merged 2 commits into from
Jan 31, 2025

Conversation

Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Jan 30, 2025 •
edited
Loading

Closes: #68949

What?

Fixed the Additional CSS button not working after navigating back from the CSS screen.

Why?

  • The Additional CSS button stopped responding after using it once and navigating back
  • This happened because the editor canvas view state wasn't being reset on navigation
  • The issue made the Additional CSS feature inaccessible after initial use

How?

  • Added onBack handler to ScreenCSS component to manage view state cleanup
  • Added setEditorCanvasContainerView dispatch in ScreenCSS for proper state management
  • Reset editor canvas view state when navigating back from CSS screen

Testing Instructions

  1. Open Site Editor
  2. Navigate to Global Styles
  3. Click the Additional CSS button
    • ✅ CSS screen should open
  4. Click the back button to return to Global Styles
  5. Click the Additional CSS button again
    • ✅ CSS screen should open again
  6. Repeat steps 4-5 multiple times to ensure consistent behavior
    • ✅ Additional CSS button should work every time

Screencast:

Screen.Recording.2025-01-30.at.1.22.39.PM.mov

@Infinite-Null
Reset editor canvas view when navigating away from CSS screen
e1ce2eb 
* Added effect to reset editorCanvasContainerView when navigating away from CSS screen
* Added tracking of previous path using usePrevious hook to detect navigation changes
* Added comparison of current and previous paths to determine when to reset the view
* Reset view to undefined to ensure clean state for next CSS screen activation
@Infinite-Null Infinite-Null changed the title Reset editor canvas view when navigating away from CSS screen Fix: Additional CSS button not working after back navigation Jan 30, 2025
@Infinite-Null Infinite-Null marked this pull request as ready for review January 30, 2025 05:46
@github-actions GitHub Actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

This was referenced Jan 30, 2025
Closed
Closed
@Infinite-Null
Reset editor canvas view when navigating back from CSS screen
3638578 
* Added onBack handler to ScreenCSS component
* Added setEditorCanvasContainerView to reset view state
* Added missing dependencies for view state management
* Fixed Additional CSS button not working after navigation
@t-hamano t-hamano self-requested a review January 31, 2025 08:01
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 31, 2025
t-hamano
t-hamano approved these changes Jan 31, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

This approach looks great. The process of changing the canvas view via the onBack prop is also present in the Revisions button.

Additionally, it doesn't seem right that the internal canvas view remains in global-styles-css even though we've returned from the CSS screen to the previous screen, so it seems reasonable to update the canvas view with undefined.

Accessing the CSS screen via the command palette also works as expected👍

@t-hamano t-hamano merged commit bfe6dd8 into WordPress:trunk Jan 31, 2025
69 of 70 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.3 milestone Jan 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

Assignees
No one assigned
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 20.3
Development

Successfully merging this pull request may close these issues.

Global Styles: Additional CSS button doesn't work on the second click
2 participants
@Infinite-Null @t-hamano