The wp-add-flex-reverse-toggle npm package

By:

Last Updated: Today at August 13, 2025 @ 9:04am

Gutenberg React Typescript block editor

This little NPM package exports a single Typescript function, addFlexReverseToggle that takes 1 argument: a namespace string that prefixes all the internal callbacks.

Getting Started

1. Add the package:

Copy Code
npm i @choctawnationofoklahoma/wp-flex-reverse-toggle

2. Import the package

Copy Code
import addFlexReverseToggle from '@choctawnationofoklahoma/wp-flex-reverse-toggle';

addFlexReverseToggle('cno-starter-theme');

3. Bundle and enqueue the file to the block editor with webpack and the enqueue_block_editor_assets hook.

How it Works

The function is a public wrapper around the private FlexReverse method addFlexDirectionControl. This private method wires up 4 callback functions to 4 different JS filters (like add_filter but for JS) to modify certain core blocks when certain conditions are met.

NOTE: As of v1.0, only core/group and core/columns blocks are supported

Broadly speaking, the class works like this:

  1. addFlexDirectionAttribute extends the core block’s attributes to allow isDirectionReversed which is a simple boolean
  2. addFlexDirectionToggle adds the Toggle Component to the block’s Settings (“InspectorControls“) by using the createHigherOrderComponent
    • creating an HOC essentially wraps the original block as a new function and returns the original block with our modifications
  3. addInlineStyles and addFlexDirectionStyles apply the flex direction styles as inline styles in both the editor and the front-end.

Bonus: getReversedDirection

This is a utility function that determines which inline style needs to be added based on the block passed and whether or not it’s a flex container.

See something inaccurate?