Cherry-pick PRs for the WordPress 6.1.1 RC

lib/block-supports/typography.php

@@ -328,8 +328,17 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array()
 		$unit  = $options['coerce_to'];
 	}
 
+	/*
+	 * No calculation is required if swapping between em and rem yet,
+	 * since we assume a root size value. Later we might like to differentiate between
+	 * :root font size (rem) and parent element font size (em) relativity.
+	 */
+	if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
+		$unit = $options['coerce_to'];
+	}
+
 	return array(
-		'value' => $value,
+		'value' => round( $value, 3 ),
 		'unit'  => $unit,
 	);
 }
@@ -357,27 +366,29 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
 	$minimum_font_size_raw      = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
 	$scale_factor               = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;
 
-	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	// Normalizes the minimum font size in order to use the value for calculations.
 	$minimum_font_size = gutenberg_get_typography_value_and_unit( $minimum_font_size_raw );
 
-	// We get a 'preferred' unit to keep units consistent when calculating,
-	// otherwise the result will not be accurate.
+	/*
+	 * We get a 'preferred' unit to keep units consistent when calculating,
+	 * otherwise the result will not be accurate.
+	 */
 	$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
 
-	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	// Grabs the maximum font size and normalize it in order to use the value for calculations.
 	$maximum_font_size = gutenberg_get_typography_value_and_unit(
 		$maximum_font_size_raw,
 		array(
 			'coerce_to' => $font_size_unit,
 		)
 	);
 
-	// Protect against unsupported units.
+	// Checks for mandatory min and max sizes, and protects against unsupported units.
 	if ( ! $maximum_font_size || ! $minimum_font_size ) {
 		return null;
 	}
 
-	// Use rem for accessible fluid target font scaling.
+	// Uses rem for accessible fluid target font scaling.
 	$minimum_font_size_rem = gutenberg_get_typography_value_and_unit(
 		$minimum_font_size_raw,
 		array(
@@ -403,8 +414,9 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
 	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
 	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
 	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
-	$linear_factor          = round( $linear_factor, 3 ) * $scale_factor;
-	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor)";
+	$linear_factor_scaled   = round( $linear_factor * $scale_factor, 3 );
+	$linear_factor_scaled   = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
+	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
 
 	return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
 }
@@ -437,7 +449,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		return $preset['size'];
 	}
 
-	// Check if fluid font sizes are activated.
+	// Checks if fluid font sizes are activated.
 	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
 	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
 
@@ -451,6 +463,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	$default_minimum_font_size_factor = 0.75;
 	$default_maximum_font_size_factor = 1.5;
 	$default_scale_factor             = 1;
+	$default_minimum_font_size_limit  = '14px';
 
 	// Font sizes.
 	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
@@ -472,13 +485,48 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		return $preset['size'];
 	}
 
-	// If no fluid min or max font sizes are available, create some using min/max font size factors.
+	// If no fluid max font size is available, create one using max font size factor.
+	if ( ! $maximum_font_size_raw ) {
+		$maximum_font_size_raw = round( $preferred_size['value'] * $default_maximum_font_size_factor, 3 ) . $preferred_size['unit'];
+	}
+
+	// If no fluid min font size is available, create one using min font size factor.
 	if ( ! $minimum_font_size_raw ) {
-		$minimum_font_size_raw = ( $preferred_size['value'] * $default_minimum_font_size_factor ) . $preferred_size['unit'];
+		$minimum_font_size_raw = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ) . $preferred_size['unit'];
 	}
 
-	if ( ! $maximum_font_size_raw ) {
-		$maximum_font_size_raw = ( $preferred_size['value'] * $default_maximum_font_size_factor ) . $preferred_size['unit'];
+	// Parses the minimum font size limit, so we can perform checks using it.
+	$minimum_font_size_limit = gutenberg_get_typography_value_and_unit(
+		$default_minimum_font_size_limit,
+		array(
+			'coerce_to' => $preferred_size['unit'],
+		)
+	);
+
+	if ( ! empty( $minimum_font_size_limit ) ) {
+		/*
+		 * If a minimum size was not passed to this function
+		 * and the user-defined font size is lower than $minimum_font_size_limit,
+		 * then uses the user-defined font size as the minimum font-size.
+		 */
+		if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
+			$minimum_font_size_raw = implode( '', $preferred_size );
+		} else {
+			$minimum_font_size_parsed = gutenberg_get_typography_value_and_unit(
+				$minimum_font_size_raw,
+				array(
+					'coerce_to' => $preferred_size['unit'],
+				)
+			);
+
+			/*
+			 * If the passed or calculated minimum font size is lower than $minimum_font_size_limit
+			 * use $minimum_font_size_limit instead.
+			 */
+			if ( ! empty( $minimum_font_size_parsed ) && $minimum_font_size_parsed['value'] < $minimum_font_size_limit['value'] ) {
+				$minimum_font_size_raw = implode( '', $minimum_font_size_limit );
+			}
+		}
 	}
 
 	$fluid_font_size_value = gutenberg_get_computed_fluid_typography_value(

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -19,10 +19,14 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 	 * Define which defines which pseudo selectors are enabled for
 	 * which elements.
 	 * Note: this will effect both top level and block level elements.
+	 *
+	 * The order of the selectors should be: visited, hover, focus, active.
+	 * This is to ensure that 'visited' has the lowest specificity
+	 * and the other selectors can always overwrite it.
 	 */
 	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link'   => array( ':hover', ':focus', ':active', ':visited' ),
-		'button' => array( ':hover', ':focus', ':active', ':visited' ),
+		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
+		'button' => array( ':visited', ':hover', ':focus', ':active' ),
 	);
 
 	/**
@@ -688,6 +692,51 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 		return $stylesheet;
 	}
 
+	/**
+	 * Returns a filtered declarations array if there is a separator block with only a background
+	 * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+	 *
+	 * @param array $declarations List of declarations.
+	 *
+	 * @return array $declarations List of declarations filtered.
+	 */
+	private static function update_separator_declarations( $declarations ) {
+		$background_matches = array_values(
+			array_filter(
+				$declarations,
+				function( $declaration ) {
+					return 'background-color' === $declaration['name'];
+				}
+			)
+		);
+		if ( ! empty( $background_matches && isset( $background_matches[0]['value'] ) ) ) {
+			$border_color_matches = array_values(
+				array_filter(
+					$declarations,
+					function( $declaration ) {
+						return 'border-color' === $declaration['name'];
+					}
+				)
+			);
+			$text_color_matches   = array_values(
+				array_filter(
+					$declarations,
+					function( $declaration ) {
+						return 'color' === $declaration['name'];
+					}
+				)
+			);
+			if ( empty( $border_color_matches ) && empty( $text_color_matches ) ) {
+				$declarations[] = array(
+					'name'  => 'color',
+					'value' => $background_matches[0]['value'],
+				);
+			}
+		}
+
+		return $declarations;
+	}
+
 	/**
 	 * Gets the CSS rules for a particular block from theme.json.
 	 *
@@ -776,6 +825,11 @@ function( $pseudo_selector ) use ( $selector ) {
 			}
 		}
 
+		// Update declarations if there are separators with only background color defined.
+		if ( '.wp-block-separator' === $selector ) {
+			$declarations = static::update_separator_declarations( $declarations );
+		}
+
 		// 2. Generate and append the rules that use the general selector.
 		$block_rules .= static::to_ruleset( $selector, $declarations );
 

packages/block-editor/src/components/block-popover/style.scss

@@ -21,7 +21,7 @@
 	}
 
 	// Enable pointer events for the toolbar's content.
-	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+	&:not(.block-editor-block-popover__inbetween, .block-editor-block-list__block-side-inserter-popover) .components-popover__content {
 		* {
 			pointer-events: all;
 		}

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -21,6 +21,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
 
 function selector( select ) {
 	const {
@@ -120,45 +121,85 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
+	if (
+		! shouldShowBreadcrumb &&
+		! shouldShowContextualToolbar &&
+		! showEmptyBlockSideInserter
+	) {
 		return null;
 	}
 
 	return (
-		<BlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ classnames( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			__unstablePopoverSlot={ __unstablePopoverSlot }
-			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			{ shouldShowContextualToolbar && (
-				<BlockContextualToolbar
-					// If the toolbar is being shown because of being forced
-					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
-					__experimentalInitialIndex={
-						initialToolbarItemIndexRef.current
-					}
-					__experimentalOnIndexChange={ ( index ) => {
-						initialToolbarItemIndexRef.current = index;
-					} }
-					// Resets the index whenever the active block changes so
-					// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-					key={ clientId }
-				/>
+		<>
+			{ showEmptyBlockSideInserter && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					__unstableCoverTarget
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-side-inserter-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					shift={ false }
+					{ ...popoverProps }
+				>
+					<div className="block-editor-block-list__empty-block-inserter">
+						<Inserter
+							position="bottom right"
+							rootClientId={ rootClientId }
+							clientId={ clientId }
+							__experimentalIsQuick
+						/>
+					</div>
+				</BlockPopover>
 			) }
-			{ shouldShowBreadcrumb && (
-				<BlockSelectionButton
-					clientId={ clientId }
-					rootClientId={ rootClientId }
-				/>
+			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					{ ...popoverProps }
+				>
+					{ shouldShowContextualToolbar && (
+						<BlockContextualToolbar
+							// If the toolbar is being shown because of being forced
+							// it should focus the toolbar right after the mount.
+							focusOnMount={ isToolbarForced.current }
+							__experimentalInitialIndex={
+								initialToolbarItemIndexRef.current
+							}
+							__experimentalOnIndexChange={ ( index ) => {
+								initialToolbarItemIndexRef.current = index;
+							} }
+							// Resets the index whenever the active block changes so
+							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+							key={ clientId }
+						/>
+					) }
+					{ shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					) }
+				</BlockPopover>
 			) }
-		</BlockPopover>
+		</>
 	);
 }
 

packages/block-editor/src/components/block-tools/style.scss

@@ -42,7 +42,16 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+	pointer-events: none;
+
+	> * {
+		pointer-events: all;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
+.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {

packages/block-editor/src/components/default-block-appender/style.scss

@@ -34,6 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;