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
- Test Images
- Accessible Reusable React Component
If you’re looking to build your React Apps with Accessibility features baked in, you’re in the right place. In this article, I outline how to create a generic component that … - Context vs Props in React
Hey! Thanks for dropping in. This article focuses on the difference between React props and React Context. I’ll walk you through a, hopefully, familiar concept to teach you how to … - Array methods in React
Hey and welcome! Thanks so much for stopping by. If you are looking to learn how to work with array methods beyond map in React such as filter(), sort(), or … - Test React UseState with Jest
Hey, hello, hi thanks for stopping by! Want to learn how to test React UseState with Jest? Well, look no further. This article covers basic component testing, as well as … - WordPress in a React-Typescript Project
Hey there, hope you’re well! If you’re interested in learning to develop seriously with WordPress and React you found the right article. The WordPress packages, and many other open source …
Photo by Fikret tozak on Unsplash