Activate Automatic.css (ACSS) for all post types with Gutenberg

Anyone who regularly creates websites will sooner or later look for a CSS framework that suits their way of working. In our case, this is Automatic.css (ACSS), which integrates perfectly with the page builders Oxygen and Bricks Builder.

Thanks to the extreme flexibility of both builders, it makes sense to use a hybrid setup of Page Builder and Gutenberg. This allows you to design complex pages in Bricks or Oxygen and implement “simple” blog posts directly in Gutenberg. This way, the content will still be compatible with the latest editor for years to come.

Activate ACSS for all post types and not just pages

After installing automatic.css, it can be used directly in the builder. For some time now, there has also been a Gutenberg integration, which would be perfect for the hybrid setup.

Unfortunately, ACSS is only integrated into the “Pages” post type by default. This is often not enough and you want to integrate the framework into other types such as “Posts”.

Our code snippet provides a remedy

Our code snippet does exactly that. It extends the use of ACSS to all post types that have a user interface and offer REST API support, which is crucial for compatibility with the Gutenberg editor. The code goes through all registered post types and checks if they use the Gutenberg editor. Post types that do not work with Gutenberg are removed from the list. An adjustment is then made with add_filter to make these filtered post types accessible for ACSS. This means that in addition to the standard integration in “Pages”, ACSS is now also available for other post types such as “Posts”.

To integrate this snippet into WordPress, proceed as follows:

1. Open the functions.php file of your active WordPress theme.
2. Insert the code snippet at the end of the file.
3. Save the changes and upload the file to your server if necessary.

This simple extension makes Automatic.css an even more powerful tool in your development process, as it now provides the flexibility to create consistent and responsive designs across different post types. This is especially useful for websites that use a hybrid setup of page builders like Oxygen or Bricks and the Gutenberg editor.

/**
 * Add ACSS Support to more post types.
 */
add_action('init', function () {
    // Retrieve all post types with UI and REST support
    $queried_post_types = get_post_types([
        'show_ui' => true, // Only include post types with a UI
        'show_in_rest' => true, // Ensure REST support for Gutenberg compatibility
    ]);

    foreach ($queried_post_types as $type) {
        // Remove post types not using Gutenberg editor
        if (!use_block_editor_for_post_type($type)) {
            unset($queried_post_types[$type]);
        }
    }

    // Extend allowed post types for ACSS with Gutenberg-enabled post types
    add_filter('acss/gutenberg/allowed_post_types', function ($post_types) use ($queried_post_types) {
        return array_merge($post_types, $queried_post_types);
    }, 10); // Priority 10 to potentially exclude some post types
}, 99); // Hooked at priority 99 to ensure all CPTs are registered