Hi, new to WordPress, only done pages with HTML and CSS.
Been taking a LinkedIN course – It had maybe 10 mins of block editor stuff and then told “just mess around with it”. And i have been doing that (and watching a block editor video on wordpress.org), and it just does not make sense to me.
I dont want to use plugins before ive learned the basics. Have not been able to find great ressources on the block editor. Tons exist for Elementor instead but im cheap.
I use the 2023 theme. Trying to make a Tennis page. Ugly background colors helps me visualize frames.
​
\—– 1 ——
If i am to align this “Site Logo” to either the left or right, it breaks. Only center allowed for some reason:
​
[Center works])​
[Left and right does not. From \\”list view\\”, i cannot tell why..])​
​
\—–2 ——-
Why can i not justify my navbar to the left and right side? Yea, it moves a bit, but the container is set to “full”, and it clearly stops before it gets there:
​
[And why is \\”None\\” marked in orange, as if it was active? Does it mean \\”default\\”? EDIT apparently i did not get the orange on this image, but trust me, it was there!])​
​
\—- 3 ——-
**There is only one mobile breakpoint and i am not even allowed to change it?** I cant even see what it is, so i have to inspect and find it myself (7xx px IIRC).
**Can i really make truly responsive pages with Gutenberg, when the only responsive option i can find is “stack on mobile”?** Seems like it would really limit your design choices
​
​
\—- 4 ——-
**Setting something to “blocks use content width” apparently does not mean that blocks are the width of their content – It means they are max 650px**, which is not even written in the settings field (why?).
​
[An empty field apparently means 650px, its so obvious..])​
​
\—- 5 ——-
What does “Wide” even do? If “content” is set, then Ive never seen any change caused by “Wide”. I cannot tell from the icons either?:
​
[Wide can be whatever – I see no difference])​
​
\—- 6 ——-
For some reason, my header component has a built in padding/margin top, which will show up on every page its used. Under “Dimensions” > “Margin”, its already set to 0.
​
[This gap on top appears on all pages. If i were to have a colored background, it would be an issue. Also, how would i make a colored background??])If i actually wanted to use the light green background, the margin top would ruin the design
EDIT: Turns out i had to go in here and change it
[No number and slider completely to the left, that means no padding currently right? NOPE! ])**I legit had to grab that circle and place it where it already was to remove the padding?!**
How am i to know this? Pls gutenberg, Just tell me padding is present already. Now i have to use every slider i see just to check..
Btw, am i supposed to make a CSS reset like in programming?
​
​
\—- 7 ——-
Since i can only see “stack on mobile” as a responsive option, then how would i make this on desktop
​
But this on mobile:
​
My only guess would be placing them both in the editor and using media queries to display one and hide the other.
But it just sits weird with me to use CSS on that level, when im using WordPress so i dont have to code stuff like that.
​
​
\———————————————– End of rant ——————————————————-
Writing all of this actually helped me a bit. **Rubberduck debugging baby**.
But i cannot help but feel frustrated. I get the feeling that this editor should be so simple to use and easy to learn, but it makes me feel incredibly stupid for failing so hard at it.
[ad_2]
1. The Group is just the overall container, add a Row block inside of the Group, then move your Site Logo and Navigation inside of the Row.Select the Row Block and go to Layout > Justification > select “Space between items” option (the last icon)This will have your Site logo on the left and nav on the right.
2. Not sure what you want your layout to look like, but like in #1, try adding the blocks inside of rows. You can have multiple rows in a Group, you can even nest Groups/Rows/Stacks inside of each other somewhat infinitely.
3. Generally the basic padding/margin settings for a block serve to space things out for all responsive widths. However if you want a custom breakpoint, then you’d have to assign a CSS style to a group/block and add custom CSS to tell it what to do.
4. Right. The overall width is set in the overall layout. Look for the icon in the top right, just left of the three dots. It looks like the Day/Night icon. Select that then select Layout.In here the “Content” width is a global content width, for example 1200px. This is usually a narrower width since we don’t want text content to stretch to the edges, usually only images/backgrounds/sliders.The “Wide” setting is for the widest setting. So I usually set that at 100%. Click on the “px” to change the unit.Once these are set, then you’ll see the cause and effect of the Group blocks in the pages/templates. They’ll behave probably more how you want them to.
Sorry, it looks like you already discovered this…lol.
5. This applies to #4. If the overall template is set to 100%, then Wide in the Group block will fill that width. You don’t even need to set this once the global setting is set.
6. This is set in the global Layout as well. Day/Night icon > Layout > Padding (click the link icon to unlink the sides) > set the top to 0.
7. I’ll have to look into that one.
7. What you could do is create both layouts, then hide the centered text Group on desktop, and hide the wide Group on tablet and mobile.
To make complex designs with Gutenberg, you have to really know CSS. You can add CSS IDs and classes to the blocks to achieve the desired positioning, padding, alignment, etc.
I feel your pain, posts like yours are really helpful for the block editor devs to see where they’re messing up.
I’m trying to take the stuff I bump into straight to Github for a couple of months now to let them know, maybe you should do it too, because quite a few things that annoyed the helll out of me got fixed already.
The way layout works in the editor is kinda weird, partly because of bad naming decisions.
The 650px on the “None” option in the align drop down comes from the global layout “content” value next to “wide” under dimensions. It’s empty in the local settings but the global settings have defaults set by the theme and can be changed.
Global styles can reached through the the “yinyang” styling symbol at the top right which looks like the local styling icon. There you’ll see menus for typography, colors and layout.
I think most of your issues are related to this. “Content” basically means narrow, and “Wide” means how wide your content can be, both are basically invisible containers that are triggered by the blue toggle on wrapper group blocks.
This toggle enables the visibility of alignment options (none, wide, full) on blocks like the row block one level down. You’d use “none” to trigger the “content” value e.g. for centered text blocks/post content blocks in a block post template.
If you set “wide” to 90vw or 92vw and sey it to wide on the outer group/wrapper you basically get a nice padding on all screen sizes, it replaces the need for padding on the outer wrappers.
They’re following the intrinsic design paradigm which involves relative values like vh, vw etc. and clamp inside theme.json.
That’s why there are no breakpoints, the column and media & text blocks wrap automatically when the breakpoint kicks in. Most block theme developers kinda factor this into the design.
For learning best pick the free Olliewp theme which is also very close to the core exprerience and like the 2023 theme also uses core blocks, but there the designer knows what he’s doing and you get better defaults to start from.
You can learn from how Mike and how he builds the patterns, he also has a couple of good tips on his youtube channel.
The core devs somehow don’t realize that it’s currently a bad trade-off between design freedom and complexity especially in combination with the default theme. There’s too much complexity in exchange for the design freedom you get with the core stuff. Designing your way around the limitations is harder than creating something from scratch with code.
Hope this helps bruh, if you have questions just drop them here.