Non classé

With the new Custom CSS on a block and post/page level, I was wondering if I would know where to look if something needs to be changed that was modified by a Custom CSS setting. Turns out there are 14 different ways to skin WordPress. I am a fan of keeping one source of truth, but it might not always be possible to keep it in theme.json. So I also wanted to figure out what decisions making process goes into selecting a method in the first place. Below is a comprehensive reference for users, site builders, designers and developers covering all methods from no-code to full theme development. These methods only apply to Block themes, though. Classic theme methods (like the Customizer’s Additional CSS panel etc.) are excluded. Table of contents The specificity cascade 1. theme.json — structured style properties 2. theme.json — The css Property 3. Custom CSS Properties (Variables) via theme.json Settings 4. Child Theme’s theme.json 5. Global Styles UI 6. Additional CSS 7. Per-Block Additional CSS 8. Additional CSS Class(es) on individual block instances 9. Global Style Variations (Theme-Level Style Presets) 10. Block Style Variations (JSON, PHP, and JavaScript) 11. Section Styles 12. Block Stylesheets via wp_enqueue_block_style() 13. Enqueuing Stylesheets via wp_enqueue_style() in PHP 14. The Theme’s style.css Summary Table Decision Guide The specificity cascade Before diving in, it helps to understand WordPress’s style hierarchy for block themes. Styles resolve in this order, with later layers overriding earlier ones on four levels. Default mostly the styling and layouts of WordPress Core. Block-level styling can be altered with plugins and overwrites the Default styling. Theme-level styling is the whole suite of design tools controlled by the active Theme. It overwrites Default and block-level styles and layouts for instance (e.g. template and template parts). User-level styling uses the Design tools within the Site Editor to modify styles and layouts. These changes are stored in the database and overwrite the theme-level styling. Within each layer, more specific targets (per block, per element) override more general ones. This cascade is central to how all the methods below interact. 1. theme.json — structured style properties Who: Theme developers, child theme authorsWhere: theme.json (root of your theme) → styles section This is the recommended first choice for styling in block themes. Rather than writing raw CSS, you define styles as structured JSON properties — colors, typography, spacing, borders, shadows, and more — at the global, element, or per-block level. You can use hardcoded values directly in styles, and they work just fine: JSON { « version »: 3, « styles »: { « color »: { « background »: « #ffffff », « text »: « #333333 » }, « elements »: { « link »: { « color »: { « text »: « #0073aa » } } }, « blocks »: { « core/button »: { « color »: { « background »: « #0073aa » } } } } } { « version »: 3, « styles »: { « color »: { « background »: « #ffffff », « text »: « #333333 » }, « elements »: { « link »: { « color »: { « text »: « #0073aa » } } }, « blocks »: { « core/button »: { « color »: { « background »: « #0073aa » } } } } } As your theme grows, hardcoded values become harder to manage. If you decide to change your primary color, you’d need to find and update every instance of #0073aa across styles. A more maintainable approach is to define your values as presets in the settings part of theme.json and then reference them in styles using the var:preset|| syntax. WordPress converts these presets into CSS custom properties (e.g., –wp–preset–color–primary), keeping everything connected: JSON { « version »: 3, « settings »: { « color »: { « palette »: [ { « slug »: « primary », « color »: « #0073aa », « name »: « Primary » }, { « slug »: « base », « color »: « #ffffff », « name »: « Base » }, { « slug »: « contrast », « color »: « #333333 », « name »: « Contrast » } ] }, « typography »: { « fontSizes »: [ { « slug »: « medium », « size »: « 18px », « name »: « Medium » } ] } }, « styles »: { « color »: { « background »: « var:preset|color|base », « text »: « var:preset|color|contrast » }, « typography »: { « fontSize »: « var:preset|font-size|medium », « lineHeight »: « 1.6 » }, « elements »: { « link »: { « color »: { « text »: « var:preset|color|primary » } }, « heading »: { « typography »: { « fontWeight »: « 700 » } } }, « blocks »: { « core/button »: { « border »: { « radius »: « 4px » }, « color »: { « background »: « var:preset|color|primary » } }, « core/quote »: { « typography »: { « fontStyle »: « italic » } } } } } { « version »: 3, « settings »: { « color »: { « palette »: [ { « slug »: « primary », « color »: « #0073aa », « name »: « Primary » }, { « slug »: « base », « color »: « #ffffff », « name »: « Base » }, { « slug »: « contrast », « color »: « #333333 », « name »: « Contrast » } ] }, « typography »: { « fontSizes »: [ { « slug »: « medium », « size »: « 18px », « name »: « Medium » } ] } }, « styles »: { « color »: { « background »: « var:preset|color|base », « text »: « var:preset|color|contrast » }, « typography »: { « fontSize »: « var:preset|font-size|medium », « lineHeight »: « 1.6 » }, « elements »: { « link »: { « color »: { « text »: « var:preset|color|primary » } }, « heading »: { « typography »: { « fontWeight »: « 700 » } } }, « blocks »: { « core/button »: { « border »: { « radius »: « 4px » }, « color »: { « background »: « var:preset|color|primary » } }, « core/quote »: { « typography »: { « fontStyle »: « italic » } } } } } This token-based approach pays off in a few ways. When a user changes “Primary” in the Global Styles UI, every element referencing that token updates automatically. It keeps your theme internally consistent — no risk of one button being #0073aa while another drifted to #0074ab. And it makes global style variations far simpler to create: a dark mode variation only needs to redefine the palette, not hunt down every color reference in styles. Either approach is valid, but tokens tend to save time as a theme matures. Advantages: Automatic integration with the Global Styles UI: Users can view and override your styles in the Site Editor without writing CSS. WordPress manages specificity for you: the “base → theme → user” cascade works correctly. Generates CSS custom properties automatically (e.g. –wp–preset–color–primary). Visual parity between editor and front end. Machine-readable: other tools and plugins can consume and extend these styles. Reduces the amount of CSS enqueued overall. Limitations: Can only express what theme.json’s schema supports (growing with each release, but not yet comprehensive). Pseudo-classes like :hover, :focus, :active, and :visited are supported for elements such as links and buttons (e.g., « elements »: { « link »: { « :hover »: { « color »: { « text »: « var:preset|color|contrast » } } } }), but pseudo-elements like ::before and ::after, media queries, and more complex selectors

Welcome to another exciting edition of the WPBeginner Spotlight! February 2026 has been an incredible month for the WordPress community. WordPress 7.0 Beta is available for testing, with the first major admin redesign in years, along with built-in AI infrastructure and long-awaited collaboration features. There are also AI-driven optimization tools to help site owners improve rankings without any technical knowledge. We are thrilled to bring you this roundup of the most impactful stories shaping the future of the web! ℹ️ WPBeginner Spotlight brings you a monthly roundup of the most important WordPress news, updates, and community happenings. 📅✨ Got something to share? Whether it’s a new product launch, a significant update, or an exciting event, reach out to us through our contact form, and your news could be featured in the next edition! 💬 WPForms Debuts New Interactive Map Field for Smarter Geolocation WPForms, the popular WordPress AI form builder plugin, has expanded its Geolocation addon by introducing a brand-new Map field. Instead of relying on basic address fields, visitors can now search for and pin an exact location without leaving the page. This makes it easier to collect accurate delivery details, event addresses, and service locations in a more visual, user-friendly way. The update changes how location data is presented by moving beyond simple address fields to a visual, branded experience. Users no longer need to leave a website to search for addresses in a separate tab, which helps keep them focused on completing their order or inquiry within the form itself. Here are all of the features that come with the Map field: Interactive Map Display: Allows you to embed a fully interactive map with multiple locations pinned directly inside your WordPress forms. Customizable Markers: You can choose from over 2,000 icons, use a full color picker for branding, or even upload your own custom image as a map pin. Marker Sizing: Pins can be set to a large size to ensure they stand out clearly against other points of interest on the map. Branded Info Boxes: Each pin can include a custom name and description, providing visitors with essential details when they click on a specific location. Visual Location Selection: When enabled, visitors can click a pin to select that location as their choice, which then automatically populates the form entry data. Clean Data Capture: The selected location’s name, address, and coordinates are captured precisely and can be exported to Google Sheets or included in notification emails. This update is especially valuable for retail stores, bakeries, or service providers with multiple branches that require customers to choose a specific location. Test Drive the Future: WordPress 7.0 Beta 1 Now Available for Testing WordPress 7.0 Beta 1 is officially available for testing, signaling one of the most transformative updates to the platform in recent years. Scheduled for a final release on April 9, 2026, this version will introduce several high impact features. For instance, the WordPress admin dashboard is receiving its first major visual refresh in years, moving closer to the feel of a modern web app. Beyond the updated typography and fresh color scheme, the backend will use smooth view transitions that eliminate the feeling of a “hard reload” when clicking through settings. Another important addition is the Web Client AI API, which will serve as a central hub for generative AI models directly within the WordPress backend. In the future, this foundation will allow site owners to generate content, summarize articles, and automate repetitive administrative tasks without ever having to leave the block editor. Another of the most anticipated features currently in development is real-time collaboration, which aims to bring a Google Docs-style editing experience to WordPress. Using a new sync engine, this feature will allow multiple users to edit the same post or page simultaneously without locking each other out. For more information, see our deep dive into what’s coming in WordPress 7.0 with screenshots and details. AIOSEO Launches Post-Wizard SEO Checklist and New AI Suite 🚀 All in One SEO (AIOSEO) has released version 4.9.4, which introduces a powerful new SEO Checklist feature and the new AI Suite. The SEO Checklist feature is a new tool designed to guide users through the final steps of optimization after they finish the initial setup wizard. It acts as a safety net, ensuring that no critical ranking factors are missed during the site launch process. It also provides actionable tips for improving on-page SEO, social media integration, and local search visibility. In addition to the checklist, AIOSEO has introduced a dedicated “home” for its growing suite of AI-powered tools. This centralized hub makes it easier for users to find and use features like the AI Brand Tracker, AI Keyword Tracking, and AI Content settings. Overall, AIOSEO is building their AI capabilities by offering users SEO features for current AI Search and LLM SEO best practices. They have also recently included full LLMs.txt support, including a feature to generate full articles in markdown format. This allows AI tools like ChatGPT, Gemini, and Claude to easily crawl your content and cite in their AI responses. WPConsent Eliminates GTM Blind Spots With Automatic Script Scanning WPConsent, the popular WordPress privacy compliance plugin, has introduced a significant enhancement to its website scanner. It can now look inside Google Tag Manager (GTM) containers. Google Tag Manager is used to load scripts that may contain cookies or collect data. Website owners need to ensure that they have user consent before they can set those cookies. While previous versions of the plugin could detect the presence of GTM, they often hit a “wall” when trying to identify the specific tracking scripts and services loaded through it. Now, the WPConsent scanner automatically analyzes GTM containers to uncover the scripts living inside them. By eliminating the “blind spots” typically associated with tag managers, site owners can maintain much stricter compliance with global privacy laws like GDPR and CCPA without needing deep technical knowledge. MonsterInsights Brings Google Ads Management to the WordPress Dashboard 📈 MonsterInsights, the

WordPress 7.0 beta 1 is now available for testing. We have been spending time trying it out, and we believe this is one of the most meaningful updates in recent years. The official release is scheduled for April 9, 2026 and will bring features that will genuinely change how we create and manage content. These include an easier way to integrate AI features into WordPress, an improved dashboard, and potentially real-time collaboration in the editor. Read on to learn what’s coming in WordPress 7.0 and what that means for your website. TL;DR: What’s coming in WordPress 7.0 Real-time collaboration that allows multiple users to work on the same post or page without losing any data. AI Web Client API that allows users to save their AI credentials and provides plugin and theme developers a standardized way to integrate AI features in WordPress. Admin design refresh offers smoother transitions between admin area screens with modern typography and new color profile. New Icon and Breadcrumbs blocks will be added. Several blocks will get new features and enhancements. ℹ️ Note: This beta release is for testing and development only. So, please do not install, run, or test this version of WordPress on your live website. Instead, we recommend using a staging site or a local site. You can test WordPress 7.0 Beta by installing and activating the WordPress Beta Tester plugin. Admin Visual Refresh & View Transitions Web Client AI API in WordPress Real Time Collaboration (In Development) Visual Revisions For Pages Cover Block Video Embeds Navigation Block Overlays & Improvements New Breadcrumbs and Icons Blocks Per-Block Instance Custom CSS Pattern Editing Modes Responsive Grid Block Heading Block Variations Font Library Enabled for All Themes Client-Side Media Processing Under the Hood (Developer & Performance Updates) Conclusion Admin Visual Refresh & View Transitions The WordPress backend is getting a much-needed facelift. WordPress 7.0 will deliver a visual update to the dashboard with a fresh default color scheme, updated typography, and a cleaner, modern interface. However, it is not just about looks. In our testing, we found that the transitions from dashboard to editor and document view feels smoother. As you click through different settings pages, the dashboard no longer feels like it is doing a hard reload. Instead, elements smoothly transition and slide into place. Navigating the WordPress backend now feels faster and more like a modern web app. The cleaner layout reduces eye strain, and the fluid animations make managing your website a smoother experience. Related: See how WordPress admin area evolved over the years. Web Client AI API in WordPress AI is changing how we build websites. As part of on-going AI infrastructure work, WordPress 7.0 will ship with a new Web Client AI API. The new API acts as a central hub for generative AI models inside your site’s backend. Instead of multiple plugins fighting for control or cluttering the interface, the Web Client AI API works with the new Abilities API to keep things organized. For beginners, this matters quite a bit. It opens the door to AI features right inside the block editor. For instance, you will be able to safely store credentials for your favorite AI model securely inside WordPress. Your WordPress plugins and themes can then use your preferred model to provide different features. In the near future, you will be able to generate content, summarize articles, or handle repetitive admin tasks without leaving your dashboard. However, we want to be clear that this is the foundation, not the finished product. The real value will come as plugin developers build on top of it. Pro Tip: If you want to start using AI on your WordPress site right now, check out our small business owners’ guide to artificial intelligence to get a head start before 7.0 officially drops. Real Time Collaboration (In Development) Note: The real time collaboration feature is not included in the beta-1 release that we tested. However, it is under active development and it is not yet confirmed whether or not it will make it into the final 7.0 release. Real-time collaboration in WordPress editing started with WordPress 6.9, which introduced inline commenting known as Notes. WordPress 7.0 will continue building up on that. If you have ever been locked out of a WordPress post because someone else was editing it, then you will appreciate this feature. WordPress 7.0 comes with a sync-engine allowing real-time collaboration. This enables multiple users to edit a post or page at the same time. Similarly, users adding inline comments or notes will also be visible to other users working on the same content in real-time. It will be very similar to working in Google Docs. The system handles data syncing smoothly and even supports offline editing. This is a big deal for content teams. For example, a writer can draft a paragraph while an editor fixes typos in the section above. And a designer can tweak the layout of an image block below. Everyone works on the same page without locking each other out. Visual Revisions For Pages The WordPress revisions system has always been useful for undoing mistakes. However, comparing changes meant looking at raw text or HTML code, which is not ideal. WordPress 7.0 will change this by introducing new visual revisions for Pages. In our testing, we were happy to see that you can now view exactly how the layout, images, and content changed — all within the visual editor. The interface shows a side-by-side or highlighted comparison of past edits, rendering the blocks as they would appear on the front end. For beginners, this makes a real difference. If someone accidentally deleted a pricing table or messed up a gallery layout, then you can see the visual change right away. You can then restore the correct version with a single click. However, we would like to see visual revisions for posts as well. Hopefully, it will be implemented for other post types in future. Cover Block Video Embeds The Cover block is one of the most popular tools for