Add RTL CSS to Layout Builder

Looks great! Just super nitpicks left.

1. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -12,10 +12,16 @@
    }
    
   +[dir="rtl"] .new-section__link,
   
   @@ -69,7 +75,12 @@
   +}
   +
   +[dir="rtl"] .layout-section .remove-section {
   

   Other places in core don't have a blank line between these blocks, as they are tightly paired.

2. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -69,7 +75,12 @@
   +  margin-left: -10px;  /* LTR */
   

   Extra double space here between ; and /

Looks good, thanks!

Ooooooh, good catch!

+++ b/core/modules/layout_builder/css/layout-builder.css
@@ -12,9 +12,15 @@
   background: url(../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat;
...
+  background-position-x: right;

That would mean this line also gets a /* LTR */ comment, right?

RTL support looks good!

Note related to RTL support, but for line #8:

transition: visually-hidden 2s ease-out, height 2s ease-in;

visually-hidden isn't a valid CSS property.

Fixes look great, thanks for opening the follow-up.

patch rerolled & updated with the correct css-selectors

Patch coming shortly (DCon Seattle)...

New patch added with the following motivation:

- The previous patch did not apply against the latest changes in core/modules/layout_builder/css/layout-builder.css (and accordingly, this post does not include an interdiff)
- The original RTL/LTR changes needed to be added to core/themes/stable/css/layout_builder/layout-builder.css

Screenshot of expected changes for testers:

LTR display / RTL display

- Add icon repositioned
- Remove icon repositioned

We're trying to test the patch.

Applied the patch to 8.8.x and the reported issue looks fixed. Adding blocks with field content, all the controls have swapped sides. The only thing that seemed odd was that inline labels are on the left of the field, but that's how it works without Layout Builder too.

Thanks for the work on this! All the additions are correct, just one spot:

1. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -17,7 +17,14 @@
      padding-left: 24px;
   ...
   +  padding-left: 24px; /* LTR */
   

   This property is duplicated now, the first one can be removed

2. +++ b/core/themes/stable/css/layout_builder/layout-builder.css
   @@ -17,7 +17,14 @@
      padding-left: 24px;
   ...
   +  padding-left: 24px; /* LTR */
   

   Same!

Whoops! Duplication removed. All other changes are the same. Ready for re-review!

Reviewed the interdiff and everything looks good!

We've added a styleint plugin to core to make core's CSS property ordering correct. The new patch makes changes to the order that are not as per the standard.

You can work this out by running yarn run lint:css from the core directory. And can be fixed automatically by doing yarn run lint:css --fix

The patches attached are the result of doing that.

Adding credit to @tim.plunkett and @PCate for comments that had a material affect on the patch.

Committed and pushed 8ea7023787 to 8.8.x and 2d152f0c36 to 8.7.x. Thanks!