First look at components

Feedback
1

Hi,

I’m finally trying to use components on a dev site.
The component I’m trying to implement is a simple repeater block with different responsive columns layouts (using properties or styles to set the number of grid columns).
But I can’t seem to achieve anything I want.
I wonder if I got it right and components lack some basics or if I’m missing something obvious :wink:

A. REPEATER’s GRID layout properties

I began simple, like a number property to set the number of columns.
But it seems that fraction number in repeater grid builder cannot be linked to a component property.

B. New GRID BUILDER layout properties

So I tried with the new grid builder, but its structure doesn’t seem to allow this either (no number field for number of columns)

So I switched to styles.

C. STYLES and TABS

First issue, when editing a block inside a component, we can’t select any style when in block’s primary tab: the only way to edit CSS is to switch to design tab, which is a shame, since block’s most useful properties are grouped in primary tab.

Even worse consequence: repeater’s grid builder is not usable at all with styles, since only present on primary tab.

D. STYLES and RESPONSIVENESS

Then I tried to use the new grid builder instead of the repeater’s grid to set the number of columns, since it is accessible in design tab.
But now it seems that component styles are not responsive:

  1. Select a style, select grid layout, add columns.
  2. Change breakpoint, change number of columns.
  3. Go back to previous breakpoint, number of columns doesn’t revert to the previous setting.
    (Same issues with simple properties like colors, etc, not grid specific.)

E. STYLES and CUSTOM CSS

I finally tried to use styles and block’s custom CSS, but styles dropdown doesn’t work in Advanced tab either.

CONCLUSION

It seems that components are not ready for grid layouts nor responsiveness.
Or prove me wrong, please :pray: