gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Style Book: clean up layout

Open ciampo opened this issue 4 months ago • 2 comments

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:

Screenshot 2024-10-18 at 18 56 03

ciampo avatar Oct 18 '24 17:10 ciampo