Fix editor

Author: igorschoester

packages/js/src/components/MetaboxButton.js

@@ -12,7 +12,8 @@ import PropTypes from "prop-types";
 const MetaboxButtonText = ( { className, ...props } ) => (
 	<span
 		className={ classNames(
-			"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-left",
+			"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp",
+			"yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-start",
 			className
 		) }
 		{ ...props }
@@ -40,7 +41,9 @@ export const MetaboxButton = ( { className, ...props } ) => (
 	<button
 		type="button"
 		className={ classNames(
-			"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pr-4 yst-pl-6 yst-space-x-2 yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0] focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
+			"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pe-4 yst-ps-6 yst-space-x-2 rtl:yst-space-x-reverse",
+			"yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0]",
+			"focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
 			className
 		) }
 		{ ...props }

packages/js/src/components/WooCommerceUpsell.js

@@ -19,7 +19,7 @@ const WooCommerceUpsell = ( { link, text } ) => {
 				target="_blank"
 				rel="noopener"
 			>
-				<LockOpenIcon className="yst-w-4 yst-h-4 yst--ml-1 yst-shrink-0" />
+				<LockOpenIcon className="yst-w-4 yst-h-4 yst--ms-1 yst-shrink-0" />
 				{ sprintf(
 				/* translators: %1$s expands to Yoast WooCommerce SEO. */
 					__( "Unlock with %1$s", "wordpress-seo" ),

packages/js/src/components/contentAnalysis/Results.js

@@ -98,7 +98,7 @@ class Results extends Component {
 			/>
 			{ this.props.shouldUpsellHighlighting &&
 				<div className="yst-root">
-					<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--right-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
+					<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--end-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
 						<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-shrink-0" role="img" aria-hidden={ true } focusable={ false } />
 					</Badge>
 				</div>

packages/js/src/components/modals/InternalLinkingSuggestionsUpsell.js

@@ -93,7 +93,7 @@ export const InternalLinkingSuggestionsUpsell = () => {
 							{ __( "Internal linking suggestions", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

packages/js/src/components/modals/KeywordUpsell.js

@@ -76,7 +76,7 @@ const KeywordUpsell = () => {
 							{ __( "Add related keyphrase", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

packages/js/src/components/modals/PremiumSEOAnalysisModal.js

@@ -61,7 +61,7 @@ const PremiumSEOAnalysisModal = ( { location } ) => {
 							{ __( "Premium SEO analysis", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js

@@ -43,7 +43,7 @@ export const AiFixAssessmentsUpsell = ( {
 						thumbnail={ thumbnail }
 						wistiaEmbedPermission={ wistiaEmbedPermission }
 					/>
-					<Badge className="yst-absolute yst-right-0 yst-mr-4 yst-text-center yst-justify-center" variant="info" style={ { top: "-8px" } }>
+					<Badge className="yst-absolute yst-end-4 yst-text-center yst-justify-center" variant="info" style={ { top: "-8px" } }>
 						{ __( "Beta", "wordpress-seo-premium" ) }
 					</Badge>
 				</div>
@@ -92,7 +92,7 @@ export const AiFixAssessmentsUpsell = ( {
 						target="_blank"
 						ref={ initialFocus }
 					>
-						<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
+						<LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />
 						{ upsellLabel }
 						<span className="yst-sr-only">
 							{

packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js

@@ -50,7 +50,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( {
 						thumbnail={ thumbnail }
 						wistiaEmbedPermission={ wistiaEmbedPermission }
 					/>
-					<Badge className="yst-absolute yst-top-0 yst-right-2 yst-mt-2 yst-ml-2" variant="info">Beta</Badge>
+					<Badge className="yst-absolute yst-top-2 yst-end-4" variant="info">Beta</Badge>
 				</div>
 				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
 					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
@@ -105,7 +105,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( {
 						target="_blank"
 						ref={ initialFocus }
 					>
-						<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
+						<LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />
 						{ upsellLabel }
 						<span className="yst-sr-only">
 							{