Commit 79a7d970 authored by Jake Spurlock's avatar Jake Spurlock
Browse files

Bundled Theme: Ensure parity between the block editor and the front-end in twentynineteen. 

Alignments and blocks were not always appearing as they should in the admin.

- Wide alignments sometimes appear only as wide as the text column.
- Full and wide appear centered on the text column
- Full-width blocks sometimes do not take up the full width of the page, and other times they cause a horizontal scroll.
- Wide and full group block children take up the full width of the block by default.

Fixes #49843.
Props kjellr, Joen, poena.

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


git-svn-id: https://core.svn.wordpress.org/trunk@48364 1a063a9b-81f0-0310-95a4-ce76da25c4cd
parent ace85562

wp-content/themes/twentynineteen/style-editor.css

+79 −60
Original line number Diff line number Diff line
@@ -550,33 +550,49 @@ h6:lang(vi), figcaption:lang(vi), 
}



/** === Editor Frame === */

body .wp-block[data-align="full"] {

  width: calc(100% + 28px);

  max-width: calc(100% + 28px);

body .wp-block[data-align="full"],

body .wp-block.alignfull {

  width: calc(100% + 20px);

  max-width: calc(100% + 20px);

}



@media only screen and (min-width: 600px) {

  body .wp-block[data-align="full"] {

    width: calc( 100% + 116px);

    max-width: calc( 100% + 115px);

body .wp-block[data-align="left"],

body .wp-block.alignleft {

  margin-right: 1rem;

  width: inherit;

}



body .wp-block[data-align="right"],

body .wp-block.alignright {

  margin-left: 1rem;

  width: inherit;

}



body .wp-block[data-align="center"],

body .wp-block.aligncenter {

  margin-left: 0;

}



@media only screen and (min-width: 768px) {

  body .editor-writing-flow {

  body .block-editor-writing-flow {

    max-width: 80%;

    margin: 0 10%;

  }

  body .editor-default-block-appender,

  body .editor-block-list__block {

  body .block-editor-default-block-appender,

  body .block-editor-block-list__block {

    margin-left: 0;

    margin-right: 0;

  }

  body .wp-block[data-align="wide"] {

  body .wp-block[data-align="wide"],

  body .wp-block.alignwide {

    width: 100%;

  }

  body .wp-block[data-align="right"] {

    max-width: 125%;

  body .wp-block[data-align="full"],

  body .wp-block.alignfull {

    width: calc( 125% + 20px);

    max-width: calc( 125% + 20px);

    position: relative;

    left: -12.5%;

  }

}
@@ -777,6 +793,10 @@ figcaption, 
}



/** === Post Title === */

.editor-post-title__block {

  width: 100%;

}



.editor-post-title__block:before {

  background: #767676;

  content: "\020";
@@ -1346,139 +1366,138 @@ ul.wp-block-archives li ul, 
}



/** === Group Block === */

.wp-block[data-type="core/group"] > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

.wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],

.wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {

  margin-left: 0;

  margin-right: 0;

  left: 0;

}



.wp-block[data-type="core/group"] > .wp-block-group.has-background {

.wp-block-group.has-background {

  padding: 22px;

}



.wp-block[data-type="core/group"] > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],

.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {

  margin-left: -22px;

  width: calc(100% + 44px);

  max-width: calc(100% + 44px);

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

  .wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

    width: calc(8 * (100vw / 12));

  }

}



@media only screen and (min-width: 1168px) {

  .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

  .wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

    width: calc(6 * (100vw / 12 ));

  }

}



.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],

.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {

  padding-left: 0;

  padding-right: 0;

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

  .wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

    width: calc(8 * (100vw / 12) - 44px);

  }

}



@media only screen and (min-width: 1168px) {

  .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

  .wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

    width: calc(6 * (100vw / 12 ) - 44px);

  }

}



@media only screen and (min-width: 600px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {

    padding-left: 46px;

    padding-right: 46px;

  }

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container {

    width: 80%;

    margin-left: 10%;

    margin-right: 10%;

    padding-left: 48px;

    padding-right: 48px;

    padding-left: 10px;

    padding-right: 10px;

  }

}



.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {

  max-width: calc(100vw - (2 * 1rem));

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {

    max-width: calc(8 * (100vw / 12));

  }

}



@media only screen and (min-width: 1168px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {

    max-width: calc(6 * (100vw / 12));

  }

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="right"] {

    max-width: 125%;

  }

.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {

  padding-left: 10px;

  padding-right: 10px;

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="wide"] {

    width: calc(100% + 4px);

    max-width: calc(100% + 4px);

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {

    padding-left: 0;

    padding-right: 0;

  }

}



.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {

  max-width: calc(100vw + (2 * 1rem));

@media only screen and (min-width: 768px) {

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="right"] {

    max-width: 125%;

  }

}



@media only screen and (min-width: 600px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {

    width: calc(100% + 92px);

    left: -46px;

@media only screen and (min-width: 768px) {

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignwide {

    width: 100%;

    max-width: 100%;

  }

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {

    left: calc(-12.5% - 58px);

    width: calc(125% + 120px);

    max-width: calc(125% + 119px);

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],

  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {

    left: calc( -12.5% - 13px);

    width: calc( 125% + 26px);

    max-width: calc( 125% + 25px);

  }

}



.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {

.wp-block[data-align="full"] > .wp-block-group.has-background {

  padding: 22px 0;

}



@media only screen and (min-width: 600px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {

  .wp-block[data-align="full"] > .wp-block-group.has-background {

    padding-left: 0;

    padding-right: 0;

  }

}



.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],

.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {

  margin-left: 0;

  width: 100%;

}



@media only screen and (min-width: 600px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],

  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {

    width: calc(100% + 92px);

  }

}



@media only screen and (min-width: 768px) {

  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],

  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {

    width: calc(125% + 120px);

  }

}

wp-content/themes/twentynineteen/style-editor.scss

+123 −114
Original line number Diff line number Diff line
@@ -11,38 +11,53 @@ Twenty Nineteen Editor Styles 


body {



	.wp-block[data-align="full"] {

		width: calc(100% + 28px);

		max-width: calc(100% + 28px);

	.wp-block[data-align="full"],

	.wp-block.alignfull {

		width: calc(100% + 20px);

		max-width: calc(100% + 20px);

	}



	@include media(mobile) {

	.wp-block[data-align="left"],

	.wp-block.alignleft, {

		margin-right: $size__spacing-unit;

		width: inherit;

	}



		.wp-block[data-align="full"] {

			width: calc( 100% + 116px );

			max-width: calc( 100% + 115px );

	.wp-block[data-align="right"],

	.wp-block.alignright, {

		margin-left: $size__spacing-unit;

		width: inherit;

	}



	.wp-block[data-align="center"],

	.wp-block.aligncenter, {

		margin-left: 0;

	}



	@include media(tablet) {



		.editor-writing-flow {

		.block-editor-writing-flow {

			max-width: 80%;

			margin: 0 10%;

		}



		.editor-default-block-appender,

		.editor-block-list__block {

		.block-editor-default-block-appender,

		.block-editor-block-list__block {

			margin-left: 0;

			margin-right: 0;

		}



		.wp-block[data-align="wide"] {

		.wp-block[data-align="wide"],

		.wp-block.alignwide {

			width: 100%;

		}



		.wp-block[data-align="right"] {

			max-width: 125%;

		.wp-block[data-align="full"],

		.wp-block.alignfull {

			width: calc( 125% + 20px );

			max-width: calc( 125% + 20px );

			position: relative;

			left: -12.5%;

		}

	}

}
@@ -190,6 +205,7 @@ figcaption, 
/** === Post Title === */



.editor-post-title__block {

	width: 100%;

	@include post-section-dash;



	&:before {
@@ -779,38 +795,34 @@ ul.wp-block-archives, 
// size is different here. 

$group-block-background__padding: $font__size_base;



.wp-block[data-type="core/group"] {



	// Group block base styles

	> .wp-block-group {

.wp-block-group {



	// Child: Full alignment

		> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

	> .wp-block-group__inner-container > .wp-block[data-align="full"],

	> .wp-block-group__inner-container > .wp-block.alignfull {

		margin-left: 0;

		margin-right: 0;

		}

		left: 0;

	}



	// Group block with background color

	> .wp-block-group.has-background {

	&.has-background {

		padding: $group-block-background__padding;



		// Child: Full alignment

		> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

		> .wp-block-group__inner-container > .wp-block[data-align="full"],

		> .wp-block-group__inner-container > .wp-block.alignfull {

			margin-left: -$group-block-background__padding;

			width: calc(100% + #{$group-block-background__padding * 2});

			max-width: calc(100% + #{$group-block-background__padding * 2});

		}

	}

}



// Wide and full alignments

	&[data-align="wide"] > .is-block-content {



		// Group block base styles.

		> .wp-block-group {

.wp-block[data-align="wide"] > .wp-block-group {



			// Child blocks: Default alignments

			> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

	> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

		@include media(tablet) {

			width: calc(8 * (100vw / 12));

		}
@@ -821,17 +833,18 @@ $group-block-background__padding: $font__size_base; 
	}



	// Child blocks: Full alignment

			> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

	> .wp-block-group__inner-container > .wp-block[data-align="full"],

	> .wp-block-group__inner-container > .wp-block.alignfull {

		padding-left: 0;

		padding-right: 0;

	}

		}





	// Group block with background color

		> .wp-block-group.has-background {

	&.has-background {

		

		// Child blocks: Default alignments

			> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {

		> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {

			@include media(tablet) {

				width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});

			}
@@ -844,21 +857,13 @@ $group-block-background__padding: $font__size_base; 
}



// Full alignment

	&[data-align="full"] {



		// Group block base styles

		> .is-block-content > .wp-block-group {

.wp-block[data-align="full"] > .wp-block-group {



		// Margins & padding are added to this container to mimic 

		// the style + spacing of the .editor-writing-flow global 

		// container. This way, child items sync up with the placement 

		// and size of other top-level blocks. 

			> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {



				@include media(mobile) {

					padding-left: 46px;

					padding-right: 46px;

				}

		> .wp-block-group__inner-container {



			// 2px of extra padding are added to each side here

			// To better match up with the spacing of the whole
@@ -867,13 +872,12 @@ $group-block-background__padding: $font__size_base; 
				width: 80%;

				margin-left: 10%;

				margin-right: 10%; 

					padding-left: 48px;

					padding-right: 48px; 

				padding-left: 10px;

				padding-right: 10px;

			}



				// Child blocks: All alignments except full

				 > .wp-block:not([data-align="full"]) {

					max-width: calc(100vw - (2 * 1rem));

			// Child blocks: Normal Alignments

			> .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {



				@include media(tablet) {

					max-width: calc(8 * (100vw / 12));
@@ -884,6 +888,17 @@ $group-block-background__padding: $font__size_base; 
				}

			}



			// Child blocks: Not Full Alignments

			> .wp-block:not([data-align="full"]):not(.alignfull) {

				padding-left: 10px;

				padding-right: 10px;



				@include media(tablet) {

					padding-left: 0;

					padding-right: 0;

				}

			}



			// Child blocks: Right alignments

			> .wp-block[data-align="right"] {
@@ -893,37 +908,31 @@ $group-block-background__padding: $font__size_base; 
			}



			// Child blocks: Wide alignments

				> .wp-block[data-align="wide"] {

			> .wp-block[data-align="wide"],

			> .wp-block.alignwide {



				@include media(tablet) {

						width: calc(100% + 4px);

						max-width: calc(100% + 4px);

					width: 100%;

					max-width: 100%;

				}

			}



			// Child blocks: Full alignments

				> .wp-block[data-align=full] {

					max-width: calc(100vw + (2 * 1rem));



					@include media(mobile) {

						width: calc(100% + 92px);

						left: -46px;

					}

			> .wp-block[data-align=full],

			> .wp-block.alignfull {



				@include media(tablet) {

						left: calc(-12.5% - 58px);

						width: calc(125% + 120px);

						max-width: calc(125% + 119px);

					}

					left: calc( -12.5% - 13px );

					width: calc( 125% + 26px );

					max-width: calc( 125% + 25px );

				}

			}

		}



		// Group block with background color

		> .is-block-content > .wp-block-group.has-background {

		&.has-background {



			// When the Group block is full width, we can remove the left/right padding

			// and let this inherit the 

			// When the Group block is full width, we can remove the left/right padding.

			padding: $group-block-background__padding 0;



			@include media(mobile) {
@@ -932,7 +941,8 @@ $group-block-background__padding: $font__size_base; 
			}



			// Child blocks: Full alignment

			> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {

			> .wp-block-group__inner-container > .wp-block[data-align="full"],

			> .wp-block-group__inner-container > .wp-block.alignfull {

				margin-left: 0;

				width: 100%;
@@ -946,4 +956,3 @@ $group-block-background__padding: $font__size_base; 
			}

		}

	}
 
}

wp-content/themes/twentynineteen/style-rtl.css

+1 −20
Original line number Diff line number Diff line
@@ -5640,7 +5640,7 @@ body.page .main-navigation { 
}



@-moz-document url-prefix() {

  .entry .entry-content .has-drop-cap:not(:focus):first-letter {

  .entry .entry-content .has-drop-cap:not(:focus)::first-letter {

    margin-top: 0.2em;

  }

}
@@ -6023,25 +6023,6 @@ body.page .main-navigation { 
		 * is followed by an H1, or H2 */

}



.entry .entry-content .wp-block-separator:not(.wp-block-separator),

.entry .entry-content hr:not(.wp-block-separator) {

  max-width: 100%;

}



@media only screen and (min-width: 768px) {

  .entry .entry-content .wp-block-separator:not(.wp-block-separator),

  .entry .entry-content hr:not(.wp-block-separator) {

    max-width: calc(8 * (100vw / 12) - 28px);

  }

}



@media only screen and (min-width: 1168px) {

  .entry .entry-content .wp-block-separator:not(.wp-block-separator),

  .entry .entry-content hr:not(.wp-block-separator) {

    max-width: calc(6 * (100vw / 12) - 28px);

  }

}



.entry .entry-content .wp-block-separator.is-style-wide,

.entry .entry-content hr.is-style-wide {

  max-width: 100%;

wp-includes/version.php

+1 −1
Original line number Diff line number Diff line
@@ -13,7 +13,7 @@ 
 *

 * @global string $wp_version

 */

$wp_version = '5.5-beta3-48601';

$wp_version = '5.5-beta3-48602';



/**

 * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.