Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-27 06:42:56 +02:00
Code Issues Projects Releases Wiki Activity

Twenty Thirteen: Add styles for the new Group block.

Browse Source 
Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments. 

Props @kjellr.
Fixes #46778.


Built from https://develop.svn.wordpress.org/trunk@45606


git-svn-id: http://core.svn.wordpress.org/trunk@45417 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
laurelfulford 2019-07-07 20:49:55 +00:00
parent 5b4b6d98ce
commit 83e19085a3
3 changed files with 127 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
wp-content/themes/twentythirteen/css/blocks.css
View File

@ -404,6 +404,113 @@ body:not(.sidebar) .wp-block-table.alignfull {
max-width: 100%;
}
/* Group Block: Default Alignment */
.wp-block-group,
.wp-block-group.has-background {
margin-bottom: 24px;
}
.wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * {
width: 604px;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.wp-block-group.has-background:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > .alignfull {
width: calc(100% + 60px);
max-width: calc(100% + 60px);
margin-left: -30px;
}
.wp-block-group:not(.alignfull) .wp-block-columns.alignfull {
margin-left: auto;
margin-right: auto;
}
/* Group Block: Wide Alignment */
.wp-block-group.alignwide > .wp-block-group__inner-container > *,
.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
max-width: 604px;
margin-left: auto;
margin-right: auto;
}
.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
width: 100%;
max-width: 100%;
}
.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull {
width: calc(100% + 60px);
max-width: calc(100% + 60px);
margin-left: -30px;
}
@media (max-width: 664px) {
.wp-block-group:not(.has-background).alignwide {
margin-left: 0;
margin-right: 0;
}
.wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignwide,
.wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignfull {
width: auto;
max-width: 1600px;
margin-left: calc(25% - 25vw);
margin-right: calc(25% - 25vw);
}
}
/* Group Block: Full Alignment */
@media (max-width: 664px) {
.wp-block-group:not(.has-background).alignfull {
margin-left: 0;
margin-right: 0;
}
.wp-block-group.has-background.alignfull > *:not(.alignfull) {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 999px) {
body.sidebar .wp-block-group.alignfull:not(.has-background) {
margin-left: 0;
margin-right: 0;
}
body.sidebar .wp-block-group.alignfull.has-background > .wp-block-group__inner-container {
max-width: 604px;
margin: 0 auto;
}
body.sidebar .wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
@media (min-width: 665px) {
body:not(.sidebar) .wp-block-group.alignfull,
body:not(.sidebar) .wp-block-group.has-background.alignfull {
padding: 20px calc( (100vw - 604px ) / 2 ); /* Reproduces the padding of entry-content, so that default block rules apply properly inside of this block. */
}
}
@media (min-width: 1600px) {
body:not(.sidebar) .wp-block-group.alignfull,
body:not(.sidebar) .wp-block-group.has-background.alignfull {
padding: 20px 498px; /* Above 1600px, these need fixed left/right padding. This works out to ((1600px - 604px) / 2) */
}
}
/* Media & Text */
.wp-block-media-text {

19
wp-content/themes/twentythirteen/css/editor-blocks.css
View File

@ -361,6 +361,25 @@ p.has-drop-cap:not(:focus)::first-letter {
margin-bottom: 0;
}
/* Group */
.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block {
max-width: 634px;
}
.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
max-width: 1100px;
}
.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
max-width: 100%;
}
.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
width: calc(100% + 60px);
max-width: calc(100% + 60px);
}
/*--------------------------------------------------------------
7.0 Blocks - Widgets
--------------------------------------------------------------*/

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3-alpha-45605';
$wp_version = '5.3-alpha-45606';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.