2.3.4

- Fixing and improving block styles and support

assets/scss/_custom-properties/_box-model.scss

@@ -1,6 +1,6 @@
 /* FILE: _custom-properties/_box-model.scss */
 
-:root {
+#{ $root } {
 
 	// White spaces.
 
@@ -75,7 +75,7 @@
 			--wp--style--block-gap: var(--gap);
 			--wp--style--gallery-gap-default: var(--wp--style--block-gap);
 
-			--wp--style--spacing--base: #{ $ratio_maj +vw };
+			--wp--style--spacing--base: 1vmin;
 			@for $i from 1 through 10 {
 				--wp--preset--spacing--#{ $i * 10 }: calc( #{ $i } * var(--wp--style--spacing--base) );
 			}

assets/scss/_custom-properties/_colors.scss

@@ -1,6 +1,6 @@
 /* FILE: _custom-properties/_colors.scss */
 
-:root {
+#{ $root } {
 
 	// WordPress color variables.
 	--wp--style--color--link: var(--color_accent);

assets/scss/_custom-properties/_others.scss

@@ -1,6 +1,6 @@
 /* FILE: _custom-properties/_others.scss */
 
-:root {
+#{ $root } {
 
 	--border_opacity: .2;
 	--pseudo_background_opacity: #{ $overlay_from_text_color_opacity };

assets/scss/_custom-properties/_theme-options.scss

@@ -1,6 +1,6 @@
 /* FILE: _custom-properties/_theme-options.scss */
 
-:root {
+#{ $root } {
 
 	// `$value + ''` is converting values to string to prevent any issues.
 	@each $option, $value in $customize_options {

assets/scss/_custom-properties/_typography.scss

@@ -1,6 +1,6 @@
 /* FILE: _custom-properties/_typography.scss */
 
-:root {
+#{ $root } {
 
 	--typography_font_size_base: 16px;
 	@include media( map_get( $breakpoint, 'xl' ) ) {

assets/scss/_extend/_blocks.scss

@@ -9,7 +9,7 @@
 	> ul,
 	> ol {
 
-		&:not([class*="wp-block-"]) li {
+		> li {
 			margin-#{$left}: 1.25em;
 		}
 

assets/scss/_setup/_selectors.scss

@@ -49,3 +49,5 @@ $selectors_accent_color: (
 	'.widget .tagcloud a:focus',
 	'.widget .tagcloud a:active'
 );
+
+$root: ':root' !default;

assets/scss/blocks.scss

@@ -7,7 +7,7 @@
 // @copyright  WebMan Design, Oliver Juhas
 //
 // @since    2.1.0
-// @version  2.3.0
+// @version  2.3.4
 //
 
 $left: left;

assets/scss/blocks/_block.scss

@@ -15,3 +15,41 @@
 	}
 
 }
+
+.is-style-no-padding.is-style-no-padding {
+	padding-top: 0;
+	padding-bottom: 0;
+
+	&:not(.has-background) {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+}
+
+.is-style-no-margin-vertical.is-style-no-margin-vertical.is-style-no-margin-vertical {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+$specificity : '';
+@if variable-exists( 'selector_editor_wrapper' ) {
+	$specificity : '[class]';
+}
+.is-layout-constrained,
+.is-layout-flow {
+
+	&#{ $specificity } {
+		@extend %block_inner_container;
+		@extend %clearfix;
+
+		> * {
+			margin-top: 0;
+			margin-bottom: var(--gap);
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}

assets/scss/blocks/_group.scss

@@ -7,6 +7,21 @@
 		@extend %clearfix;
 	}
 
+		// Sometimes the Group block does not receive layout class
+		// by WordPress (such as when nested within full aligned Group)
+		// and also `.wp-block-group__inner-container` is not rendered,
+		// so we need to fix inner block alignment here (front-end only).
+		// (These styles are from `%block_inner_container`.)
+		> :not(
+			.alignfull,
+			.alignwide,
+			.alignwide-wrap,
+			.wp-block-group__inner-container
+		) {
+			// max-width: var(--layout_width_entry_content); // This style is not needed here (see below).
+			margin-inline: auto;
+		}
+
 	&.has-background > .wp-block-group__inner-container > .alignwide-wrap {
 		padding-left: 0;
 		padding-right: 0;

assets/scss/blocks/_pullquote.scss

@@ -2,6 +2,7 @@
 
 .wp-block-pullquote {
 	padding: ( _pow( $ratio, 2 ) +em ) 6%;
+	font-size: 1em;
 	text-align: inherit;
 	border-top-width: $ratio_min +em;
 	border-top-style: solid;

assets/scss/editor-block/_ui.scss

@@ -31,3 +31,65 @@ $max_width_wide:    calc( var(--layout_width_content)       + var(--editor_width
 	}
 
 }
+
+// Image URL replace fix.
+.block-editor-media-flow__url-input .block-editor-link-control {
+
+	.block-editor-link-control__search-item-title[href^="data:"] {
+		max-width: 140px;
+
+		+ .block-editor-link-control__search-item-info {
+			display: none;
+			// This below is just in case...
+			white-space: normal;
+			max-height: 2em;
+			overflow: hidden;
+		}
+	}
+}
+
+// Spacing options.
+.tools-panel-item-spacing {
+	padding: 1em;
+	border: 1px solid #ddd;
+	border-radius: 2px;
+
+	.components-input-control__container {
+
+		.components-input-control__input[class] {
+			padding-inline: .5em;
+		}
+
+		.components-unit-control__select[class] {
+			margin-inline-end: .25em;
+		}
+	}
+
+	// Zero value visual cue:
+	// Actually styling empty value pointer, not the "zero" one.
+	.components-range-control__wrapper {
+
+		&:has( [aria-valuenow="0"] ~ .components-range-control__tooltip:empty ) { // :has() = CSS4 parent selector.
+
+			.components-range-control__thumb-wrapper {
+				background: currentColor;
+				color: #ddd;
+				// border-radius: 2px;
+
+				span {
+					// background: #fff;
+					// border: 3px solid;
+					background: inherit;
+					border-radius: inherit;
+				}
+			}
+		}
+	}
+}
+
+// Block styles selector.
+.block-editor-block-styles__variants .components-button {
+	height: auto;
+	padding-block: 8px;
+	font-size: 12px;
+}

assets/scss/editor-block/blocks/_block.scss

@@ -32,7 +32,7 @@
 	}
 
 	&.is-reusable {
-		max-width: calc( 100% - 120px ) !important;
+		max-width: 100% !important;
 	}
 
 	&[data-align="left"] {
@@ -75,7 +75,7 @@
 	&[data-align="wide"],
 	&[data-align="full"] {
 		max-width: none;
-		margin: 0;
+		margin: 0 !important;
 
 		&:not(:last-child) > * {
 			margin-bottom: var(--gap);

assets/scss/editor-block/blocks/_columns.scss

@@ -11,9 +11,17 @@
 }
 
 .block-editor-block-list__block.wp-block-column.wp-block-column {
-	margin-bottom: $ratio +em;
+	margin-bottom: var(--wp--style--block-gap);
 }
 
+	[data-align="wide"]:not(:last-child) > .wp-block-columns {
+		margin-bottom: var(--wp--style--block-gap) !important;
+	}
+
+	[data-align="wide"] > .wp-block-columns > .wp-block-column.wp-block-column.wp-block-column {
+		margin-bottom: 0;
+	}
+
 .wp-block-column {
 	max-width: none;
 

assets/scss/editor-block/blocks/_post-title.scss

@@ -1,6 +1,11 @@
 /* FILE: editor-block/blocks/_post-title.scss */
 
-#{ $selector_editor_wrapper } .wp-block-post-title {
-	max-width: $max_width_wide;
-	font-size: 2em;
+.edit-post-visual-editor__post-title-wrapper[class] {
+	padding-inline: 6%;
+	margin-block: 2rem !important;
+
+	.wp-block-post-title {
+		max-width: $max_width_wide;
+		font-size: 2em;
+	}
 }

assets/scss/editor-block/blocks/_spacer.scss

@@ -1,10 +1,10 @@
 /* FILE: editor-block/blocks/_spacer.scss */
 
 [data-type="core/spacer"] {
-	margin: 0;
+	margin-block: 0 !important;
 
 	&:not(:first-child) {
-		margin-top: calc( var(--gap) * -1 );
+		margin-top: calc( var(--gap) * -1 ) !important;
 	}
 
 	+ h1,
@@ -14,15 +14,15 @@
 		margin-top: 0 !important;
 	}
 
-	+ .block-list-appender.block-list-appender.block-list-appender.block-list-appender.block-list-appender.block-list-appender.block-list-appender {
-		margin-top: 0;
+	+ .block-list-appender {
+		margin-top: 0 !important;
 	}
 
 }
 
-[data-align="wide"] + .wp-block-spacer {
-	margin-top: 0;
-}
+// [data-align="wide"] + .wp-block-spacer {
+// 	margin-top: 0 !important;
+// }
 
 .wp-block-spacer {
 	border: 1px dashed;

assets/scss/editor-style-blocks-rtl.scss

@@ -12,6 +12,12 @@
 $left: right;
 $right: left;
 $rtl_multiplier: -1; // For `translateX` transform, for example.
+$root: '.editor-styles-wrapper.editor-styles-wrapper';
+
+body {
+	direction: rtl;
+	unicode-bidi: embed;
+}
 
 @import '_tools/_index';
 @import '_setup/_index';

assets/scss/editor-style-blocks.scss

@@ -15,6 +15,7 @@
 $left: left;
 $right: right;
 $rtl_multiplier: 1; // For `translateX` transform, for example.
+$root: '.editor-styles-wrapper.editor-styles-wrapper';
 
 @import '_tools/_index';
 @import '_setup/_index';

assets/scss/main/headings/_base.scss

@@ -2,7 +2,21 @@
 
 #{$selectors_headings} {
 	@extend %font_headings;
-	@extend %colors_site_content_headings;
+
+	@if variable-exists( 'selector_editor_wrapper' ) {
+		@at-root html :where( & ) {
+			//
+			// We can't use `@extend` here,
+			// we have to use the actual code!
+			//
+			// @see  _extend/_colors.scss → %colors_site_content_headings
+			//
+			color: map_get( $customize_options, 'color_content_headings' );
+			color: var(--color_content_headings);
+		}
+	} @else {
+		@extend %colors_site_content_headings;
+	}
 }
 
 	h1.h2,

assets/scss/main/wp/_alignment.scss

@@ -87,21 +87,23 @@
 .alignwide {
 	width: var(--layout_width_content);
 	max-width: 100%;
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 
 	&-wrap {
-		padding-left: var(--body_padding);
-		padding-right: var(--body_padding);
+		padding-inline: var(--body_padding);
+
+		// To override `.is-layout-# > *` styles.
+		&.alignwide-wrap.alignwide-wrap {
+			margin-block: 0;
+		}
 
 		.alignwide-wrap {
-			padding-left: 0;
-			padding-right: 0;
+			padding-inline: 0;
 		}
 
-		> .alignwide {
-			margin-left: auto;
-			margin-right: auto;
+		> .alignwide,
+		.alignwide > & {
+			margin-inline: auto;
 		}
 
 		&:not(:last-child) > .alignwide {

changelog.md

@@ -14,10 +14,14 @@
 	readme.txt
 	style.css
 	assets/scss/_custom-properties.scss
+	assets/scss/blocks.scss
 	assets/scss/editor-style.scss
 	assets/scss/editor-style-blocks.scss
 	assets/scss/main.scss
+	includes/customize/class-customize-styles.php
+	includes/frontend/class-assets.php
 	includes/frontend/class-menu.php
+	includes/setup/class-setup.php
 	includes/starter-content/class-starter-content.php