Merge branch 'develop' into bump-deps

inc/block-editor.php

@@ -43,7 +43,11 @@ if ( ! function_exists( 'understrap_generate_color_palette' ) ) {
 		$color_palette = array();
 
 		// Grabs the autogenerated color palette that we're pulling from our compiled bootstrap stylesheets.
-		$color_palette_json = file_get_contents( get_theme_file_path( '/inc/editor-color-palette.json' ) ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
+		$file_path = get_theme_file_path( '/inc/editor-color-palette.json' );
+		if ( 'bootstrap4' === get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' ) ) {
+			$file_path = get_theme_file_path( '/inc/editor-color-palette-bootstrap4.json' );
+		}
+		$color_palette_json = file_get_contents( $file_path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
 
 		if ( $color_palette_json ) {
 			$color_palette_json = json_decode( $color_palette_json, true );

inc/editor-color-palette-bootstrap4.json

@@ -0,0 +1 @@
+{"--blue":"#007bff","--indigo":"#6610f2","--purple":"#5533ff","--pink":"#e83e8c","--red":"#dc3545","--orange":"#fd7e14","--yellow":"#ffc107","--green":"#28a745","--teal":"#20c997","--cyan":"#17a2b8","--white":"#fff","--gray":"#6c757d","--gray-dark":"#343a40"}

inc/editor-color-palette.json

@@ -1 +1 @@
-{"--blue":"#007bff","--indigo":"#6610f2","--purple":"#5533ff","--pink":"#e83e8c","--red":"#dc3545","--orange":"#fd7e14","--yellow":"#ffc107","--green":"#28a745","--teal":"#20c997","--cyan":"#17a2b8","--white":"#fff","--gray":"#6c757d","--gray-dark":"#343a40"}
+{"--bs-blue":"#0d6efd","--bs-indigo":"#6610f2","--bs-purple":"#5533ff","--bs-pink":"#d63384","--bs-red":"#dc3545","--bs-orange":"#fd7e14","--bs-yellow":"#ffc107","--bs-green":"#198754","--bs-teal":"#20c997","--bs-cyan":"#0dcaf0","--bs-white":"#fff","--bs-gray":"#6c757d","--bs-gray-dark":"#343a40"}

src/build/postcss.config.js

@@ -20,6 +20,7 @@ const colors = [
 
 const BS4 = process.argv[ process.argv.length - 1 ] === 'BS4';
 const colorInfix = BS4 ? '' : 'bs-';
+const output = 'inc/editor-color-palette' + ( BS4 ? '-bootstrap4' : '' ) + '.json';
 
 module.exports = ( ctx ) => {
 	return {
@@ -35,6 +36,7 @@ module.exports = ( ctx ) => {
 			},
 			'postcss-understrap-palette-generator': {
 				colors: colors.map( ( x ) => `--${ colorInfix }${ x }` ),
+				output: output,
 			},
 		},
 	};

src/sass/custom-editor-style-bootstrap4.scss

@@ -1,4 +1,4 @@
-$bootstrap4: true;                           // <--- Do not delete this variable. It is used in theme/_blocks.scss and theme/_understrap.scss.
+$bootstrap4: true; // <--- Do not delete this variable. It is used in theme/_blocks.scss and theme/_understrap.scss.
 
 // Add your own editor styles here or import additional files
 
@@ -13,6 +13,7 @@ $bootstrap4: true;                           // <--- Do not delete this variable
 @import "assets/bootstrap4/root";
 @import "assets/bootstrap4/tables";
 @import "assets/bootstrap4/images";
+@import "assets/bootstrap4/grid";
 
 // Set up basic typography
 @import "assets/bootstrap4/type";
@@ -24,15 +25,21 @@ $bootstrap4: true;                           // <--- Do not delete this variable
 @import "theme/colors";
 @import "theme/blocks";
 
-
-
 // Fixes Gutenberg's cover block color picker.
 .components-circular-option-picker__option {
 	border-radius: 50%;
 }
 
 // Matches the page title font weight.
-.editor-post-title .editor-post-title__input{
+.editor-post-title .editor-post-title__input {
 	font-size: $h1-font-size;
 	font-weight: $headings-font-weight;
 }
+
+@each $breakpoint, $container-max-width in $container-max-widths {
+	@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+		html :where(.wp-block) {
+			max-width: $container-max-width;
+		}
+	}
+}

src/sass/custom-editor-style.scss

@@ -12,6 +12,8 @@
 @import "assets/bootstrap5/root";
 @import "assets/bootstrap5/tables";
 @import "assets/bootstrap5/images";
+@import "assets/bootstrap5/containers";
+@import "assets/bootstrap5/grid";
 
 // Set up basic typography
 @import "assets/bootstrap5/type";
@@ -23,15 +25,21 @@
 @import "theme/colors";
 @import "theme/blocks";
 
-
-
 // Fixes Gutenberg's cover block color picker.
 .components-circular-option-picker__option {
 	border-radius: 50%;
 }
 
 // Matches the page title font weight.
-.editor-post-title .editor-post-title__input{
+.editor-post-title .editor-post-title__input {
 	font-size: $h1-font-size;
 	font-weight: $headings-font-weight;
 }
+
+@each $breakpoint, $container-max-width in $container-max-widths {
+	@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+		html :where(.wp-block) {
+			max-width: $container-max-width;
+		}
+	}
+}