Introducing Fancy-Squares-Core-Block-Enhancements – Supercharging WordPress Blocks with Bootstrap

By

Hey there, WordPress folks! I’m thrilled to finally share a project I’ve been pouring my heart into: Fancy-Squares-Core-Block-Enhancements. If you’ve ever wanted to take your WordPress Gutenberg blocks to the next level with Bootstrap classes and custom controls, this plugin might just be your new best friend. You can check out the full repo on GitHub here – and trust me, it’s packed with goodies for developers and editors alike.

What’s This Plugin All About?

At its core, Fancy-Squares-Core-Block-Enhancements is a WordPress plugin that extends the default Gutenberg blocks with extra functionality. I built it to make it super easy to apply Bootstrap utility classes directly in the editor, while also adding custom controls for things like column widths, padding, and margins. The goal? To give you more design flexibility without ever leaving the block editor.

Here’s the gist of what it does:

  • Extends Core Blocks: It targets blocks like core/heading, core/paragraph</code >, core/columns</code >, and core/column</code >, adding new attributes and controls.
  • Bootstrap Classes: You can apply Bootstrap classes (think display, position, zindex, align-items, etc.) via handy FormTokenField inputs in the Inspector.
  • Custom Variations: It replaces default blocks with custom variations (e.g., “Heading (Custom)”) in the block inserter, so you’re always working with the enhanced version.
  • Responsive Controls: For core/column, you get breakpoint-specific width controls, plus padding and margin settings for all blocks, with support for every side and breakpoint.

The Journey: From Idea to Reality

I started this project because I was frustrated with how limited the default Gutenberg blocks felt when it came to styling. Sure, you could add custom classes, but it wasn’t seamless, and I wanted more control over things like responsive column widths and spacing. Plus, I’m a big fan of Bootstrap’s utility classes – they’re a lifesaver for quick, consistent styling – so I figured, why not bring that power into the block editor?

The first step was figuring out how to extend core blocks without breaking anything. I used the @10up/block-components library to hook into Gutenberg’s block registration process, adding new attributes like displayClasses, marginClasses, and a unique dropdown for each block. From there, I built a BlockEdit component to inject custom Inspector controls, so users could pick Bootstrap classes and see the changes live in the editor.

One of the trickiest parts was getting the responsive controls just right. For core/column, I added width controls for different breakpoints (Base, Mobile, Tablet, etc.), but I also wanted to support padding and margins across all blocks. This led to a lot of experimentation with dynamically generated attributes – shoutout to the generateAttributes function in utils/helpers.js for saving the day! Eventually, I split the margin controls into PositiveMarginControl and NegativeMarginControl components to make things cleaner and fix some UI quirks (like an annoying offset in the range inputs).

Key Features I’m Most Excited About

Let’s break down some of the features that make this plugin shine:

  • Bootstrap Class Magic: In the Inspector, you’ll find a “Bootstrap Classes” panel where you can add classes like d-flex, position-relative, or z-3 using FormTokenField. There’s even a toggle to show the raw class values instead of labels, which is great for power users. For core/columns, I recently added alignItems and justifyContent options, so you can easily control flexbox alignment (e.g., justify-content-center to center your columns horizontally).
  • Responsive Column Widths: If you’re using core/column, you can set widths for each breakpoint using Bootstrap classes like col-md-6. There’s a handy UI with range inputs, and you can choose “auto” to let the column inherit its natural width. I also added a little nudge in the UI to remind users to set the parent core/columns block to the “Bootstrap” style – it helps prevent columns from breaking unexpectedly.
  • Padding and Margin Controls: Every block gets padding and margin controls for all sides (All, Horizontal, Vertical, Top, Right, Bottom, Left) and breakpoints. Positive margins range from 0 to 5 with a “None” option to reset, while negative margins go from -5 to 0 (e.g., m-n3). The UI uses range inputs, so it’s super intuitive to adjust spacing on the fly.
  • Custom code Format: Need inline styling? Select some text, hit the “code” toolbar button, and a modal pops up where you can apply Bootstrap classes and set text/background colors. The selections are saved with the <code> and repopulated when you edit it later.

What’s Inside the Repo?

The GitHub repo is organized to keep things tidy and maintainable. Here’s a quick look at the structure:

  • components/: This is where the UI lives – BlockEdit.js for the Inspector controls, plus WidthControl.js, PaddingControl.js, PositiveMarginControl.js, and NegativeMarginControl.js for the custom settings.
  • utils/helpers.js: Utility functions like generateClassName (for applying classes to the block preview and output) and generateAttributes (for dynamically creating padding/margin attributes).
  • config/: Configuration files like blockConfig.js (defines which blocks to extend and their options) and constants.js (centralized definitions for padding/margin sides).
  • formats/code-format.js: Handles the custom inline <code> format with the modal UI.
  • assets/icons/: Icons for the breakpoint labels in the width controls (desktop, laptop, tablet, mobile).

How to Get Started

Want to try it out? It’s pretty straightforward:

  1. Clone the repo from GitHub.
  2. Run `npm install` to grab the dependencies (it uses WordPress packages like @wordpress/block-editor and @10up/block-components).
  3. Build the project with npm run build (assuming you’re using a standard WordPress setup with @wordpress/scripts).
  4. Copy the built files to your WordPress plugin directory and activate the plugin.
  5. Open the block editor, add a supported block (like a heading or column), and start playing with the new Inspector controls!

What’s Next?

I’m already thinking about a few improvements. For one, I’d love to add more Bootstrap class options – maybe typography or color utilities. I’m also considering a toggle to make negative margins more intuitive to reset (right now, you have to set a positive margin to “None” to clear them). And of course, I’m always open to feedback – if you try the plugin and have ideas, drop a comment on the repo or reach out!

This project has been a labor of love, and I’m stoked to see how it can help other WordPress developers and editors. Give it a spin, and let me know what you think!

Happy building,
Rory