Hey thanks for coming! This post is all about the Plugin & Blocks I have made for my Custom Theme called “Magnolia Block.” This plugin currently has three blocks built from the WordPress Core Blocks.
Block Types
About Block see it here
The About block is a group of an image block, heading and paragraph.
Call To Action Block see it here
This is a column block with a cover block on one side and a paragraph and button on the other.
This block supports reusable capability.
Post Grid Block see it here
The post grid block is a Latest Posts block with the default states set to be 3 columns and 6 posts, displays the featured images and links them to the posts, sets the featured image size to Trellis Square, and displays the post excerpt.
This block supports the Background Color, and Typography settings.
The post grid block in the Editor:
Getting Started
I began creating the first block using the npx @wordpress/create-block command outlined here. I used the tutorial located here to create a group of Core Blocks.
Features
This plugin will currently check if Trellis or one of the Trellis Child themes is the current theme. A message will print out in the WordPress Dashboard depending on whether this is true or not. The reason this check is important is because I will be incorporating Trellis Hooks to optimize the image sizes attribute and more for this plugin.
If a Trellis theme is not the current theme:
If a Trellis theme IS one of the current themes:
Upcoming features will include:
- custom toolbar buttons on these core blocks to create more customization options (like turning off “theme styles”)
- trellis filters to optimize the images within these blocks
- a custom plugin panel in the block selection pane to organize these blocks
Styling
After creating the basic components, I used SASS to build out the design of this block based on where it’s located and on what theme. Right now, I have only focussed on the style.scss file, but I do plan on adjusting the editor to match the styles up more closely.
If a user wants to place this block within a post, or create a reusable block out of it, they’re able to. I left the customizations mostly up to the user. They can decide whether or not to use the round style on the about image.
I did adjust the styling for the blocks to match the Trellis framework and child themes. As you can see the current theme on my site (Magnolia custom Trellis child theme), is also using this block in the sidebar.
On Trellis
The design of the block on Trellis Framework matches that of the sidebar.
On Wisteria
The design of the block on Wisteria also takes on the styling of the sidebar.
On Birch
On Birch the styling is pulled from the Latest Posts excerpt design.
On Bamboo
Bamboo is another design derived from the sidebar.
Here’s the Magnolia About Block:
Howdy! Thanks for stopping by.
Hey I’m Ryan! This is my Magnoila About Block for the Post Editor.
The Call To Action Block
Call To Action
Select That!
Post Grid Block
- CSS Layers & Variables: Advanced CSS Concepts
Use Case; Making Themes. Looking for advanced CSS concept tutorials? Just trying to understand what CSS Layers or CSS Variables are? Well, you found a great place to start! Welcome! … - Vanilla JS Project: Make a Cookie Banner
Hey CodeNewbies and welcome! If you’re here it’s because you’re looking for a project to practice your Javascript skills. Well you’ve come to the right place! This Vanilla JS project … - Five Ways To Improve LCP Without a Developer
As a content creator, code newbie, or seasoned developer, understanding and optimizing for Core Web Vitals isn’t always easy to understand. Google I/O 2022 just wrapped and I watched a … - Build An Accessible React Carousel
Hey front end developer! Are you working on your React.js skills? Looking for a project that uses React Hooks? If you’re wanting to learn how to build an Accessible React … - My Magnolia Blocks
Hey thanks for coming! This post is all about the Plugin & Blocks I have made for my Custom Theme called “Magnolia Block.” This plugin currently has three blocks built … - Accessible React Toggle Buttons
Learn how to make reusable, accessible toggle buttons with React. I’ll show you step by step how to make inclusive button elements.
Photo by Fikret tozak on Unsplash