"padding-block" and "padding-inline" shorthand CSS not being properly applied to top/bottom and left/right in Builder

I’d consider this a bug as padding-block and padding-inline are pretty universal now?

This goes alongside my Wishlist ticket for universal padding options, but if I manually edit the stylesheet for an element using padding-block or padding-inline, those values do not properly get interpreted into the frontend of the Builder as their respective “top/bottom” and “left/right” values.

In this example, padding-top and padding-bottom are manually set to 2em, and then padding-block overrides those with 1em, as it’s the last rule:

Screenshot 2023-08-18 223444

However, the frontend grabs and fills in the top and bottom values, missing the valid block rule and confuses the user, because the padding is actually set to 1em 0 but appears to be 2em 0 in the Builder:

Screenshot 2023-08-18 223501

Fix would be to look for padding-block and padding-inline, and if present, apply those to the builder, only falling back to padding-top etc if those are not present.



Honestly this is the first time I see these properties, we will add support for them as well in near future. Thanks for suggestion :slight_smile:

@Pakic No worries man, same! I started seeing these properties pop up in some of the code reviews at my job, and they’re really useful shorthand. It’s kinda like flex: 1 0 auto shorthand.

Also note that there are margin-block and margin-inline as well!


I tried making support for this, but its not a task that can be done quickly, so I will postpone this.

Issue is that padding-inline-start doesnt work same as padding-left for example, and I need to check if website is RTL, and there are issues with what happens if you add both padding-left & padding-inline start. So yea, its much harder than it looks to support this and I guess very low amount of people will even try to do this, so we will make support for this in next re-coding/redesign of design tab, should happen this year :slight_smile:

But what I have fixed now is if you type padding or margin, we automatically split that in 4 values (top, right, bottom, left) so it works with designer correctly.

1 Like

Excellent fix and I forgot about the even-further broken down padding-inline-start etc! Thanks @Pakic