-
Notifications
You must be signed in to change notification settings - Fork 165
Update editor alignment to match front end #22
Conversation
This must be included in a seprate stylesheet (for now), because of Gutenberg's auto-classname injection in style-editor.scss.
Width: 125% + 88px of container margins + 28px of block margins Position: 12.5% (10% of 125) - 46px of container margins - 14px of block margins.
This way they align with the right edge of alignwide blocks, just like on the frontend.
For simpler code and better compatibility with older browsers.
Got this working with fairly simple markup in the end. 🙌 Here's a video of it in action: This only kicks in at breakpoints larger than I gave this a spin in every browser I've got (Safari, Chrome, FF, IE11, and mobile Safari) but this could use some additional testing just to be sure it's working alright. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great!
A followup to #22. This PR removes our secondary `style-editor-frame.css` file, and consolidates all of our editor styles into `style-editor.css`. Initially, the standard editor stylesheet was limited in scope to individual blocks, which meant we were unable to style the general alignment of the page, as well as items like the page title and default appender. The scope of `style-editor.css` is being expanded in WordPress/gutenberg#10956 , so we're now able to style those elements in a single stylesheet. Some minor style tweaks were necessary to make our original styles work in this context, but for the most part this is identical to #22.
The front end of the theme left-aligns all content, and lets wide width blocks extend beyond the text column on the right. We need to match the front end to the back end as much as possible, so this PR is a rough first stab at getting that alignment in place.
Before:
After: