This PR redesigns the tabs block and gets it ready for alternative layouts and tab descriptions. With these changes, tabs look more modern and can become an important building block in landing pages.

Style

In its default use, tabs remain similar as before, just with some updated styling.

Tabs wrap onto new lines if necessary.

Some examples of the new style in the wild:

Position

Two new properties are to be added on the Tabs block in the editor:

• orientation: horizontal | vertical refers to the aria-orientation of the tabslist.
• position: start | end refers to the logical position of the tabslist, based on the writing mode of the document. In LTR, start refers to the left and end refers to the right of the tabs.
  Taken together, these properties together determine what side of the container tabs appear on.

Supported values are:

• horizontal + start: The default. A horizontal row of tabs, shown above the content.
• vertical + start: A vertical column of tabs to the left (in LTR) of the content.
• vertical + end: A vertical column of tabs to the right (in LTR) of the content.
• We explicitly don't support horizontal + end, at least for now.

horizontal + start

vertical + start

vertical + end

Description

A new description value (to be added on individual Tabs in the editor) can optionally be specified. When added, tabs take up a bit more padding and increase their font size. This is useful when building feature explanation blocks.

horizontal + start

vertical + start

vertical + end

Mobile

On mobile, tab blocks (no matter their position) are shown side by side. When there are a lot of tabs or they take up a lot of width, they are shown in a scrolling container.

Default mobile experience

With description set