Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Update editor alignment to match front end #22

Merged
merged 13 commits into from
Oct 22, 2018

Conversation

kjellr
Copy link
Collaborator

@kjellr kjellr commented Oct 16, 2018

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.

  • Gutenberg currently auto-prefixes editor block stylesheets. That won't work for us here since these styles need to effect the frame of the page, not just individual blocks. Until a solution for that it sorted out, this introduces a second editor stylesheet. (This also allows us to customize the page title.)
  • So far, this doesn't effect any items that are aligned to the right. Those should end up hanging off the right of the text column too.
  • Once we have this working on the back end, we'll likely want to post the markup over to the frontend so it matches.

Before:
screen shot 2018-10-16 at 10 41 00 am

After:
screen shot 2018-10-16 at 10 40 30 am

This must be included in a seprate stylesheet (for now), because of Gutenberg's auto-classname injection in style-editor.scss.
@kjellr kjellr added enhancement New feature or request in progress labels Oct 16, 2018
@kjellr kjellr self-assigned this Oct 16, 2018
kjellr added 11 commits October 21, 2018 20:21
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.
Swapping order of font size/family to match the declarations above.
For simpler code and better compatibility with older browsers.
@kjellr
Copy link
Collaborator Author

kjellr commented Oct 22, 2018

Got this working with fairly simple markup in the end. 🙌

Here's a video of it in action:
https://cloudup.com/cXuFNYeHJ9o

This only kicks in at breakpoints larger than 768px. Otherwise, everything's just a single column anyway. The main caveat for this whole PR is just the addition of a separate editor stylesheet, but that's necessary until we can customize the page title, editor frame margins, and appender text within style-editor.css (we can't right now because of Gutenberg's auto-prefixing).

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.

@allancole allancole self-requested a review October 22, 2018 14:14
Copy link
Collaborator

@allancole allancole left a comment

Choose a reason for hiding this comment

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

Looks great!

@kjellr kjellr merged commit f685854 into master Oct 22, 2018
@kjellr kjellr deleted the try/updating-editor-alignment branch October 22, 2018 14:23
kjellr added a commit that referenced this pull request Oct 24, 2018
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.
@kjellr kjellr mentioned this pull request Oct 24, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants