Skip to Content
My Magnolia Blocks

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 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:

a little short of middle aged woman with red hair, pale skin, and big glasses.

Howdy! Thanks for stopping by.

The Call To Action Block

Call To Action

Select That!

Post Grid Block

  • 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.
  • Accessible To Do List with React.js
    In this article I’ll show you how to build an accessible to do list diving deep into inclusive form components with React.js.
  • Aes Sedai Slack Emoji – The Wheel Of Time
    So you want a transparent Aes Sedai symbol emoji to add to slack, or for adding to your email signature? Well look no further, this took me all of 10 …

Photo by Fikret tozak on Unsplash