WordPress, as you may know, is the world’s preeminent platform for web content creation and management.
May 27, 2023 marks the 20th anniversary of WordPress’s founding – and the beginning of a spectacular evolution, from a creativity and hosting environment for bloggers, to a technologically advanced foundation for building awesome web experiences.
Today, there is about a 4-in-10 chance that a web you’re visiting at any given time is powered by WordPress technology.
As a giant open-source community of software developers, content creators, marketers, and website agency owners, WordPress has been celebrating this occasion with online and in-person events all over the world.
Marking the occasion in a personal way
I had been celebrating this special 20th anniversary, by using it as an incentive to make a series of design enhancements to my WordPress-powered blog.
In particular, I’ve been creating new website elements using the latest and greatest WordPress content creation and editing tools, collectively known as Gutenberg. It offers a visual site editing experience that’s user-friendly and easy to learn, similar to the intuitive capabilities that have made Squarespace, Wix, and other site builders so popular.
The video clip below gives you a small idea of the visual creation workflow in Gutenberg.
Perfect the design on one type of block, then copy and paste those styles to other blocks to get just the look you want. Update to WordPress 6.2 and grab a block theme to try it out. #WordPress pic.twitter.com/soIebWJ5H3
— WordPress (@WordPress) May 2, 2023
With Gutenberg, I’m able to craft my own, customized visual elements much faster and way more streamlined than coding and web development, or having to rely on a proprietary WordPress theme or plugin.
Here’s what I have created with Gutenberg – through a visual editor, and little or no hard coding.
Article summary
I’ve always wanted a section at the beginning of an article that provides a bulleted summary. This is great for longer-form blog posts that gives the reader an idea of the article’s content before diving in.
Key Points
- This would be the first summary statement.
- This is where the second summary statement would be.
- Additional statements can be added if necessary. I’ve designed the section to allow multiple lines.
Pull quote
This is my design for a presenting a quote. It was inspired by a pull quote design I saw on another blog, and then decided I wanted to emulate it.
This reusable block was created to allow presentation of pull quotes.
Perry Sun
Sidebar
It’s often the case that when writing a blog post, you want to get into a side discussion that’s separate from the flow of the main article. I created a sidebar for this purpose.
Code presentations
This is actually a carryover from a legacy project that involved quite a bit of hand coding to create – and then having to dig around for it whenever I wanted to use it in a blog post.
I used Gutenberg to recreate this project into a simple visual module that I can easily call up whenever I want to show code with some nice color formatting.
div.meter {
width: 250px;
height: 22px;
background-color: #fff;
border: 2px #333 solid;
border-radius: 22px;
}Additionally, I used to Gutenberg to create standardized formatting whenever I want to mention code elements inline within a paragraph. Take, for example, the HTML tags <section> and <aside>.
Footer with “About Me”
Finally, I created a new section to go at the end of a blog post. It’s just to introduce me to a reader who (very likely) is coming over from one of my social media posts.
Happy 20th anniversary, WordPress!
I am Perry Sun, a product marketing professional, and this is my personal blog. I like to write about content creation, personal development, and technology. Please visit my website to learn more about me.