Opened 6 years ago
Closed 6 years ago
#45038 closed task (blessed) (fixed)
Twenty Ten: Update theme to add Gutenberg styles and support
Reported by: |
|
Owned by: |
|
---|---|---|---|
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 Ten, 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 (13)
Change History (26)
#1
@
6 years ago
@laurelfulford Please note that I only created the CSS statements that are needed in order to show the Gutenberg generated elements in the Twenty Ten look. Thus, in comparison to your other patches for the Twenty X series, my patch is rather minimalistic.
#4
@
6 years ago
Sounds great, @laurelfulford. I'm looking forward to receiving your feedback on it.
#5
@
6 years ago
- Keywords has-patch has-screenshots added
Thanks again for the patch, @nielslange!
45038.1.patch is an update based on your work. I made some small fixes to what was there:
- Redid some selectors that weren’t Gutenberg-specific (like .wp-caption), and simplified a couple more.
- Updated spaces to tabs to match WordPress coding standards.
- Reordered the blocks to match the other patches.
... And I added a few things based on what I found in other themes:
- Added styles for some of the blocks to match Twenty Ten, including removing borders from the quote block, and adjusting the caption overlay on the gallery block so it didn’t overhang the images (spotted this in Twenty Eleven, too).
- Made some small adjustments for RTL languages.
- Added a custom colour palette based on Twenty Ten's colour scheme (screenshot below)
#7
@
6 years ago
45038.2.patch preemptively fixes a few things I missed that came up in other reviews:
- Removes bullets from the Related Posts block in the editor when set to Grid layout, and fixes the spacing.
- Makes sure the 'large' style of the quote block is the correct size in the editor.
- Removes margins on the side of the gallery.
- Switches the versioning on the blocks.css style enqueue to use the date, rather than numbers.
#8
@
6 years ago
- Keywords has-patch has-screenshots removed
Found a few image margin issues here:
- Image margins need some tweaks (sorry!); bottom margins on images should be 24px (to match paragraph margins) instead of 20px (applied to
figure
tags) - Aligned images inherit margins from core Gutenberg, but they don’t match theme alignments for
.alignleft
and.alignright
(eg:1em
vs24px
) - Images with captions are missing padding on the left and right so the background color frames the image, but this _may_ be tricky to duplicate because the block doesn’t have any styles that are applied to the parent block when a caption is present.
- Widget blocks that are center aligned lose their left margin so the list marker sits outside the content area.
Looks good otherwise!
#9
@
6 years ago
Thanks @crunnells!
45038.3.patch does the following:
- Fixes up bottom margin issues with the image block, and the side margins on left and right aligned blocks
- Fixed margins on centred list widget blocks
Images with captions are missing padding on the left and right so the background color frames the image, but this _may_ be tricky to duplicate because the block doesn’t have any styles that are applied to the parent block when a caption is present.
This same issue came up in Twenty Eleven. Like that theme, I opted to just remove the background -- I think it makes more sense to embrace it looking different, than trying to make it look half the same :)
#10
@
6 years ago
- Keywords has-patch commit added; needs-testing removed
@laurelfulford This one looks good to go. Marking it as such.
Page Markup And Formatting - Frontend - before