This repository has been archived by the owner on Jan 15, 2019. It is now read-only.
Update front end margins to match the editor on desktop screens #502
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Matches the spacing used in the editor. Only effects breakpoints above 768px.
Eliminate unnecessary styles for blocks, add styles for wp-captions.
So they aren't mistakenly off-centered.
And make sure it doesn't disappear off screen on mobile.
Also, wrap our global styles in an .entry class to make them a little more specific.
allancole
suggested changes
Nov 7, 2018
|
🤔 Ah, I bet that's due to adding the |
|
@allancole Should be all set now. Mind re-testing? |
allancole
approved these changes
Nov 8, 2018
kjellr
added a commit
that referenced
this pull request
Nov 8, 2018
A followup to #502. Closes #236. Adjusts editor styles between `600px` and `768px` so that the margins are more closely aligned to the front end. Note that this doesn't make them 100% exact: the editor has about 10px more space on either side. This is because the editor requires more space for the hover/editor controls. We _could_ match these up exactly by adjusting the front end, but I tend to prefer tighter margins in general and I think this is close enough.
This was referenced Nov 8, 2018
Closed
3 tasks
kjellr
added a commit
that referenced
this pull request
Nov 13, 2018
As a result of our improved margins in #502, the styles here aren't necessary (and actually end up breaking things when they're left in).
jeherve
pushed a commit
to Automattic/jetpack
that referenced
this pull request
Nov 15, 2018
<!--- Provide a general summary of your changes in the Title above --> Fixes #10585 Fixes #10587 #### Changes proposed in this Pull Request: <!--- Explain what functional changes your PR includes --> - [x] Removes margin styles from Related Posts module, Recipe shortcodes and Presentation shortcodes. - [x] Layout margin styles now come from the theme to prevent layout issues with other plugins. See: WordPress/twentynineteen#502 and WordPress/twentynineteen#534 - [x] Also remove margin styles from Akismet privacy notice since it also gets fixed by the theme here: WordPress/twentynineteen#533 #### Testing instructions: <!-- Please include detailed testing steps, explaining how to test your change. --> <!-- Bear in mind that context you working on is not obvious for everyone. --> <!-- Adding "simple" configuration steps will help reviewers to get to your PR as quickly as possible. --> <!-- "Before / After" screenshots can also be very helpful when the change is visual. --> * Test the Recipe or Presentation shortcode with the latest version of Twenty Nineteen: https://github.com/WordPress/twentynineteen/ * Test the layout against the Akismet notice with the latest version of Twenty Nineteen: https://github.com/WordPress/twentynineteen/ #### Proposed changelog entry for your changes: <!-- Please do not leave this empty. If no changelog entry needed, state as such. --> * Fix layout issues in Jetpack modules and shortcodes for Twenty Nineteen theme
jeherve
pushed a commit
to Automattic/jetpack
that referenced
this pull request
Nov 15, 2018
<!--- Provide a general summary of your changes in the Title above --> Fixes #10585 Fixes #10587 #### Changes proposed in this Pull Request: <!--- Explain what functional changes your PR includes --> - [x] Removes margin styles from Related Posts module, Recipe shortcodes and Presentation shortcodes. - [x] Layout margin styles now come from the theme to prevent layout issues with other plugins. See: WordPress/twentynineteen#502 and WordPress/twentynineteen#534 - [x] Also remove margin styles from Akismet privacy notice since it also gets fixed by the theme here: WordPress/twentynineteen#533 #### Testing instructions: <!-- Please include detailed testing steps, explaining how to test your change. --> <!-- Bear in mind that context you working on is not obvious for everyone. --> <!-- Adding "simple" configuration steps will help reviewers to get to your PR as quickly as possible. --> <!-- "Before / After" screenshots can also be very helpful when the change is visual. --> * Test the Recipe or Presentation shortcode with the latest version of Twenty Nineteen: https://github.com/WordPress/twentynineteen/ * Test the layout against the Akismet notice with the latest version of Twenty Nineteen: https://github.com/WordPress/twentynineteen/ #### Proposed changelog entry for your changes: <!-- Please do not leave this empty. If no changelog entry needed, state as such. --> * Fix layout issues in Jetpack modules and shortcodes for Twenty Nineteen theme
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Partially resolves #236
Moves our tablet + desktop margins around a bit so that there's greater alignment between our front and back end. Basically: if you're in full-screen mode in Gutenberg (on a screen above
768pxwide), you should see nearly the exact same margins/grid for your post content when you switch to the front end.style-editor.css, so starts by adding10%left/right margins to.entry-content. There are a few extra pixels added to sync up with Gutenberg's block/container padding. From there, it just modifies the existing margins + max-widths of blocks (and other non-block post elements) so that they fit the new grid.I ran through my entire test site (including all the theme unit test posts), and things looked fairly solid.
*In order to fully resolve #236, we'll need another PR that syncs up the margins between
600pxand768pxviewports.GIF: