Optimizations: Generate CSS Files, disable deprecated code, other speed stuff

[bfintal]

This Pull Request does the following optimizations

• [x] Global design system is now a generated CSS file
• [x] Remove need to use hook typography_detect_native_blocks if not using global typography
• [x] Do not register Design library as patterns anymore since these produce overhead
• [x] You can define STACKABLE_DISABLE_DEPRECATED_CODE to disable all backward compatibility code in-lieu for speed
• [x] Added did_action to load_frontend_scripts_conditionally to lessen action calls
• [x] Moved filter safecss_filter_attr_allow_css only during style generation CC @mxkae
• [x] Moved stackable_block_style_inheritance_inline_styles_nodep generation of block style inheritance only when needed
• [x] Added CSS file generation for block theme style inheritance
• [x] Add setting for stackable_use_css_files defaults to checked (yes)
• [x] Add button to invalidate generated CSS files

Remaining work to be done

• [ ] ~Change load_frontend_scripts_conditionally, remove old checker, and instead of hooking to render_block, hook to all render_block_{name} and then remove hook when completed each.~ this was slow!
• [ ] ~See if wp_get_global_styles can be used instead of WP_Theme_JSON_Resolver as recommended by WP docs CC @mxkae~

Summary by CodeRabbit

• New Features

  • Added an option to generate and cache CSS files for improved performance, with automatic inline fallback.
  • Introduced an admin toggle to enable/disable CSS file generation and a button to invalidate cached CSS.

• Performance

  • Optimized frontend and editor asset loading, including footer-loaded scripts and smarter style enqueueing.
  • Improved global typography handling and block style inheritance ordering.

• Bug Fixes

  • More reliable behavior when custom breakpoints are not set.
  • Prevents deprecated components from loading when explicitly disabled.

[github-actions[bot]]

🤖 Pull request artifacts

file	commit
pr3570-stackable-3570-merge.zip	75af32450e953f05883bda2bcf143422c5200067

[github-actions[bot]]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3570-stackable-3570-merge.zip"}}]}

[coderabbitai[bot]]

Walkthrough

Adds a pluggable CSS file generation/caching system, integrates it into initialization and asset loading, introduces settings and REST route to toggle/invalidate CSS files, adjusts typography and breakpoint option handling, scopes a filter to execution time, and updates the admin UI to manage CSS files and trigger invalidation.

Changes

Cohort / File(s)	Summary of edits
Bootstrap & deprecated guard plugin.php	Includes src/css-file-generator.php during init; wraps deprecated includes with STACKABLE_DISABLE_DEPRECATED_CODE guard.
CSS generation system & REST src/css-file-generator.php	Adds base and concrete CSS generator classes, file/inline enqueueing, cache invalidation, settings registration, and REST route POST /stackable/v3/invalidate-css-files.
Init integration & loading flow src/init.php	Replaces script tracking with did_action guards; centralizes global and block-inheritance CSS loading via generators with inline fallback; adds enqueue_inline_block_style_inheritance; updates editor/frontend asset registration.
Global typography checks src/global-settings.php	Adds has_global_typography(); gates typography initialization and parsing; optimizes native-block typography filter registration.
Dynamic breakpoints retrieval src/dynamic-breakpoints.php	Uses get_option('stackable_dynamic_breakpoints', false) to ensure explicit false default; downstream logic unchanged.
Scoped filter for theme CSS src/plugins/theme-block-style-inheritance/index.php	Moves safecss_filter_attr_allow_css registration from constructor to CSS-generation path within add_block_style_inheritance.
Admin UI: CSS files setting & invalidate src/welcome/admin.js	Adds toggle for stackable_use_css_files; introduces “Invalidate CSS Files” button calling /stackable/v3/invalidate-css-files; shows spinner during request.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant WP as WordPress
  participant Init as Stackable_Init
  participant GenG as Global_CSS_Generator
  participant GenB as Block_Inheritance_Generator

  Note over WP,Init: Frontend load
  WP->>Init: enqueue_scripts
  alt Use CSS files enabled AND not admin
    Init->>GenG: enqueue_global_css_file()
    GenG->>GenG: get_cached_css_file_name()
    alt File exists
      GenG-->>WP: wp_enqueue_style(file)
    else Missing/empty
      GenG->>GenG: generate_css_content() and write file
      alt Write success
        GenG-->>WP: wp_enqueue_style(new file)
      else Write fail
        GenG-->>WP: wp_add_inline_style()
      end
    end
    Init->>GenB: enqueue_block_inheritance_css_file()
    GenB->>GenB: similar existence/generate/inline flow
  else Inline fallback
    Init->>GenG: enqueue_global_css_inline()
    Init->>GenB: enqueue_block_inheritance_css_inline()
  end

sequenceDiagram
  autonumber
  actor Admin
  participant UI as Admin UI (welcome/admin.js)
  participant REST as /stackable/v3/invalidate-css-files
  participant Svc as Stackable_CSS_File_Generator
  participant GenG as Global_CSS_Generator
  participant GenB as Block_Inheritance_Generator

  Admin->>UI: Click "Invalidate CSS Files"
  UI->>REST: POST invalidate-css-files
  REST->>Svc: invalidate_all_css_files()
  Svc->>GenG: invalidate_css_file()
  Svc->>GenB: invalidate_css_file()
  Svc-->>REST: { success: true }
  REST-->>UI: 200 OK
  UI-->>Admin: Spinner stops

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

Thump-thump, I weave my CSS threads, Hash-named burrows for cached beds. Flip a toggle, files take flight, Inline moonlight if they bite. A hop to purge, a swift refresh— My fields load fast, all clean and fresh. 🐇✨

[!TIP]

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch feat/generate-css-file

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[malalacharm]

Block errors in editor: