WordPress.org

Plugin Directory

CSS Class Manager – An advanced autocomplete additional css class control for your blocks

CSS Class Manager – An advanced autocomplete additional css class control for your blocks

Beskrivning

Struggling with adding multiple CSS classes to your WordPress blocks? CSS Class Manager simplifies the process with autocomplete suggestions and a dedicated manager for adding, editing, and organizing your classes. Boost your block styling efficiency!

There are two main motivations behind creating this plugins:
Limitation of Block Style – When applying a block style, only one CSS class can be added to a block. Unfortunately, the block editor lacks the ability to select multiple block styles. To address this, users must resort to the Additional CSS Class(es) inspector control to apply multiple classes. CSS Class Manager provides a powerful manager and an autocomplete inspector control, enabling users to easily add and apply CSS classes to their blocks.
Poor UX of the Addional CSS Class(es) control – The default control for adding class names is a simple text input. This can be cumbersome, especially when applying CSS classes frequently. With the custom inspector control provided by CSS Class Manager, users can effortlessly add their class names, enhancing the user experience.

Features

  • Advanced Autocomplete Control: Streamline block styling with autocomplete functionality for CSS classes.
  • Effortless Class Management: Easily add, edit, or remove CSS classes directly within the manager interface.
  • Import and Export: Seamlessly transfer custom CSS class names to ensure consistency across projects.

Getting Started

  1. Activate the plugin within your WordPress setup.
  2. The advanced control will replace the default ”Additional CSS Class(es)” and can be found in the ”Advance” block settings section.
  3. Adding and selecting classes in the autocomplete field is similar to the tags and categories fields.
  4. To edit and manage class names, click the ”Open Class Manager” link or select ”CSS Class Manager” from the More Menu.
  5. Import/Export can be done from the manager modal.
  6. Use css_class_manager_filtered_class_names filter to add class names with PHP files.

Skärmdumpar

  • The advanced inspector control is located in the Advanced block settings section.
  • Multi-select tag like input control instead of plain text field.
  • The CSS Class Manager preference modal window.
  • The class names saved in the class list will show up in the control dropdown.
  • Delete saved class name so they won’t show in the dropdown anymore.
  • Import or export your class list.

Vanliga frågor

Where can I find the JavaScript and CSS non-compiled source files?

Please checkout the GitHub repository of this plugin to see the sources.

How to open the manager modal?

Under the Additional CSS Class(es) control, you will see a link says Open Class Manager. Click on that to open the CSS Class Manager preferences modal.

How to use the PHP filter?

Use css_class_manager_filtered_class_names filter to add class names from a PHP file. Example:
php
<?php
function plugin_prefix_add_css_classes( $class_names ) {
$additional_css_names = [
[
'name' => 'flex',
],
[
'name' => 'hidden',
'description' => 'Hide element',
],
];
return array_merge( $class_names, $additional_css_names );
}
add_filter( 'css_class_manager_filtered_class_names', 'plugin_prefix_add_css_classes' );

Recensioner

11 december 2024
This plugin is a hidden gem in my opinion. The PHP filter is the key feature. I have a set of utility classes I use, so I loaded those into the filter so they are part of my default child theme.
11 december 2024
Thank you for coding this solution, and sharing it!It should be build into core cause it delivers better maintainable sites.
4 december 2024
Some Gutenberg builders already have a Class manager, lots of them don’t. Or they do have one, but it’s so over-complicated or has an awful UI, that you are not using it. Now there is this lovely plugin that I discovered a few days ago. Just enter the class name (without the .dot), give it a nice name, and save. All saved names are in a dropdown; click and apply. I REALLY LOVE IT! Going to use it on all my Kadence websites. One wish: I would like to have some influence on the location; I would prefer an option to place it at the bottom of the General tab, and not hidden in a tab; fewer clicks.
3 september 2024
very underrated plugin, really handy, especially being able to add a description to classes is great!
Läs alla 4 betyg

Bidragsgivare och utvecklare

”CSS Class Manager – An advanced autocomplete additional css class control for your blocks” är programvara med öppen källkod. Följande personer har bidragit till detta tillägg.

Bidragande personer

Ändringslogg

1.1.0 – November 16, 2024

  • Allow colon in class names.
  • Fix preference modal tab background color.
  • Bump the minimum WordPress version requirement to 6.6 from 6.5.
  • Import PluginMoreMenuItem from wp-editor package.
  • Update scss file and use the @use instead of @import.
  • Upgrade the npm packages to the latest.

1.0.0 – May 25, 2024

  • Initial release.