/handbook/developing-for-block-editor-and-site-editor/when-to-choose-core-blocks/
What We Do
Digital Platform MigrationsKey SolutionsManaged ServicesStaffing SolutionsIndustriesProducts
OnePress
Unify multiple brands on one governed WordPress platform.
Design & UI/UX
Gutenberg-native UX, UI, and design systems for visitors and editors.
WordPress Modernization
Modernize WordPress for better performance, architecture, and AI readiness.
WordPress as a DXP
WordPress as a composable DXP when monolithic systems no longer cut it.
Headless WordPress
Omnichannel content delivery without sacrificing marketing autonomy.
Frappe/ERPNext
Build scalable ERP and custom applications, from implementation to ongoing support.
Discovery
Strategic consultancy & project roadmap
Growth Services
On demand development & consultation
Site Maintenance
Annual maintenance. Done for you
QE Services
Testing across SDLC for assured quality
Hosting Migration
Move to a performant hosting with zero downtime
WooCommerce
Enterprise commerce delivered without lock-in
AI
Unlock real use cases and integrations
All Services
A suite of services for any need
Technology STACK
eCommerce
Scale your e-commerce with WooCommerce, integrations, and custom extensions for growth.
EasyEngine
Server management tool that makes using WordPress on Nginx easy.
Web Auditor
Performance Audit & Insights for your Website.
rtMedia
A complete media management plugin for WordPress.
Resources
About Us
CLEAR
Resources Developing for Block Editor and Site Editor Three ways to build blocks When to choose core blocks?
Topics
On this page
Scenarios Where Core Blocks Suffice
Best Ways to Edit Core Block Styles
Using theme.json
Applying Custom CSS Classes
Best Ways to Edit Core Block Logic
Utilizing Block Filters
Extending Core Blocks
Last updated on Mar 31, 2026
When to Choose Core Blocks?
Core blocks are the content types in WordPress, and they are the basic, pre-built components including headings, paragraphs, buttons, and images. They are designed to support the most widely used content elements without coding or using any plugins.
Some of the principal abilities, which core blocks offer, include:
- Provides for the basic layout of text, images, galleries, and embeds
- The core blocks of the WordPress platform have been built to be fast and responsive, thus ensuring that your site remains responsive.
- You can customize a block even further by applying your custom CSS, through the block settings, or using filters.
Core blocks are suitable for almost all standard website constructions where only minor changes are needed. You can easily build pages or posts with readymade blocks, for example, paragraphs, images, galleries, and buttons.
Scenarios Where Core Blocks Suffice
There are many situations where the core blocks will be enough. Here are when you can use core blocks:
Simple Content Sites or Blogs: If your site content contains text, images, and simple formatting, you can settle for core blocks. You’ll get rich layouts for content without extra work in development.
Landing Pages: A simple landing page that will use only a few basic elements, like headers and buttons with images, can still use core blocks. Since they contain everything you need for a clean, functional design, you’ll be set.
Little Customization: If the theme and design require little customization both visually and functionally, you can use core blocks to save most of your development time. Most of the needs would easily be catered to by merely making slight style modifications and adopting the default settings for core blocks.
Best Ways to Edit Core Block Styles
Customizing the styles of core blocks in WordPress helps you maintain a consistent design without rebuilding everything from scratch. Here are the best ways to do it:
Using theme.json
The theme.json file is a powerful tool introduced in WordPress 5.8, allowing developers to configure global styles for blocks. It simplifies customization by eliminating the need for manual CSS and lets you set colors, typography, spacing, and more across your site.
Example: Setting Typography for Core Blocks
Here’s how you can set custom font sizes for blocks using theme.json:
{
"version": 2,
"settings": {
"typography": {
"fontSizes": [
{
"name": "Xtra Small",
"slug": "xtra-small",
"size": "10px"
},
{
"name": "Small",
"slug": "Small",
"size": "12px"
}
{
"name": "Normal",
"slug": "normal",
"size": "14px"
},
{
"name": "Medium",
"slug": "medium",
"size": "16px"
}
]
}
}
}
In this example, we define two font sizes—“small” and “large”—that users can select from within the Block Editor. This ensures consistency in typography without needing to write CSS for each block.
It will be shown something like this in the editor:
Typography controls
When to Use theme.json:
- You want to apply consistent styles globally across all blocks.
- You’re working on a theme that requires easy customization for non-developers.
- You need to set defaults like font sizes, color palettes, or spacings that can be applied across multiple blocks.
Applying Custom CSS Classes
For more granular or specific styling needs, adding custom CSS classes to individual blocks is often the best solution. WordPress lets you assign a custom class name to any block, which you can then target with your own CSS styles.
How to Add a Custom Class:
- Select any block in the Block Editor.
- In the block settings on the right panel, scroll down to the “Advanced” section.
- Add your custom class name in the “Additional CSS Class” field.
Example: Styling a Button Block
Let’s say you’ve added the class name custom-button to a Button block. You can now write CSS targeting this specific button:
.custom-button .wp-block-button__link {
background-color: #0073aa;
color: white;
border-radius: 10px;
padding: 10px 20px;
}
This CSS changes the button’s background color, and text color, and adds rounded corners and padding.
When to Use Custom CSS Classes:
- You need block-specific customizations that wouldn’t apply to all blocks of the same type.
- You want to override styles for just one instance of a block (e.g., a special call-to-action button).
- You’re working on projects where design flexibility is needed and you want to experiment with different styles for different pages or sections.
Best Ways to Edit Core Block Logic
When you’re working with core blocks, sometimes you need to tweak the way they behave, either changing the way they are rendered on the front end or adding extra functionality. WordPress offers several ways to modify core block behavior, including using block filters, custom settings, and extending blocks via JavaScript.
Utilizing Block Filters
WordPress allows you to change how blocks are rendered through block filters. Filters are a powerful way to hook into core block logic and modify it without touching the core files. They are particularly useful for adding wrappers, injecting extra HTML, or modifying block attributes.
Here’s a detailed look at some common block filters you can use:
render_block Filter
This is one of the most versatile filters, allowing you to modify the output of any block before it’s rendered on the front end. You can target specific block types (e.g., paragraph, button) or apply a change to all blocks.
Example: Adding a Wrapper Div to a Block
Let’s say you want to wrap every Paragraph block with a <div> for extra styling:
add_filter('render_block', 'add_custom_wrapper', 10, 2);
function add_custom_wrapper($block_content, $block) {
if ($block['blockName'] === 'core/paragraph') {
return '<div class="custom-wrapper">' . $block_content . '</div>';
}
return $block_content;
}
This filter checks if the block being rendered is a Paragraph block (core/paragraph). If so, it wraps it with a custom <div>. This allows you to style or modify the block’s behavior without touching the block’s original structure.
register_block_type_args Filter
If you need to modify how a block is registered or add new attributes to a block, you can use the register_block_type_args filter. This helps add custom controls or new functionality.
Example: Adding Custom Attribute to Button Block
You might want to allow users to add an icon to the button block. Using register_block_type_args, you can add a new attribute:
add_filter('register_block_type_args', 'add_icon_to_button_block', 10, 2);
function add_icon_to_button_block($args, $block_name) {
if ($block_name === 'core/button') {
$args['attributes']['iconClass'] = [
'type' => 'string',
'default' => 'default-icon'
];
}
return $args;
}
This code snippet adds an iconClass attribute to the button block, allowing users to specify an icon class that will be added to the button.
Practical Scenarios for Using Filters
Here are some real-world scenarios where using block filters makes sense:
- Custom Post Layouts: Add wrappers to core blocks (like paragraphs or images) for custom post designs without modifying theme templates.
- Content Injection: Automatically inject custom HTML, like social media icons or disclaimers, within specific blocks.
- Dynamic Block Customization: Modify the rendering of blocks dynamically based on user input or other variables (e.g., displaying different button styles for logged-in users).
Extending Core Blocks
Sometimes, simply modifying the output of a block isn’t enough. You may want to extend a block’s functionality to allow more control in the Block Editor itself. For this, you’ll need to extend the block by adding custom attributes and controls.
Example: Extending the Button Block with a Custom Icon Option
Let’s walk through an example where we extend the Button block to include an option for users to add an icon next to the button text. We’ll use JavaScript to modify the block settings, add new controls, and render the block with the new functionality.
Register Custom Block Script
First, we need to enqueue your custom JavaScript to modify the button block
function enqueue_custom_block_js() {
wp_enqueue_script(
'custom-block-js',
get_template_directory_uri() . '/custom-block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
null,
true
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_js');
Modify the Block’s Edit Function
In our custom-block.js file, we’ll extend the Button block to include an icon class option:
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl } = wp.components;
wp.hooks.addFilter('blocks.registerBlockType', 'custom/button-icon', (settings, name) => {
if (name === 'core/button') {
settings.attributes.iconClass = {
type: 'string',
default: ''
};
}
return settings;
});
wp.hooks.addFilter('editor.BlockEdit', 'custom/button-icon-edit', (BlockEdit) => (props) => {
if (props.name === 'core/button') {
return (
<>
<InspectorControls>
<PanelBody title="Icon Settings">
<TextControl
label="Icon Class"
value={props.attributes.iconClass}
onChange={(value) => props.setAttributes({ iconClass: value })}
/>
</PanelBody>
</InspectorControls>
<BlockEdit {...props} />
</>
);
}
return ;
});
This script adds a text input in the block inspector sidebar, where the user can input an icon class.
Rendering the Block with the Icon
Finally, you modify the block’s front-end rendering to include the icon:
add_filter('render_block_core/button', 'add_icon_to_button', 10, 2);
function add_icon_to_button($block_content, $block) {
if (!empty($block['attrs']['iconClass'])) {
$icon = '<i class="' . esc_attr($block['attrs']['iconClass']) . '"></i>';
return $icon . $block_content;
}
return $block_content;
}
This filter adds the specified icon before the button content, allowing users to add icons without having to code them manually.
When to Extend Core Blocks?
Extending core blocks is a good approach when:
- Custom controls are needed: When the basic settings provided by core blocks don’t meet your client’s needs.
- Reusable features: When you find yourself repeating the same customizations across multiple projects, it’s better to extend the core blocks for consistency and ease.
Three ways to build blocks
PREVIOUS
When to choose custom blocks
NEXT
Credits
Shreya Agarwal
Author
Shreya Agarwal
Author
Shreya Agarwal is a Growth Engineer at rtCamp, she brings active, hands-on WordPress development credentials to everything she writes and reviews. A WordPress Core Contributor with merged pull requ…
Good Work. Good People.
Industry partnerships
Compliance certifications
United States India
© rtCamp Inc. since 2009. All rights reserved.
Terms of Service · Privacy Policy · Trust Center
Company
Solutions
Subscribe to Campfire for fresh insights and stories from people behind rtCamp
Δ
Email(Required)
Submit
United States India
© rtCamp Inc. since 2009. All rights reserved.
Terms of Service · Privacy Policy · Trust Center
Cookie Consent
We value your privacy
We use cookies to give you the best possible experience. By clicking “Accept,” you consent to our use of cookies to improve site functionality, analyze usage, and personalize content and communications. Your privacy matters to us, and we are committed to handling your data responsibly and transparently. Please check our Privacy Policy for more details.
Manage PreferencesDon’t AllowAllow All
Why do we use cookies?
×
By clicking "Accept" or "Decline All" at the bottom, you consent to the use of cookies and other tools as described in our Cookie Policy in accordance with your settings and accept our Terms of Service.
Toggle EssentialEssential
Essential cookies enable basic functions and are necessary for the proper function of the website.
Name
Description
Duration
Geolocation Config
This cookie is used to store the consent settings based on the visitor's location.
30 days
Cookie Preferences
This cookie is used to store the user's cookie consent preferences.
30 days
Toggle CloudFlareCloudFlare
CloudFlare provides web performance and security solutions, enhancing site speed and protecting against threats.
Service URL: developers.cloudflare.com (opens in a new window)
Name
Description
Duration
cf_clearance
Whether a CAPTCHA or Javascript challenge has been solved.
session
Toggle CommentsComments
These cookies are needed for adding comments on this website.
Name
Description
Duration
comment_author
Used to track the user across multiple sessions.
Session
comment_author_email
Used to track the user across multiple sessions.
Session
comment_author_url
Used to track the user across multiple sessions.
Session
Toggle GodamGodam
GoDAM" is primarily a specialized WordPress plugin and media management service designed to enhance video hosting, marketing, and asset management directly within the WordPress dashboard.
Service URL: godam.io (opens in a new window)
Name
Description
Duration
user_image
Temporarily stores the path to the user's avatar or profile picture for quick rendering in the website header.
session
user_id
Stores the numerical ID of the logged-in user to maintain session continuity and basic site operations.
session
full_name
Stores the logged-in user's display name to personalize the site interface without needing database queries.
session
system_user
First-party cookie used to store basic application state identifying the current system user role.
session
sid
A generic session ID cookie used to maintain user state and functionality as the visitor navigates through the site.
session
Toggle Google reCAPTCHAGoogle reCAPTCHA
Google reCAPTCHA helps protect websites from spam and abuse by verifying user interactions through challenges.
Name
Description
Duration
_GRECAPTCHA
Google reCAPTCHA sets a necessary cookie (_GRECAPTCHA) when executed for the purpose of providing its risk analysis.
179 days
Toggle Google Tag ManagerGoogle Tag Manager
Google Tag Manager simplifies the management of marketing tags on your website without code changes.
Name
Description
Duration
cookiePreferences
Registers cookie preferences of a user
2 years
td
Registers statistical data on users' behaviour on the website. Used for internal analytics by the website operator.
session
Toggle StatisticsStatistics
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Toggle Factors AIFactors AI
Factors.ai is a B2B account intelligence and marketing analytics platform that helps Go-To-Market (GTM) teams identify anonymous website visitors, track buyer journeys, and measure the ROI of marketing campaigns.
Service URL: www.factors.ai (opens in a new window)
Name
Description
Duration
_fuid
It is sent to capture session details and track user behavior across your website to provide behavioral data and intent signals.
1 Year
Toggle Google AnalyticsGoogle Analytics
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Service URL: policies.google.com (opens in a new window)
Name
Description
Duration
FPGSID
Stores a session or user identifier to track how visitors interact with a website. This helps Google Analytics measure website performance, user engagement, and usage patterns.
Session
FPLC
Used by Google Analytics to link visitor interactions and sessions across multiple related domains.
20 hours
FPID
A server-side Google Analytics cookie used as an alternative user identifier when third-party cookies are restricted.
2 years
_ga
ID used to identify users
2 years
_ga_
ID used to identify users
2 years
Toggle Jetpack StatsJetpack Stats
Jetpack's built-in visitor analytics. It records page views, referring sites, search terms, and outbound link clicks, and also carries the shared visitor-tracking library used by Jetpack Instant Search and WooCommerce Analytics.
Service URL: automattic.com (opens in a new window)
Name
Description
Duration
tk_aip
Stores a list of anonymous visitor IDs so they can be merged into one identity once a visitor is recognized.
Up to 5 years
tk_tc
Used once per page load to work out which cookie domain the Tracks library should use, then removed as soon as it's read back.
Session (deleted immediately after use)
tk_qs
Queues analytics events for Jetpack's Tracks library so none are lost if the page closes before they can be sent.
30 minutes
tk_ai
Stores a randomly-generated anonymous visitor ID so Jetpack's Tracks analytics library can link tracking events to the same visitor.
Session in wp-admin; up to 5 years on the frontend
Toggle Microsoft ClarityMicrosoft Clarity
Clarity is a web analytics service that tracks and reports website traffic.
Service URL: clarity.microsoft.com (opens in a new window)
Name
Description
Duration
CLID
Identifies the first-time Clarity saw this user on any site using Clarity.
12 months
ANONCHK
Indicates whether MUID is transferred to ANID, a cookie used for advertising. Clarity doesn't use ANID and so this is always set to 0.
Session
_clck
Persists the Clarity User ID and preferences, unique to that site is attributed to the same user ID.
12 months
_clsk
Connects multiple page views by a user into a single Clarity session recording.
12 months
Toggle Parse.lyParse.ly
Parse.ly is a content analytics platform that helps publishers optimize audience engagement and content performance.
Name
Description
Duration
_parsely_session
JSON document storing information identifying a browsing session according to Parsely’s proprietary definition
30 minutes
_parsely_visitor
JSON document uniquely identifying a browser and counting its sessions
13 months
cookies.js_dtest
This cookie determines whether the browser accepts cookies.
session
Toggle MarketingMarketing
Marketing cookies are used to follow visitors to websites. The intention is to show ads that are relevant and engaging to the individual user.
Toggle Bing / MicrosoftBing / Microsoft
Bing, powered by Microsoft, is a search engine providing web, image, video, and map search capabilities.
Name
Description
Duration
MR
Used to collect information for analytics purposes.
6 months
ANONCHK
Used to store session ID for a users session to ensure that clicks from adverts on the Bing search engine are verified for reporting purposes and for personalisation
10 minutes
SM
Used by Microsoft in synchronizing the MUID across multiple Microsoft domains to track users for advertising.
session
MUID
Identifies unique web browsers visiting Microsoft sites. These cookies are used for advertising, site analytics, and other operational purposes.
1 year
Toggle DoubleClick/Google MarketingDoubleClick/Google Marketing
A comprehensive digital advertising platform for managing campaigns, optimizing performance, and analyzing audience data.
Name
Description
Duration
IDE
This cookie is used for targeting, analyzing and optimisation of ad campaigns in DoubleClick/Google Marketing Suite
2 years
ar_debug
Store and track conversions
Persistent
Toggle LinkedInLinkedIn
LinkedIn is a professional networking platform for job seekers, employers, and industry connections.
Name
Description
Duration
bscookie
Used by LinkedIn to track the use of embedded services.
1 year
AnalyticsSyncHistory
Used to store information about the time a sync with the lms_analytics cookie took place for users in the Designated Countries
30 days
bcookie
Used by LinkedIn to track the use of embedded services.
1 year
li_sugr
Used to make a probabilistic match of a user's identity outside the Designated Countries
90 days
lidc
Used by the social networking service, LinkedIn, for tracking the use of embedded services.
1 day
UserMatchHistory
Used by LinkedIn Ads to synchronize and match user IDs across different ad networks and data providers.
30 days
Toggle LinkedIn InsightLinkedIn Insight
LinkedIn Insight is a web analytics service that tracks and reports website traffic.
Service URL: www.linkedin.com (opens in a new window)
Name
Description
Duration
li_sugr
Used to make a probabilistic match of a user's identity.
90 days
lidc
Used for routing and session management.
24 hours
Toggle LiveIntentLiveIntent
LiveIntent provides a platform for email advertising and identity-driven marketing solutions.
Name
Description
Duration
_lc2_fpi_js
Companion cookie to _lc2_fpi used by JavaScript to facilitate cross-domain ad tracking and user identification.
1 year
_lc2_fpi
First-party tracking cookie usually associated with LiveRamp to identify users across devices for targeted advertising.
1 Year
_li_ss
Sets a unique ID for the visitor, that allows third party advertisers to target the visitor with relevant advertisement. This pairing service is provided by third party advertisement hubs, which facilitates real-time bidding for advertisers.
1 month
lidid
Collects data on visitors' behaviour and interaction - This is used to make advertisement on the website more relevant. The cookie also allows the website to detect any referrals from other websites.
2 years
Toggle Cookie PolicyCookie Policy
You can find more information in our Privacy Policy.
Allow AllDecline All
Accept