- This topic has 16 replies, 5 voices, and was last updated 1 year, 9 months ago by
PHILIP.
-
AuthorPosts
-
March 1, 2023 at 1:07 am #2550946
Stefanie
Hi there,
I’m having trouble inserting a grid block the way I was used to from GB 1.6.
Grid-Container in GB 1.6 automatically had the same height as its neighbor container (like in a table):
https://prnt.sc/PPLVFAOndwOwWith 1.7 this has unfortunately changed:
https://prnt.sc/jc-aplu8l3AUI don’t know how to set it back to the way it was before π
Thanks for help!
March 1, 2023 at 2:48 am #2551061David
StaffCustomer SupportHi there,
select the grid item Container Block, and in
Sizing
set itsHeight
to100%
March 1, 2023 at 5:04 am #2551208Stefanie
Thank you, David!
I wonder why this default setting is no longer present in 1.7.
But I’m sure there will be good reasons for that πThanks again!!
March 1, 2023 at 8:12 am #2551591David
StaffCustomer SupportPre 1.7 we added CSS behind the scenes to apply the
height: 100%
to all Grid Item Containers ( if the Grid Block had a default vertical alignment ).
There was no editor control to change that. And in a lot of instances that was OK.In 1.7 we exposed much of the hidden CSS in new settings. So some of the older “shortcut” methods don’t apply anymore – and this is the case with the Grid Block, as that now needs an update to embrace those changes.
Question is – should we add back a shortcut option in the grid for same height columns ? ( which would just add the 100% height to them ). Your thoughts are appreciated π
March 1, 2023 at 11:44 am #2551851Stefanie
Question is β should we add back a shortcut option in the grid for same height columns ?
If you ask me: yes, I would welcome that! Because I think that the setting in Sizing > Height > 100% is not self-explanatory (especially since you first have to change the unit of measurement for height, because there PX is preset).
—
I also find the setting for the icons quite cumbersome now in 1.7.In 1.6 there were two dropdowns:
Icon position: inline / above
Icon alignment: top/center/bottomNow in 1.7, when you add an icon to a headline, the icon sits inline / center.
And it’s not obvious how to change the icon position or alignment. I’ve figured that out by now, but I think a shortcut (in the Icon area) would be useful here.But anyway, GB is awesome !! π
March 2, 2023 at 1:00 am #2552298David
StaffCustomer SupportThat’s great, thanks for the feedback and kind words π
March 5, 2023 at 1:11 am #2556028PHILIP
Hello David
You say…
“Your thoughts are appreciated”Here are mine.
I absolutely love GeneratePress and GenerateBlocks, but…
The upgrade to 1.7 is the first time I’ve thought “what on earth have they done!”
For instance, you tell us equal height columns settings no longer apply, but in the grid settings, below vertical alignment, is still says equal height columns are default.
As mentioned above the headline icon is now positioned via the row and column arrow button.
Is it possible for a member of staff to list all of these changes that affect every user.
At the moment every single user will have to spend hours trying to figure out what has changed and then working out how to do things the new way.
I looked this morning (5 March) and some documentation has been updated today.
But this update has made it so that I can’t do many of the things I could do before.
I’m also worried that sites I’ve built in the past might need manually repairing if things like equal height columns break.
I remain a great big fan of GeneratePress and GenerateBlocks, but I’d be lying if I said I wasn’t worried about the impact this change is having on thousands of users just like me.
Not to mention the people who end up owning and running the sites we build for them.
Best wishes for the future of this fantastic product.
Philip.March 5, 2023 at 7:30 am #2556320David
StaffCustomer SupportHi Philip,
thanks for taking the time to provide detailed feedback.
First off, just to re-assure you, any legacy block content will continue to behave exactly as it did before. So by simply updating the plugins on a site won’t change existing blocks.
If you choose to convert legacy containers to the new system then yes these changes will take affect.
Secondly and as importantly, we are sorry to hear of the worry and frustration these changes have caused.
IT was a super complex update that we knew would entail “breaking some eggs” in the first instance. We now push ahead and will be releasing updates to put back some of the quality of life features we had to remove.But everything you could do previously with the plugin is still possible ( and more ). Let me know which things you need assistance with
March 5, 2023 at 8:10 am #2556508PHILIP
Hello David
Things that are confusing me at the moment mainly revolve around the sizing box.
- When should I use the sizing settings and when can I ignore them.
- What effect do the different sizing settings have.
- How do I prevent content breaking out of the container. Eg: using min height instead of height.
- Why are there two grid building options, the grid block and containers set to flex.
- When should I use the grid block and when should I build the grid from containers using the flex options.
Another concern I have is that sometimes I build websites for non-techies who then add blog posts to their site after it’s finished. If I’m struggling it’s possible they’ll struggle too, which doesn’t make happy customers.
What I’d really like is a few tutorials saying…
- This is what’s changed.
- These are the circumstances when you’ll use the new settings.
- And this is how to do the most common tasks with the settings.
I’m sure I’ll love the new settings once I’ve figured it all out. But in the meantime, I’m confused.
Thanks
Philip.March 5, 2023 at 10:42 am #2556594David
StaffCustomer SupportOK, so:
1. Unless you want to build more complex layouts then in most instances the sizing options you require are the same as legacy versions of GB, except now all sizes are found under the Sizing panel.
I drew quick table for comparison:2. Leo and Ying added a specific doc for sizing options here:
https://docs.generateblocks.com/article/sizing-options-overview/
the main thing with sizing is choosing the right type of `units:
Fixed units eg.px
em
vs responsive units eg.%
vw
.In most cases use responsive units as those will work into any size of container or screen size.
Fixed units should be used primarily for
max-width
andmin-height
to avoid breaking containment.But they can be used for
max-height
if you want to create:
a) decorative piece say just a background to a container.
b) a vertical scroll box by using the Layout > Overflow optionsAnd they can be used for
width
andmin-width
to:
a) create fixed size items that sit inside a horizontal scrollable container.
b) to create a fixed aspect ratio elements such as an icon button or avatar image that will always be smaller than their parent container or screen size.There are of course many other use cases for sizing that would be hard for me to document here.
Have a read of the doc for more info.3. Does #2 cover this?
4. Grid Block does a lot of the heavy lifting for flex box layouts.
As it adds an additional wrapper that means you can set 4 columns of 25% width for example, add 20px of grid gap and use margins on those grid items … and it just works.
Try that with Flex box and you realise it takes a LOT more work.5. So for most designs continue to use the Grid Block, unless there is something you just can’t achieve with it.
A good instance where to use a flex container is building your post meta, where sizing may need a variety of unit types or the use of flex properties.
Expect to see some flex layouts in updated patterns and GP Sites son.Does that help for now ?
March 5, 2023 at 11:44 am #2556643PHILIP
Thanks David, for providing such a comprehensive answer.
There’s a lot of info here and it’ll take a while to digest it all. But it defiantly takes me much closer than I was before.
And yes, that does help a lot.
Once the new patterns come out (I’ve got GB Pro) I’ll be able to deconstruct them and see how they’re put together.
I can see the benefit of the flex options, when I’ve got over the learning curve π
March 6, 2023 at 2:02 am #2557095David
StaffCustomer SupportYou’re welcome.
Let us know how you get onMarch 12, 2023 at 5:43 am #2564777PHILIP
Hello David, this is how I got on…
There were two things in the 1.6 to 1.7 update that concerned me.
- Equal height columns were no longer default.
- Headline icon position had a new setting.
Had I found a clear statement saying…
- add 100% to column height
- and change the icon position using the row, column and reverse buttons
I probably would not have delved any further.
However, I live in England and from north to south, we all got snowed in this weekend.
So I decided to take a self paced Flexbox course via SitePoint, which I already had a subscription for.
I spent Saturday morning taking the course, then Saturday afternoon playing a game called Flexbox Froggy.
“A game where you help Froggy and friends by writing CSS code!”
I can now take much better advantage of the new settings. And although I didn’t want to take yet another course, I’m glad I did. GeneratePress is my go-to theme and understanding Flexbox is defiantly a useful long term skill.
My advice for other users…
If you use GenerateBlocks regularly and you’ve already got a good idea of how CSS works, it’s well worth learning Flexbox.If you don’t want to learn about code, just get used to adding 100% height for columns and experiment with the headline icon using the row, column, and arrow buttons.
March 13, 2023 at 3:43 am #2565744David
StaffCustomer SupportHi Philip,
thanks for the invaluable feedback.
I was fortunate enough to have avoided the snow. But it sounds like you made good use of the time. Flexbox froggy is great fun too πWe will be taking all these points and those raised by others, to see how we can implement some smart solutions for these everyday actions.
Thanks again
March 14, 2023 at 8:30 am #2567464blackbird
Just want to say I feel the same “frustration” like the others in this thread. I too find it hard, for the first time, to intuitive understand how to use new possibilities in GP. I regret updating already, I usually wait for a while, but as I understand if I am patience you will make some things a bit easier again (?). (But I am in the middle of re-designing my site.)
When I add a new container I see under Layout: Display a lot of alternatives and none of them speaks clearly to me… (Block, Inline Block, Flex, inline Flex, inline… I have no idea! So of course I go with Standard, but when should I/do i have to choose any of the others?)
And Position is the same, when/why do I choose “relative”?
Overflow and Flex I have now printed out the document explanation so I can keep it next to my computer, after some time I guess I will learn them.Good change for very advanced users, but for mediate, well I was happy the way it used to be… but probably I will love this too later on.
-
AuthorPosts
- The topic ‘Grid Container height in GB 1.7’ is closed to new replies.