Gutenberg vs Custom HTML/PHP


Uncategorized

Updated Sep 24th, 2021

Gutenberg Blocks

Simple paragraph text

Colored background page sections with text variation (white)

Simple list items with custom icons

Short codes for things like contact and donation forms

Theme Files

Navigation Menu including Mobile Menu

Sliders (glide.js)

Grid Items

The theme files are really for the structure of where you want to insert the content. Get a list of titles as data and use the theme files to render in a grid. Don’t want me or client to be adding classes in the block editor. Don’t really want client changing colors either.

Creating Custom Gutenberg Blocks

Often used in conjunction with ACF plugin.

Plugin for Custom Blocks

Kadence

Ultimate Add-ons for Gutenberg

Sources

WPShout

Bring In Data

Custom queries allow you to bring in whatever you want, wherever you want. For example, can show only two posts with a certain category name (“schedules”).

Be sure to use wp_reset_postdata() after running each custom query in a while loop to clean up after ourselves.

Should we create our data with simple posts and pages or bring in custom fields and/or custom post types? Out of the box WP comes with two post types, (posts and pages).

Be sure to support excerpts if one is added and trim words of not.

Primetime: schedules, events, coaches, forms, waivers, competitions, trophies, announcements, important notice, etc. Schedules is the most imperative. News or Events can be (competitions, tie die day, etc.)

Homefront: projects, sponsors, team members, etc.

Don’t want changing themes result in the custom post type access in dashboard to be gone, (note it would still be in database just not in admin panel). So we store in a mu-plugins folder instead.

I do not believe you can add an entry to a custom post type in the WordPress editor just yet. Can still use your phone to access the WP dashboard though.

We need to enable custom fields for our CPT but out of the box this is awful. We could improve ourselves but don’t want to reinvent wheel so that’s why we use ACF plugin.

If using customer query for events based on two most recent you need to custom query based on custom fields.

WP Can Be Frustrating

The only reason to build in WordPress is so someone else that is a non-coder can easily make edits themselves. Using WP for a download pdf linked file, maybe update some hours of operation, a snow day notice, swap out some images, etc. Now we have to code in PHP, use Gutenberg block editor, plugins, short codes, etc. Lots of ways to do something makes it seem overwhelming. Custom queries, standard blocks, Gutenberg blocks, custom fields, custom posts types, (a long list even before talking plugins or page builders).

Should the client update in the customizer, a custom post type or a Gutenberg block? Things like the logo and hero images seem to be good for the customizer. Copy seems to be good for blocks.

How can I intersperse Gutenberg Blocks between custom code? Seems like it could be a custom query.

Simple Edits

Some simple edits for every theme should be to swap out logo in the customizer.

Swap out the hero image or hero slider images.

Change the text on the screen via Gutenberg blocks.

The WP Query Block

Moving more and more content from being hard-coded in template files to the Gutenberg editor I noticed a “wp query block”

Here is a link about it. Here is another one that talks about php-based themes versus block-based themes.

The Cover Block

I was pleasantly surprised to add a cover block with a color overlay on the image and text over that! I added custom classes to the block to recreate the desired effect I was looking for. Also surprised with how easy it was to make the image fixed so gave a parallax-like effect.

The Commingling of Code and Blocks and Classes

Oh my. I know it’s about a better experience for the editor but yikes. Adding classes in the editor seems wrong.


Top