It’s All About Blocks: WordPress Gutenberg Block Editor

Let’s discuss WordPress: My only prior experience with the site was teenage blogging, which we won’t delve into. It was a bit intimidating to return to the platform with a professional mindset, but that fear quickly disappeared because WordPress has undergone significant changes since then. Now, we have the Gutenberg Block Editor, named after Johannes Gutenberg, the inventor of the printing press. The name emphasizes the magnitude of this change. “It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world,” explained Matt Mullenweg, the creator of WordPress. In all my videos and products, I intentionally avoid using the term Gutenberg. It’s a technical term for enthusiasts only and not widely known among general users. I prefer to refer to it as the Block Editor. However, I do think they should add “Dev” to the name.— Adam Preiser (@adampreiser) May 25, 2023. Initially, “Gutenberg” referred to the various components of the updated WordPress. However, now that these updates have been fully implemented, the updated editor is simply called “the Block Editor.” It was initially introduced as a plugin in 2018 but has now replaced the classic version as the standard editor. Here’s what the Classic Editor, which is still available, looks like: [Insert image of Classic Editor]. And here’s the new Block Editor: [Insert image of Block Editor]. Personally, I feel overwhelmed when I see lines of code, even if it’s something straightforward like font formatting. If you’re like me and prefer a more visual approach to blog publishing and page building, the Block Editor’s intuitive layout is a godsend. This isn’t to say that the Classic Editor didn’t have a visual mode, but I found it less user-friendly and harder to understand. The Block Editor is now the standard editor, and WordPress discontinued support for the Classic Editor in 2022. As the name suggests, the Block Editor revolves around blocks nested within blocks, like a Matryoshka doll. How do they work? Let me show you some examples using this article. Important disclaimer: This is based on my personal experience with WordPress as a casual user who isn’t proficient in coding. Each person’s experience with the platform may vary. When I first started using WordPress, my main task was publishing blogs. Blogs are easier to create than full landing pages and typically involve a smaller variety of blocks. At Brafton, we usually write our content outside of WordPress, but it’s just as easy to write directly on the site. However, be aware that very long blogs with lots of images and videos can cause lag, especially in the Block Editor mode. Before diving into the text section, don’t forget about the right sidebar, especially if you tend to hide it due to a small screen size like mine. Some important settings to note are: – Author – URL – Blog categories – Tags – Excerpt (meta description) – Featured image (blog headers) These settings apply to the entire published blog. As you add blocks to your piece, you’ll have different sidebar options for specific blocks, such as: – Text settings: style, typography, formatting, HTML anchor, and CSS classes – Image settings: sizes and alt text. Like any word processor, you can start typing to create a text block. And to add another block? Just click on the plus sign. The menu for the selected block will appear above it. When copying content from a Google Doc (assuming I formatted everything as desired in the doc), everything is pasted accordingly. Headings and text formatting remain intact. What’s interesting about the Block Editor is that each paragraph is its own block, and the same goes for images. This makes it easy to visually select and modify specific elements. The text block type is straightforward. One feature I particularly appreciate is that I can simply paste a media type (image, video, social post with a plugin), and it automatically becomes the correct media block type. For example, pasting a URL will generate an image block. This is incredibly useful for someone like me who used to manually copy and paste HTML tags such as <a href=”link”></a> and <img src=”image”>. If you enjoy coding, you can still do so by selecting the code editor in the three dots menu at the top. There are some features I don’t use often but find helpful, such as the details and outline in the top bar. Before publishing, I like to: – Ensure the URL slug is correct – Check if images are full-size – Make sure images have alt text for accessibility – Confirm that links open in a new tab and are properly tagged. I highly recommend using the Yoast plugin, which helps you preview how your blog will appear in search results. It shows if any words will be cut off in the title tag or meta description and provides a preview of the featured image. It’s simple and practical. Now, let’s talk about building landing pages. Page building is a different process altogether. You need to have a layout planned out from start to finish and understand how each panel will work together. It’s also helpful to have a general idea of what blocks you’ll need for the page. At Brafton, our process looks like this: – Top banner panel with title and relevant image with a form – Panels per heading, alternating between white and gray backgrounds – Client success panel showcasing our best examples – An inline call-to-action for a guide, catalog, or other relevant content – Other accessible regions – a global presence – A navy blue final panel with a call-to-action button. Here’s an example of a page layout with a top panel introducing the topic, middle panels providing specific information about each service, and a bottom panel with a call-to-action. It’s simple(ish), effective, and to the point. First things first: always save your progress! While WordPress has an autosave feature, it’s better to manually save to be safe. The blocks for building pages are similar to those for blogs, but you have more flexibility in creating the layout. Our tech team excels at this! As a non-techie, I’m always amazed by the impressive layouts they create. For example, we wanted a panel showcasing our best infographic examples, and they delivered: [Insert example panel]. When you hover over the panel, the colors shine through. Here are some of my favorite panels that I’ve built: [Insert examples of favorite panels]. What’s great is that even someone without coding skills like me can create a complete page. For example, this page is a combination of multiple blocks. Remember, everything is a block! This panel consists of a text block on the right and an image block on the left: [Insert example panel]. The same applies to this panel: a 3-column block, with each column containing its… [Text cut off]



Source link