WordPress.org

Make WordPress Core

Changeset 43872


Ignore:
Timestamp:
11/06/2018 01:21:06 AM (13 months ago)
Author:
laurelfulford
Message:

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.

Location:
branches/5.0/src/wp-content/themes/twentythirteen/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentythirteen/css/blocks.css

    r43796 r43872  
    8787}
    8888
    89 /* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */
    90 
    9189@media (min-width: 1600px) {
     90
     91    /* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */
    9292    body:not(.sidebar) .alignfull {
    9393        margin-left: calc(50% - 800px);
     
    9797    }
    9898
     99    body:not(.sidebar) .wp-block-columns.alignfull,
     100    body:not(.sidebar) .wp-block-audio.alignfull,
     101    body:not(.sidebar) .wp-block-table.alignfull,
     102    body:not(.sidebar) .wp-block-latest-comments.alignfull {
     103        margin-left: calc(50% - 780px);
     104        margin-right: calc(50% - 780px);
     105    }
     106
    99107    body:not(.sidebar) .wp-block-gallery.alignfull {
    100108        margin-left: calc(50% - 808px); /* Adjust for gallery margins */
     
    102110        width: auto;
    103111        max-width: 1000%;
     112    }
     113
     114    /* Make sure the 'wide' alignment doesn't get too wide. */
     115    body:not(.sidebar) .alignwide {
     116        margin-left: -230px;
     117        margin-right: -230px;
    104118    }
    105119}
     
    173187}
    174188
    175 /* Cover Image */
    176 
    177 .wp-block-cover-image.aligncenter {
     189/* Cover */
     190
     191.wp-block-cover-image.aligncenter,
     192.wp-block-cover.aligncenter {
    178193    clear: both;
    179194    display: flex;
     
    263278}
    264279
     280body:not(.sidebar) .wp-block-table.alignwide,
     281body:not(.sidebar) .wp-block-table.alignfull {
     282    width: 100%;
     283}
     284
     285/* Some acrobatics to make sure the table blocks always fill the available space. */
     286
     287@media (max-width: 1599px) {
     288    body:not(.sidebar) .wp-block-table.alignwide {
     289        width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
     290    }
     291
     292    body:not(.sidebar) .wp-block-table.alignfull {
     293        width: 96vw;
     294    }
     295}
     296
     297@media (max-width: 999px) {
     298    body.sidebar .wp-block-table.alignwide {
     299        width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
     300    }
     301
     302    body.sidebar .wp-block-table.alignfull {
     303        width: 96vw;
     304    }
     305}
     306
     307@media (max-width: 654px) {
     308    body:not(.sidebar) .wp-block-table.alignwide,
     309    body.sidebar .wp-block-table.alignwide {
     310        width: 96vw;
     311    }
     312}
     313
     314@media (min-width: 1600px) {
     315    body:not(.sidebar) .wp-block-table.alignwide {
     316        width: 1064px;
     317    }
     318
     319    body:not(.sidebar) .wp-block-table.alignfull {
     320        width: 1560px;
     321    }
     322}
     323
    265324/*--------------------------------------------------------------
    2663255.0 Blocks - Layout Elements
     
    320379}
    321380
     381/* Media & Text */
     382
     383.wp-block-media-text {
     384    margin-bottom: 24px;
     385}
     386
     387.wp-block-media-text *:last-child {
     388    margin-bottom: 0;
     389}
     390
    322391/*--------------------------------------------------------------
    3233926.0 Blocks - Widgets
    324393--------------------------------------------------------------*/
     394
     395/* Archives, Categories & Latest Posts */
     396
     397.wp-block-archives.aligncenter,
     398.wp-block-categories.aligncenter,
     399.wp-block-latest-posts.aligncenter {
     400    list-style-position: inside;
     401    text-align: center;
     402}
    325403
    326404/* Latest Comments */
  • branches/5.0/src/wp-content/themes/twentythirteen/css/editor-blocks.css

    r43796 r43872  
    5353--------------------------------------------------------------*/
    5454
    55 /* Main column width */
    56 
    57 .edit-post-visual-editor .editor-post-title__block,
    58 .edit-post-visual-editor .editor-default-block-appender,
    59 .edit-post-visual-editor .editor-block-list__block {
    60     max-width: 634px; /* 604 + 30 for editor block padding */
     55/* Main content width */
     56
     57.wp-block {
     58    max-width: 634px; /* 604px + 30px to account for padding */
     59}
     60
     61.wp-block.alignwide,
     62.wp-block.alignfull {
     63    max-width: inherit;
     64}
     65
     66[class^="wp-block-"] .wp-block {
     67    max-width: 100%;
    6168}
    6269
     
    231238}
    232239
    233 /* Cover Image */
    234 
    235 .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text {
     240/* Cover */
     241
     242.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text,
     243.edit-post-visual-editor .editor-block-list__block .wp-block-cover p.wp-block-cover-text {
    236244    font-size: 32px;
    237245    line-height: 1.25;
     
    340348}
    341349
     350/* Media & Text */
     351
     352.wp-block-media-text *:last-child {
     353    margin-bottom: 0;
     354}
     355
    342356/*--------------------------------------------------------------
    3433577.0 Blocks - Widgets
    344358--------------------------------------------------------------*/
     359
     360/* Archives, Categories & Latest Posts */
     361
     362[data-align="center"] .wp-block-archives ul,
     363[data-align="center"] .wp-block-categories ul,
     364[data-align="center"] .wp-block-latest-posts ul {
     365    list-style-position: inside;
     366    text-align: center;
     367}
    345368
    346369/* Latest Comments */
Note: See TracChangeset for help on using the changeset viewer.