Category: Graphic & Web Design

A SHORT overview of the advances in WordPress: Gutenberg (the block editor) & full site editing (block themes) + a Drupal extra

I’m writing this because I haven’t been following WordPress development closely for the last 3 years (hello 2020 pandemic & aftermath.) There is so much content out there for the classic templates & theme builders like Elementor, Divi, Beaver Builder etc. that it’s REALLY hard to get a grip on the new direction that WordPress is headed especially since it’s still in the midst of development.

I initially couldn’t even find a good CLEAR & simple breakdown of the terminology I needed to know so writing this was partially in order for me to process and better understand what I was consuming and pull out some key things. My own Quickstart guide if you will but for the folks who have been using WordPress for over a decade.

Keep in mind that this is still evolving and the date I’m writing this is June 20, 2023. WordPress is currently 6.2.2. Things will likely change again for WordPress 6.3 which will likely be August 2023 based on the linked video & WordPress roadmap.

WordPress Editor

Gutenberg is the block editor for pages and posts. It is apparently no longer exclusive to WordPress and is also available for Drupal.

This link has the visual breakdown & screenshots: https://developer.wordpress.org/block-editor/

And this is the deeper dive: https://developer.wordpress.org/block-editor/explanations/faq/

But why is there a Gutenberg Plugin if it’s now built into WordPress?
The Gutenberg plugin is now early access to what’s coming to block and full site editing. Current version of the plugin is 16.0.0. Do not use this if you aren’t ok with beta testing.

WordPress Theme

Full site editor (FSE) is another name for WordPress block themes in WordPress. “Full Site Editing” is sometimes used as a verb.

Handy chart for Classic Theme vs Block Theme if you’re transitioning: https://developer.wordpress.org/themes/block-themes/#differences-and-similarities-between-classic-themes-and-block-themes

And crash course if you’re switching from a Classic Theme to Block Theme: https://learn.wordpress.org/tutorial/how-to-switch-from-a-classic-to-a-block-theme/

Good screen shot breakdowns of the full site editor (FSE) from Oct 17, 2022: https://www.smashingmagazine.com/2022/10/wordpress-full-site-editing/

I highly recommend just diving in on a sandboxed / staging environment or demo site using Automattic’s blockbase so you familiarize yourself using a theme created as WordPress / Automattic intended:

Blockbase

And/or one of Automattic’s Blockbase child themes:
Linked them because they are harder to search for.

Videomaker
Seedlet (Blocks)
Zoologist
Quadrat
Geologist

When do I need to create my own child themes?
(if I’m not building a theme from scratch)

An excellent short summary from https://fullsiteediting.com/lessons/child-themes/

“If you change theme.json, HTML, CSS, PHP, or JavaScript files directly, you still need to create a child theme because these files are not protected when you install a theme update. There are also settings and styles in theme.json that you can not remove through the global styles interface. In this case, you also want to create a child theme and add your custom theme.json.”

But really when might I change these files? This video is about theme creation HOWEVER it’s the shortest video I found that helped me understand how themes are now being built:

Reusable Blocks, Block Patterns, Templates and Template Parts & Synced Patterns:

Except this appears to be in flux & currently changing:

The Difference Between Reusable Blocks, Block Patterns, Templates & Template Parts
Reusable Blocks Renamed to Patterns with Synced and Non-Synced Options
Reusable Blocks are Patterns too, Style Book, Block Handbook Navigator and Command Center—Weekend Edition 258

Query loop blocks!

https://www.elegantthemes.com/blog/wordpress/wordpress-query-loop-block

Query Loop Block

What if I want to create my own WordPress Block Theme that can be used with the Full Site Editor … OR learn more?

These are some of the best resources I came across (this is also about where it becomes overkill):

And now for something completely different: Gutenberg block editor for Drupal

https://drupalgutenberg.org/ • https://www.drupal.org/project/gutenberg

WordPress 5.0 and the Gutenberg editor – first impression

WordPress 5.0 is getting a new WYSIWYG editor. And it’s VERY different from what you are used to…
DEMO as a plugin (recommended not to do it on a live site): https://wordpress.org/plugins/gutenberg/

I’m going to be the person who likes the new editor in WordPress when they take it live in WP 5.0. Right now it’s available to demo but it’s a bit buggy and the reviews are people hate it and say it’s a UX fail.

 
I don’t think it’s a UX fail – it just takes a bit of tinkering to learn something new.
I AM worried about client choosing really REALLY bad color combos for their text and I want a way to lock that down but I do think with some tutorials this will actually be easier for clients to use.
 
It wouldn’t save my post on the site I installed it on but based on what I’m reading it might be an “issue not specific to Gutenberg, it’s global to any WP REST API usage, I don’t know if your webserver is Nginx”…
 

So next I’ll be trying it on a base install to see if it was a plugin conflict or something server based. Actually it says to not use it on a live site yet but I’ve got a site that’s a play site that I use for this type of thing (I want to see where things break on a real server with real plugins and real content.)

It’s not ready for prime time because of some things it still breaks (settings overlapping for example) but I look forward to using it once it’s ready.

Edit:

Save Draft & Publish work on a site without a lot of plugins.
Found a few more issues:
  • Editable permalink is something that seems to be on the list of things they are aware of.
  • It seems that Gutenberg won’t update once the post is saved. Going to test that now. Or there’s a problem with taking it to a private post and back to public. Need to search a bit more on Git because I’m not seeing this one.
  • Versioning… where is that going to live? I like having the ability to roll back posts to a previous version in case someone really mucks something upand I’m not seeing that in the current version of Gutenberg.

Moving your account from Feedburner to Google

I’ve been trying to move my account from Feedburner to Google for the last few days. Apparently according to their update blog, they’ve temporarily suspended moving: http://feedburnerstatus.blogspot.com/

I searched the web for solutions because I didn’t want to wait until the last minute and came up with a few things but most things said to click on the “Move your account now” link when logged into feedburner … which at the moment doesn’t exist.

Somewhere I found the following link but not the following instructions.

Looks like if you:
1) log into your feedburner account
2) log into the google account you want to transfer to
3) then click on the following link you can still make the transfer.
https://feedburner.google.com/migration/start.action?hl=en

If you have multiple feedburner and google accounts make sure you log into the correct ones.

Since google isn’t doing a good job about notifying people what’s going on I didn’t want to wait around til the last minute.

I really think google is messing this transition up. No e-mail notice about requiring customers to manually go in and make this change? Seriously? And it’s required: https://www.google.com/support/feedburner/bin/answer.py?answer=126303 February 28th, 2009 is the cutoff.

National Corvette Museum 14th Anniversary 2008 Bowling Green KY

So for everyone interested I just finished off the Museum’s 15th Anniversary logo for next year’s event before heading off to the 14th Anniversary over Labor day weekend. I’ll be giving everyone a sneak peak of the logo once I’m 100% sure it’s been approved and they’ve started applying it merchandise.

Meanwhile, I hope you’ll enjoy some photos from this year’s festivities. Use the “info on” button to see the information about a picture.

I’ll be adding a panoramic image of the “3’s” display. There is only one 1983 in existence and it’s at the National Corvette Museum. This is the only place in the world that they can have the 1953, 1963, 1973, 1983, 1993, & 2003 side by side.

Also, the museum has purchased a piece of land that they’ll be building a roadcourse, dragstrip, and autocross/skidpad on: http://www.z06vette.com/forums/f29/update-ncm-dragstrip-112213/

Logo Design Tips

(this is an article I wrote a couple of years ago – eventually I will create an article database of some sort.)

If you’re just starting your business keep reading.

If you’ve never really had a logo for your business keep reading (I’ve seen this in some smaller businesses.)

And if for some reason have the chance or ever think you will have the chance to create a new logo for yourself or your company without destroying years of marketing and brand recognition then keep reading.

Some key aspects to consider when you and/or your designer are planning your logo are:

– Does it fax well?
I start all of my logos in black and white even if there will eventually be color or gradients added. If the logo looks and feels right in black and white (no grey) then it should work well in a larger variety of applications than something that has been created in color initially.

– Does the font choice convey the message you want to be conveying?
Most people are familiar with the font Comic Sans. Some people even like the font Comic Sans. But even if you like the font, you would be more than likely to agree with me saying that this font would not be appropriate if used in a logo for a business that wants something with a level of professional sophistication.

– Have you written down adjectives that describe your company or how you want your company to be seen?
Things like professional sophistication or creative and friendly. See if the design “matches” that description or see if you can find a font that has the same sort of visual emphasis to it. Let your logo “describe” your company for you some.

– Does your logo have a shape or an object that can easily identify your company? (optional)
A great example is Apple’s logo. You recognize it instantaneously when you see their little apple with the bite taken out of it. Granted it would take time and advertising to make sure your object, shape, symbol would be as recognizable without words, but it would also make your logo easier to identify when scanning over a page. It isn’t always necessary however.

– Does your logo have flexibility?(optional)
One of the ideas that has struck me as being very useful recently is the idea of having what I’ve been calling a “break-apart logo.” Something where there is an element in the logo that can either be broken off on its own and used in a variety of ways or could be moved around within the logo to make it either vertical or horizontally shaped without changing things too much. This may not always work well for all logos but it’s also something to consider.