Opened 6 years ago
Closed 6 years ago
#45039 closed task (blessed) (fixed)
Twenty Eleven: Update theme to add Gutenberg styles and support
Reported by: | laurelfulford | Owned by: | laurelfulford |
---|---|---|---|
Milestone: | 5.0 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch commit fixed-5.0 |
Focuses: | Cc: |
Description
This ticket is to add Gutenberg styles and support for Twenty Eleven, so it best takes advantage of the new editor.
For default themes, at the very least this would include adding styles for blocks to make sure they match the rest of the theme’s design, adding Gutenberg-specific editor styles for a better WYSIWYG experience, and adding theme support for the editor color palette.
Each default theme’s unique design should be considered for whether it makes sense to add support for wide alignments, and the best approach.
Attachments (12)
Change History (24)
#2
@
6 years ago
45039.1.patch is based on the original patch, and fixes up some minor issues and RTL styles. It also adds an editor colour palette based on Twenty Eleven's colour scheme (screenshot below).
#3
@
6 years ago
Great work so far @laurelfulford!!!
Here are a few things I found while testing your patch:
- The Gallery Block on the front-end
.wp-block-gallery
and back-end.editor-block-list__block ul
has amargin-left: 2.5em;
which is causing a misalignment, see image 45039-gallery-margin-left.png - Table padding is a little different between the back and front-end. Front-end is
padding: 6px 10px 6px 0;
and back-end ispadding: .5em;
- I know that the button styles match the Post Comment button, but IMO the text should be centered in the buttons
#4
@
6 years ago
Thanks @ianbelanger! It's funny, I was ready to post an updated patch with some fixes, and I completely missed the stuff you found :D
45039.2.patch fixes the following:
- Preemptively fixes the large quote block sizing issues reported in Twenty Fifteen and Sixteen
- Removes the unnecessary side margin on the gallery
- Updates the table spacing in the editor to be consistent with the front-end
- Evens out the button padding (that was bugging me too!).
- Changes enqueue method for blocks to swap
get_theme_file_uri()
withget_template_directory_uri()
, to match other enqueues; it also switches the method of versioning it from numeric to date-based.
Also, the original patch added a folder for css
for the blocks to live in. But I think @nielslange's approach for Twenty Ten in #45038 makes more sense: it just adds the new CSS files with the existing CSS files, and doesn't start adding folders. So I've updated this patch to do the same, and moved the blocks.css and editor-blocks.css to the root of the theme.
#5
@
6 years ago
Hi @laurelfulford! Nice work – looking solid. I found a few small things:
- Subhead blocks different on front end and in editor (color).
- Margins are off on cover images that are aligned on front end.
- Margins on the headings are different in the editor than on the front end.
- Quote block has a different font in the editor than on the front end.
Let me know if you have any questions!
#6
@
6 years ago
Thanks @davidakennedy!
45039.3.patch does the following:
- Fixes margins on the aligned cover image blocks on the front-end
- Fixes the font used for quotes in the editor
Subhead blocks different on front end and in editor (color).
I mentioned this in the feedback in #45041 too: the subhead block has been deprecated, so I haven't been correcting styles for it :)
Margins on the headings are different in the editor than on the front end.
I played around with this one, but opted not to change it. You can change the margins on the editor blocks in the back end, but it causes the 'hit' areas for each block to start overlapping. This means if you try to click one, you're just as likely to click the one below it, because they're (invisibly) overlapping.
I'll attach some screenshots to show the front-end and back-end for comparison, as well as the editor blocks when they're overlapping. It is a very noticeable difference in spacing, which is kind of a bummer, but I think the best option is to leave it as is.
#7
@
6 years ago
- Keywords commit added; needs-testing removed
I played around with this one, but opted not to change it. You can change the margins on the editor blocks in the back end, but it causes the 'hit' areas for each block to start overlapping.
@laurelfulford Makes sense. That's a good call to leave it.
This looks good to commit for Beta. Marking it as so in case you can get to it before me today.
#9
@
6 years ago
- Keywords fixed-5.0 added
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for trunk.
#10
@
6 years ago
- Keywords changed from has-patch, commit, fixed-5.0 to has-patch commit fixed-5.0
I was testing the websites I support with WordPress 5.0 RC and found a bug in the block editor styles of TwentyEleven. On line 26 of editor-blocks.css
the rule should be font-weight
, not font-size
. Currently this causes the editor to show everything with 300px font size.
Let me know if you need more info or if I can help in other way.
#11
@
6 years ago
Eep, thanks for the report, @gonzomir! I've created a new ticket for that issue here: #45421
I've tested a few browsers (current versions of Firefox, Safari, Chrome on Mac, and IE 11, 15, 16, 17 via Browserstack), and haven't been able to recreate the issue with the font size using 300px. This should be corrected in the code anyway, but can you please comment with what browser & version you saw the issue in? This would be a big help in making sure the details are complete in #45421, and for testing :) Thanks in advance!
I'll keep an eye on #45045 and incorporate anything decided there to the other themes, but since Beta 1 is coming up fast (October 19th), I figured it would be good to get the basic patches posted for the other themes.
45039.patch helps make sure the Gutenberg blocks match Twenty Eleven's styles on the front-end, and adds styles for the editor.
Twenty Eleven has a couple odd challenges I haven't seen in the other themes yet that may need to be revisited:
I'm also attaching some screenshots of the editor before and after, since it's the most dramatic change, but if there's anything else specific anyone would like to see here, let me know!