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

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 plugin: 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 Additional 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.
• Body and Post Classes: Add custom class names to post body and post containers using body_class and post_class filters directly from the post editor.
• Inline CSS Classes: Add custom class names to any selected text inside paragraph, heading and other blocks that support Rich Text.
• Theme.json Integration: Automatically include global class names generated from theme.json settings in your class suggestions.
• Show the control in its own panel: User specific settings to show the Additional CSS Class(es) control in its own panel.
• Add classes without saving to the database: User specific settings to toggle saving classes to the database.
• Import and Export: Seamlessly transfer custom CSS class names to ensure consistency across projects.

Getting Started

1. 01Activate the plugin within your WordPress setup.
2. 02The advanced control will replace the default “Additional CSS Class(es)” and can be found in the “Advance” block settings section.