GP Blocks Noob Questions

[Ian]

My next site is going to be build with 98% Gutenberg and I am loving GP Blocks. Trying to build out something more fancy like I could with page builders and have some questions. Can someone help out a noob?

1. Inside WordPress when I edit a page, the editor area does not fill the screen. It’s not like the as wide as the demo video as shown here: https://generateblocks.com/

Any ideas on how I can change this?

2. In fact, when editing a block and choosing Mobile, the editor does not show the mobile preview. Is this normal?

3. In the above video, I see there is now an option to include SVG Icons insdie the GP Block > Headline. How does one grab these SVG codes and is this like traditional icons (say from Font Awesome) where many calls can lead to slower page load speeds?

So excited to be developing an entire site without a page builder. Let’s see how this goes!

[Tom]

Hi there,

1. You can set the Page Builder Container to full width: https://docs.generatepress.com/article/page-builder-container/

That can be done per-page, or via the Layout Element.

2. For now, yes. Gutenberg is working on mobile previews, but it’s not stable enough for us to integrate, yet. We may just work on our own solution for now until they’re ready.

3. We need a documentation article on this for sure. Wherever you can find font icons (like Font Awesome), they should have an option to download the .svg file. If you download that file and open it in a text editor, you’ll find the SVG code. Then, run that code through an optimization tool like this: https://jakearchibald.github.io/svgomg/

That will give you super clean SVG code which you can then add to your editor.

Hope this helps!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ian]

Hey thanks Tom. Unless I am mistaken, we are referring to different widths in regards to #1.

I was wondering if there is a way inside Gutenberg Editor to widen the editing section. Even in “Fullscreen Mode” without the WP left menu, my editing area is not very wide, unlike what I see in your demo video for GP Blocks.

I hope WP will have tablet and mobile preview instead of having to guess what things may look like, make an edit, save then Preview in an outside browser.

Thx for the info on using SVG code. I have done what you suggested. In the optimization tool, I click on the arrow to download this file correct? If so, it gave me this:

<svg height=”512″ width=”512″ xmlns=”http://www.w3.org/2000/svg”><path d=”M122 6h320v448H122z” fill=”#b9c2cf”/><path d=”M122 438h320v16H122z” fill=”#95a4b6″/><path d=”M70 426V58h320v448H150z” fill=”#fff”/><path d=”M150 490h240v16H150z” fill=”#dce1e7″/><path d=”M70 426h80v80″ fill=”#95a4b6″/><g fill=”#95a4b6″><path d=”M118 186h32v32h-32zM118 266h32v32h-32zM118 346h32v32h-32z”/></g><g fill=”#012d4a”><path d=”M448 0H116v52H64v376.485L147.515 512H396v-52h52zM144 491.515L84.485 432H144zM384 500H156v-80H76V64h308zm52-52h-40V52H128V12h308z”/><path d=”M118 100h160v12H118zM118 132h128v12H118zM156 180h-44v44h44zm-12 32h-20v-20h20zM182 212h128v12H182zM182 180h160v12H182zM156 260h-44v44h44zm-12 32h-20v-20h20zM182 292h128v12H182zM182 260h160v12H182zM156 340h-44v44h44zm-12 32h-20v-20h20zM182 372h128v12H182zM182 340h160v12H182zM182 452h128v12H182zM182 420h160v12H182z”/></g></svg>

Pasted it inside Headline > Icon > Icon SVG HTML but nothing is showing.

By the way, where is the image being called from? Do I need to upload anything inside WP?

[David]

Hi there,

the Editors width changes to match the content width of your site. So if your sites container is set to 1200px and there are no sidebars then the editor will display a maximum of 1200px ( or thereabouts – as the editors add some padding necessary for the UI ).

Not sure where you got the SVG from but its invalid hence GenerateBlocks is just stripping out the paths.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ian]

That’s odd David. Site container is either 1100 or 1200 and I just captured my window and the WordPress editor is roughly 750 pixels wide.

WP MENU – LOTS OF WHITE SPACE – EDITOR – LOTS OF WHITE SPACE – WP SETTINGS

Odd?

As for the svg, I downloaded from Flaticon as a test after reading Tom’s instructions. Where else can one find free svg icons?

[David]

If you hide the Settings Sidebar ( by clicking the Cog icon ) you should get an enlarged editing area. If you’re not then something like a sidebar is effecting that – or their simply isnt enough space in your browser viewport.

Those icons should be fine.
Skip the Open in Text Editor part and open it up in the app:
https://jakearchibald.github.io/svgomg/

Then copy out the SVG directly into the GB Icon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ian]

ok, I have done more testing. Added this to the CSS but still no luck:

/* Main column width */
.wp-block {
max-width: 720px;
}

/* Width of “wide” blocks */
.wp-block[data-align=”wide”] {
max-width: 1080px;
}

/* Width of “full-wide” blocks */
.wp-block[data-align=”full”] {
max-width: none;
}

So I check a site not using GP and it defaulted to the width of my monitor. This was consistent across a few sites so there must be a theme setting that I have not set properly. Any guesses?

[Ian]

Have more info. On the site in question, I switched it to the 20/20 theme but the same issue still occurs. Not sure why my other sites running non GP theme is not exhibiting this. Driving me nuts working in a tablet-sized width WordPress editor.

[Ian]

omg! Inside GP BLocks > Container > Layout, here are the settings:

Container = Full width
Inner Contianer = Contained Width
Contained wisth = 1100

This gives me the tablet sized editor.

When I switch it to:

Container = Contained width
Contained width = 1100

Then the editor expands out to a “desktop” width but only for 1 specific container.

And of course, it will not give full width on the front end.

What setting have I missed to get the editor to full width?

[Ian]

Doh! Another user alerted me to this:

add_filter( ‘generate_block_editor_content_width’, function() {
return 1200;
} );

All fixed. Not sure if this will work for lesser monitor resolutions, maybe it’s something that can be addresses in the next release of GP Block?

Now let me go try that SVG icon again with your new instructions.

[Ian]

ok, tried uploading the SVG file to that site and icons now work perfectly.

One last question. I tried using a fairly complicated icon (pumpkin with lots of colours). The SVG generated is fairly length. May I ask if this code actually builds the image so it’s not like adding a Font Awesome icon where it is retrieved form another server?

[Leo]

The SVG code should be actually building the icon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ian]

And there is no external resources needed to make that build?

[Tom]

It’s an inline SVG, so there’s no external requests needed. It’s just code that’s rendered by the browser to display an icon.

However, if it’s a ton of SVG code, it may be better performance-wise to use a PNG.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ian]

Perfect, thank you!!!

[Author]

Posts