Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#45242 closed defect (bug) (fixed)

Twenty Thirteen: Issues in theme’s Gutenberg support & styles

Reported by: laurelfulford's profile laurelfulford Owned by: laurelfulford's profile laurelfulford
Milestone: 5.0 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch, has-screenshots, commit, dev-reviewed, fixed-5.0
Focuses: Cc:

Description

I’ve re-reviewed the Gutenberg support that added in #45041, primarily to find anything that might have been missed, but also make sure none of the other changes happening during 5.0 development so far created a need for theme updates, too.

I opted to combine my findings per theme into one ticket, since many of the issues showed up in more than one of the default themes — it seemed like it would make it easier to review and commit these fixes, given the timeline.

In Twenty Thirteen, I found these issues:

  1. Centred widget lists (Categories, Archives…) need to have the text centred, to match the editor.
  2. The cover blocks need to have their styles updated to add the newer non -image- variations of the cover block classes (.wp-block-cover and .wp-block-cover-text)
  3. The Media & Text block does not have spacing underneath it.
  4. In the editor, column blocks are not displaying as ‘full’ or ‘wide’
  5. On the front-end, full and wide table blocks are narrow; they should span the full width, like in the editor.
  6. On the front-end, wide blocks seem a bit too wide in larger browser windows — this is due to the fact full blocks max out at 1600px to fit in Twenty Thirteen’s design. Wide blocks should do something similar.
  7. Editor width selectors can be simplified to just use wp-block in the Gutenberg 4.2 RC.

Attachments (14)

twenty-thirteen-centred-categories-before.png (100.5 KB) - added by laurelfulford 6 years ago.
1. Centred category widget, not being centred
twenty-thirteen-media-text-before.png (428.0 KB) - added by laurelfulford 6 years ago.
3. Media & Text block, without spacing underneath it
twenty-thirteen-full-column-block-before.png (26.5 KB) - added by laurelfulford 6 years ago.
4. Editor - full and wide column blocks not filling full width
twenty-thirteen-wide-full-table-before.png (23.1 KB) - added by laurelfulford 6 years ago.
5. Wide and full table blocks not filling whole space
twenty-thirteen-wide-blocks-too-wide-before.png (1.4 MB) - added by laurelfulford 6 years ago.
6. Wide blocks feel too wide in large browser windows
45242.patch (4.6 KB) - added by laurelfulford 6 years ago.
twenty-thirteen-centred-categories-after.png (83.4 KB) - added by laurelfulford 6 years ago.
1. Centred category widget, fixed
twenty-thirteen-media-text-after.png (426.8 KB) - added by laurelfulford 6 years ago.
3. Media & Text block, after fix
twenty-thirteen-full-column-block-after.png (26.1 KB) - added by laurelfulford 6 years ago.
4. Editor - full and wide column blocks fixed, filling the space
twenty-thirteen-wide-full-table-after.png (18.6 KB) - added by laurelfulford 6 years ago.
5. Wide and full table blocks, now filling full space
twenty-thirteen-wide-blocks-too-wide-after.png (1.2 MB) - added by laurelfulford 6 years ago.
6. Wide blocks fixed, a bit narrower when in large browser windows
45242.1.patch (5.3 KB) - added by laurelfulford 6 years ago.
twenty-thirteen-media-text-remove-margin-from-last-child.png (412.8 KB) - added by laurelfulford 6 years ago.
Twenty Thirteen - remove margin from below last child in Media & Text block
twenty-thirteen-centre-bullets-in-centred-widget-blocks.png (48.9 KB) - added by laurelfulford 6 years ago.
Twenty Thirteen - centre bullets in list-based centred widget blocks

Change History (23)

@laurelfulford
6 years ago

  1. Centred category widget, not being centred

@laurelfulford
6 years ago

  1. Media & Text block, without spacing underneath it

@laurelfulford
6 years ago

  1. Editor - full and wide column blocks not filling full width

@laurelfulford
6 years ago

  1. Wide and full table blocks not filling whole space

@laurelfulford
6 years ago

  1. Wide blocks feel too wide in large browser windows

@laurelfulford
6 years ago

@laurelfulford
6 years ago

  1. Centred category widget, fixed

@laurelfulford
6 years ago

  1. Media & Text block, after fix

@laurelfulford
6 years ago

  1. Editor - full and wide column blocks fixed, filling the space

@laurelfulford
6 years ago

  1. Wide and full table blocks, now filling full space

@laurelfulford
6 years ago

  1. Wide blocks fixed, a bit narrower when in large browser windows

#1 @laurelfulford
6 years ago

45242.patch fixes all of the above issues; I only included screenshots for specific updates where it seemed helpful.

#2 @davidakennedy
6 years ago

  • Keywords commit added; needs-testing removed

@laurelfulford I gave this patch a spin and it looks good to go. Marking it as such.

#3 @pento
6 years ago

  • Keywords dev-reviewed added

Same thing with the uncentered dot points as in Twenty Eleven, but otherwise, good to go.

@laurelfulford
6 years ago

Twenty Thirteen - remove margin from below last child in Media & Text block

@laurelfulford
6 years ago

Twenty Thirteen - centre bullets in list-based centred widget blocks

#4 @laurelfulford
6 years ago

Thanks @davidakennedy & @pento!

45242.1.patch makes a couple small updates:

  • Makes bullets in centred widget blocks be centred with the rest of the text.
  • Fixes an issue @davidakennedy noted from the other patches: it makes sure the bottom margin on the last paragraph in the Media & Text block doesn't add a bunch of extra space underneath.

#5 @pento
6 years ago

🎉

#6 @davidakennedy
6 years ago

The latest patch looks good to me, @laurelfulford.

#7 @laurelfulford
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 43872:

Twenty Thirteen: Fix issues with theme's Gutenberg support.

A handful of issues were missed in Twenty Thirteen's Gutenberg support, added in #45041. This commit includes the following fixes:

  • Center text and bullets in list-based widget blocks, when block itself is centered.
  • Prevent full and wide aligned blocks from getting wider than Twenty Thirteen's design.
  • Prevent wide aligned blocks from getting too wide, as they can seem out of proportion with the full aligned blocks.
  • Make sure full and wide blocks display at the correct width in the editor.
  • Include non "image" variations of the Cover block classes .wp-block-cover and .wp-block-cover-text in the styles.
  • Make sure wide and full aligned Table blocks span the available width on the front end.
  • Add spacing underneath the Media & Text block, but make sure the final paragraph in the block doesn't add too much space.
  • Simplify selectors used to set editor width to just .wp-block.

Props pento, davidakennedy.
Fixes #45242.

#8 @SergeyBiryukov
6 years ago

  • Keywords fixed-5.0 added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for trunk.

#9 @desrosj
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 44152:

Bundled Themes: Expand initial block editor support.

A handful of items were missed when adding initial support for the new block editor to bundled themes in [43793]-[43800]. This adds support for those missed items.

Props pento, davidakennedy, laurelfulford.

Merges [43869], [43870], [43871], [43872], [43873], [43874], [43875], [43876] to trunk.

Fixes #45238, #45239, #45240, #45242, #45243, #45244, #45245, #45246.

Note: See TracTickets for help on using tickets.