feedback advanced columns

[selul]

@HardeepAsrani I did check otter blocks, the advanced column block, and is pretty neat, i think is solid to release it. Meanwhile do you think is possible to do some improvements on those things, but after we release this:

• [x] Can we place the advanced column on layout elements tab too? http://prntscr.com/m0n63a
• [x] on reset, this field is not emptied, is still filled with the previous value -> video
• [x] Clear on background gradient is doing nothing, https://drive.google.com/file/d/1_DVr4WR1qTLD-DJin4JfGBzX4Jkf-MDH/view To be honest i dont think it has too much sense for me to have clear for both colors in a gradient, i would have a clear button which will reset to default state the whole gradient control, not just one color. Makes sense ?
• [x] shape devider is somehow misleading -> [video] (https://drive.google.com/file/d/1i-Tji-xc6QYBw3z3xe2Afsc-H5b4-IM8/view) . The way is the control looking i was expecting that top/bottom should exclude one by another, like a radio button, but it seems there is more like a checkbox control, allowing both options. I think we should group the top/bottom in somekind of tabs rather than this toggle button. What do you think ?
• [x] It should be a reset button for the layout option too http://prntscr.com/m0nf08, after i'm playing awhile with that control, switching the devices/layout structure it's hard to get back to the default state.
• [x] The responsiveness selector is something that you have built or you are using smething from the core ? I find that if we have the icons horizontally listed, one after another better than now.

Side question: Do you think we have now the tools, for instance, to build the neve frontpage into the new editor + otter ?

[HardeepAsrani]

1. We can only add one category per-block, so it can either be in Otter Blocks tab or Layout tabs.

2. Fixed.

3. Fixed.

4. It's tabbed really, similar to how Elementor is doing, followed their UI pattern in this.

5. I don't understand it.

6. Responsiveness Selector is custom, but built using Gutenberg's Popover component. Wanted to list them horizontally but that would make it too filled for some controls, like Padding control, so that's why had to do it like this.

We can make most of Neve layout, some will need custom CSS, like borders and different styles for Services icons.

[selul]

1. What do you think if we move advanced column under Layout and rename the otter blocks category into Advanced blocks by Otter block with by Otter blocks under smaller font size and italic style ?
2. I get your point, my idea was more that, in the current style, I feel like is working similar with a toggle button, the bottom is excluding top and vice-versa. However, is not a blocker, we can later come back based on how users will be using it.
3. My point was that we could have a reset layout feature, which will bring the layout for all 3 devices to the default state. After I'm choosing some layouts for mobile/desktop/tablet is hard to reset them all once that I feel I did them wrong. Makes sense ? Is not a blocker, but we can have in mind in the future.
4. Got it.

Regarding neve template, maybe @rodica-andronache can share this task with someone and build the template in Gutenberg in the close future. Can you help with some guidance in case that is needed?

[rodica-andronache]

@radu-themeisle did start working on the Gutenberg template. Can you please check this and see if it helps?

[rodica-andronache]

hi! not sure if this is a problem in the core or not, but I saw that unless you click on the column block itself, even though you click on the Add icon inside that block, the new block is added in the previously selected block https://screencast-o-matic.com/watch/cqVXXM3Qwu

[radu-themeisle]

@HardeepAsrani, Here's my feedback for the current version:

Warning: long post ahead! 😁

Advanced Columns

• block added in previous column instead of the column where you try to add: https://www.useloom.com/share/a3a68ffea6004a0cb63d54059a6bc015
• when selecting the image it reduces its size and overlaps previous block, the reduced size also renders on the front: https://www.useloom.com/share/e67fee570a7647f4b1728d75ce690e70; http://prntscr.com/m7wu05
• If you set the column's background to a dark color the placeholder in it is not visible and it seems hard to see that you can click inside to start typing or add a block: https://www.useloom.com/share/254d8ad925434661977ad404fc92704e

These 2 problems seem to be related to Gutenberg or the theme (Neve):

• In a column inside the advanced columns, having a background image, when you click the background settings button it look like adding something as the scroll bar starts to shrink looking like the page is growing in length. It seems to reset when you click anywhere in the page but not in the toolbar (this happens an all the buttons, like the responsive setting button for example): https://www.useloom.com/share/9bc101a9b7184f5f9715c2fafef5a09d

• The same behavior happens when hovering over the buttons and the tooltip appears, and when clicking on the button: https://www.useloom.com/share/21ec653239fa483a9ad2fd3c53f35fe6

• In Advanced Columns, when setting the linked value for padding to 0, unselect the block and then select it again the padding is unlinked with the top and bottom values being empty and left-right back to default (20px). I also tried putting a random value (12px) and the only difference was that the top value was set to 12, everything else was as before (see screenshot): https://www.useloom.com/share/e54e53065b734d25903a09dadd3f8e9f; http://prntscr.com/m7xcja

• When setting the linked value for margin to a certain number if you unlink you get the default values (20px), it should give you the value set when it was linked: https://www.useloom.com/share/45f1ad3a26b140a6a1cd100fd3c5c74a

• We should add a hover effect for responsive options, right now there's no feedback so users can't understand, visually, if the input works: https://www.useloom.com/share/f53e530b1d574ef0bc128ae19e3606e6

• Idea: why not have 3 buttons with the devices instead of a menu, where there is room for it and removing the menu to simplify the interface. Keep the button just for padding/margin.

• We can remove the title "Responsiveness Settings" they are pretty self explanatory.

• The horizontal and vertical align seems not to work if minimum height is set to "default", we should hide the options when "default" is selected: https://www.useloom.com/share/88575735872140bfbc51b1c162d08e6f

• Idea: make the option of vertical alignment at column level. This way you can vertically align each column as you need (e.g. maybe you want to create a cascade effect)

• The control slider for content width and custom height "reset" if you exit the toolbar with the controller selected: https://www.useloom.com/share/444fb0cfb7524395952140118ba6cae3

• If "custom height" is selected, you input a number and then want to reset it pressing backspace or delete keys don't work, only inputting 0 (seems to be the case for all these type of inputs): https://www.useloom.com/share/eefbd37aff404fa288dad1ecd8b3649a

• I don't believe a "reset" button is justified here, users can delete the value and it will revert to the default: http://prntscr.com/m7y1ka

• In box shadow we have "Border Shadow" and I believe it should be better called "Shadow Properties" : http://prntscr.com/m7yj7q

• There are 2 shape dividers that don't have the "invert" option: curve and clouds

FA Icons

• Options from "Icon sizes" should be moved under "Icon settings", and instead of "Text size" write just "size": http://prntscr.com/m7yvp1
• We should have a menu with icon previews (similar to this one: http://prntscr.com/m7yx8b), I see that if you start writing something in the input it gives you suggestions, so it's best to add a button on the right of the input with an arrow-down so that people know there's a menu there; and/or a link to FA's list of free icons on their site
• Idea: make the input the same width as the longest name from the list so it doesn't look to wide. Probably adding that arrow-down button might solve this.
• I noticed in the picker input there's a placeholder "Start typing, like themeisle...". I didn't see it until I accidentally emptied the input. We should remove the default text in the input so that the placeholder is visible by default, but still have the "themeisle" icon render by default in these 2 places: http://prntscr.com/m7z227
• "Inner space" is better called "Padding" and "Outer Space" called "Margin. There not that descriptive as Inner/Outer Space and seems against "the standards" which might confuse people regarding their purpose.
• "Icon Color" instead of "Text Color"
• I placed the icon inside a column and when I aligned it to the left and the text wrapped next to it(same thing for right alignment): http://prntscr.com/m7z59w; http://prntscr.com/m7z5ta; It makes sense in the content of a blog post, but I strongly believe we should have an alignment for the icon (like text align) without text wrapping next to it.

Advanced Heading

• It seems that strong doesn't work with the defaults as font-family is set to "undefined", it should be set to "inherit": http://prntscr.com/m7zsb3
• When I'm searching for a font-family through the list I might not know from the first time what font I want, so if I select one and then come back to choose another one I should see the name in the search input and also see it selected in the list so I can continue searching from where I was, not having to scroll again back to where I was: http://prntscr.com/m8029j
• We should also make available system fonts, not only Google Fonts
• When I choose a font from the list a certain font weight appears as default which seems to be different depending on the font. The issue is that that default doesn't render in some cases so it should always default to "normal" regardless of the font or keep the font-weight previously selected. In my video for Poppins font the default goes to 100 but it's not actually rendered. It's not until I change it and go back to 100 that I see the 100 font-weight. So the actual issue is that the font-weight displayed is the first one in the list instead of displaying "regular" as font-weight by default is set to "normal": https://www.useloom.com/share/79c7bfa6c1254bdb8e7b5d2191c645ce
• There's a case where you can end up selecting the heading and deactivating the menu in the top-left corner, I couldn't ascertain a pattern but it happened a couple of times: https://www.useloom.com/share/ef33cd89f7684125af22c7b94e63894f
• This is related to the previous point, if we make sure 100% the menu doesn't disappear, we can remove "Font Style" from the settings as users can apply italic from the top-right menu.
• Reset button and "backspace"/"delete" key don't work for: text size, line height and letter spacing: https://www.useloom.com/share/dcb63d978f924fb2a1e1b7aa3deaeeb3; IMHO why would we need a reset button for text-size? Maybe to reset to the theme's default heading size?
• Text Shadow: rename the shadow properties to "shadow properties: http://prntscr.com/m80mhh
• Highlight Color should be in the Style tab, under Color Settings, and write "Highlight Text Color" instead of "Highlight Color"
• I think we can move also the padding/margin settings and remove the Advanced Tab

Button Group

• "Button to Edit" change to "Edit button:" and then put the dropdown inline, or make the list with tabs so that when you select a button it's very clear that the settings below are for that button. Right now there's no feedback when you select the button and might not be that obvious for less skilled users.
• Block should prefix button link with "http/https". If you write the link without prefixing with that the link will not work.
• Spacing: left aligned buttons are ok, right aligned buttons should work like left aligned (but mirrored). When centered it looks like the button on the left increases space more than the right one, what I mean is that spacing seems to not be distributed equally: https://www.useloom.com/share/25fe2a6ac91c4dce8a2f5bda7b6590ca
• Typograph: same thing for font family, weight and style as in the case of the heading.
• Move everything to the Style tab and remove the Group Settings
• Color: add a transition when hovering, or inherit it from the theme
• Border width & radius should be enabled to be different on hover (we could leave this one for later)
• Box Shadow should not be a separate option, should be right beneath border properties, and also change the text for the properties to "Shadow properties/ Shadow properties on hover"
• Icon Settings should be under link and have an option to control the color independent of the text

Sharing Icons

• (theme related I think) in the backend the text color when using regular is in some cases the same color as the background: http://prntscr.com/m813hu; but on the front it doesn't look so great either: http://prntscr.com/m815kk

Posts Grid Looks good 😃 One strange thing, the first time I added it the block became invalid (like it happened to iThemes) but after deleting and adding it again I never managed to get an error again. One idea would be that maybe only the first time with a fresh WP the block would error and after that it would work as the info required to display posts is already recorded in the DB (might be a dumb idea but I think it's worth mentioning it.

[rodica-andronache]

@HardeepAsrani it would be great if you could add the latest version on git too 👍 it would be easier to test by everyone :D