gutenberg
gutenberg copied to clipboard
Style Book: clean up layout
What?
This PR simplifies the layout of the style book
Why?
Current layout is based on absolute positioning, which feels hacky and can lead to unexpected layouts down the line
How?
Switched to a vertical flexbox layout, which allows for the removal of a bunch of styles
Testing Instructions
- Visit the style book in the site editor
- Make sure the layout works as intended: the tablist stays at the top, while the canvas scrolls its contents
- Try switching tabs, and resizing the canvas
To test the layout without tabs, you can apply this diff:
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 42b6e3f4fc..50e8e8e85e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -119,7 +119,7 @@ function StyleBook( {
} }
>
{ resizeObserver }
- { showTabs ? (
+ { false ? (
<Tabs>
<div className="edit-site-style-book__tablist-container">
<Tabs.TabList>
Screenshots or screencast
With tabs:
https://github.com/user-attachments/assets/8f97f76e-6db5-4aa0-9971-46c4603eb4d1
Without tabs: