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

Regression regarding layout in the Site Editor #58044

Closed
t-hamano opened this issue Jan 21, 2024 · 10 comments · Fixed by #59014
Closed

Regression regarding layout in the Site Editor #58044

t-hamano opened this issue Jan 21, 2024 · 10 comments · Fixed by #59014
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Priority] High Used to indicate top priority items that need quick attention [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release

Comments

@t-hamano
Copy link
Contributor

t-hamano commented Jan 21, 2024

After #57938 was merged, there seem to be some layout breakdowns in the site editor. This issue summarizes the problems I discovered.

Note

The following issue was discovered with the "New admin view" experimental flag enabled. There may be other issues if this experimental flag is turned off. One of them is attempted to be resolved in #58039.

Templates are not displayed in the mobile layout

In fact, the expected screenshot itself doesn't seem right. I think the preview area itself needs to be hidden in the mobile layout.

Expected Actual (trunk)
image image

Canvas area and data view area overlap

You will see this issue when the viewport width is approximately between 800px and 1100px.

Expected Actual (trunk)
image image
Fixed

The headers and the footer are not fixed on Templates, Template Parts, and Pattern pages

Expected Actual (trunk)
image image
image image

Top right and bottom right corners are not rounded

Presumably, this can only be reproduced in the Chrome browser on Windows OS. It happens on All Templates, Template Parts, and Pattern pages.

Expected Actual (trunk)
expected actual

Extra space on top and right side

Expected Actual (trunk)
image image

Pattern padding

#58139 stabilizes the Patterns page with DataViews, so this issue effectively no longer needs to be fixed.

Disable the data views experiment to see this:

With the margin added to .edit-site-layout__area the vertical stroke on the left doesn't quite reach the top/bottom of the viewport, and the pattern thumbnails are prematurely clipped.

@t-hamano t-hamano added [Type] Regression Related to a regression in the latest release [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jan 21, 2024
@youknowriad
Copy link
Contributor

Thanks for flagging these regressions. Any help addressing some of them would be appreciated.

@jameskoster

This comment was marked as outdated.

@colorful-tones
Copy link
Member

@t-hamano have all the regressions noted been addressed in the merged PRs? If so, can we move this to ‘Done’? Or is further testing required?

@t-hamano
Copy link
Contributor Author

t-hamano commented Jan 24, 2024

have all the regressions noted been addressed in the merged PRs?

No, although resolved issues are grouped under the "Fixed" accordion, the following issues still remain.

  • Templates are not displayed in the mobile layout
  • Canvas area and data view area overlap
  • Pattern padding

@annezazu annezazu moved this to 📥 Todo in WordPress 6.5 Editor Tasks Jan 24, 2024
@t-hamano
Copy link
Contributor Author

Pattern padding

Disable the data views experiment to see this:

With the margin added to .edit-site-layout__area the vertical stroke on the left doesn't quite reach the top/bottom of the viewport, and the pattern thumbnails are prematurely clipped.

Update: #58139 stabilizes the Patterns page with DataViews, so this issue effectively no longer needs to be fixed.

@t-hamano
Copy link
Contributor Author

t-hamano commented Feb 3, 2024

The issues that currently remain are regarding the responsive layout and the mobile viewport. Especially when it comes to the mobile layout, there are two serious issues:

  • On the "Patterns" page, nothing happens when you click on a pattern category
  • Data view is not displayed on "Manage all pages" page

My understanding is that the data view has been stabilized on all pages and shipped in WP.6.5. I believe this issue should be fixed in WP6.5, so I would like to label this issue as a high priority.

6e8b0019e2ef259280095490dca77e80.mp4

@t-hamano t-hamano added the [Priority] High Used to indicate top priority items that need quick attention label Feb 3, 2024
@jameskoster jameskoster added the [Type] Bug An existing feature does not function as intended label Feb 5, 2024
@annezazu annezazu changed the title Regression regarding layout in the Site ditor Regression regarding layout in the Site Editor Feb 5, 2024
@annezazu
Copy link
Contributor

annezazu commented Feb 6, 2024

Might this be related or does this need a new issue? Noticed it today using WP playground on 6.5-alpha-57531

sidebar.site.editor.mov

@t-hamano
Copy link
Contributor Author

t-hamano commented Feb 6, 2024

Might this be related or does this need a new issue? Noticed it today using WP playground on 6.5-alpha-57531

This seems to occur when the page slug is extremely long. I was able to see this problem in WP6.4.3 as well, so I don't think it's related to this issue. Therefore, I think it would be better to submit a new issue.

@annezazu
Copy link
Contributor

annezazu commented Feb 6, 2024

Done :) #58748

@colorful-tones
Copy link
Member

I have had zero testing with the new admin views and thought this would be a great way to get started 🙃 . I'm unclear about the testing instructions, but I detailed what I tested below and hopefully it helps.

Templates are not displayed in the mobile layout.

I tested this against the following scenarios and obtained the same experience on all of them.

  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.4.3
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.4.3

This 👇 is what I saw for all of those 👆 scenarios

Site Editor > Templates view

Canvas area and data view area overlap

With viewport width at approximately between 800px and 1100px.

I tested this against the following scenarios and obtained the same experience on all of them.

  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.4.3
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.4.3

This 👇 is what I saw for all of those 👆 scenarios

Screen.Recording.2024-02-09.at.5.21.19.PM.mov

On the "Patterns" page, nothing happens when you click on a pattern category

I tested this against the following scenarios and obtained the same experience on all of them.

  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.4.3
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.4.3

This 👇 is what I saw for all of those 👆 scenarios. I confirmed that clicking on any of the pattern categories did nothing for all of the above scenarios. 🐛

Site Editor > Patterns screen

Data view is not displayed on "Manage all pages" page

I tested this against the following scenarios:

  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: On | WordPress 6.4.3

This 👇 is what I saw for these two 👆 scenarios.

all-pages-site-editor.mp4

I also tested against the following scenarios:

  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.5-alpha-57571 (nightly)
  • Gutenberg 19622fa | Gutenberg > Experiments > New Admin Views: Off | WordPress 6.4.3

This 👇 is what I saw for these two 👆 scenarios.

Site Editor > Pages > Manage All Pages screen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Priority] High Used to indicate top priority items that need quick attention [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants