Fix support for CSS logical properties

[roseg43]

Is your enhancement related to a problem? Please describe.

Currently, when using CSS logical properties, postcss creates two sets of rules, one for html[dir="ltr"] and one for html[dir="rtl"]. This would be fine, however, the native WordPress language_attributes() function only adds a dir attribute to html if the language direction is RTL.

I would like to see overrides.php in the theme include a filter on language_attributes to add dir="ltr" to the language attributes when is_rtl() is false.

Designs

An example of the function that adds this language attribute:

/**
 * Add the dir attribute to the body tag if it's LTR. WordPress doesn't do this by default, and postcss scopes CSS logical properties to the text direction.
 * This means that if the text direction is LTR, the CSS logical properties will not be applied.
 *
 * @see https://developer.wordpress.org/reference/functions/get_language_attributes/
 * @param string $output attribues to add to the body tag.
 *
 * @return string Updated attributes.
 */
function maybe_add_ltr_language_attribute( $output ) {
	// If the current language is LTR, add the dir attribute.
	if ( ! is_rtl() ) {
		$output .= ' dir="ltr"';
	}

	return $output;
}

Describe alternatives you've considered

An alternative could be modifying the default postcss config to handle logical properties in a way where RTL styles are scoped to html[dir="rtl"], while LTR styles are unscoped.

Code of Conduct

• I agree to follow this project's Code of Conduct