Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

The safest way to customize one WordPress block without losing the change during a parent-theme update is to work in a child theme and choose the narrowest suitable tool: use theme.json for supported block settings and styles, override a same-named template or pattern file when the markup must change, and enqueue a focused stylesheet when the design needs CSS that theme.json cannot express. Keep editor and front-end selectors aligned so the result looks the same in both places.

First identify whether the parent is a classic theme or a block theme. Classic themes use PHP templates and a conventional stylesheet; block themes use HTML files such as index.html in /templates or /block-templates, with Global Styles commonly defined in theme.json. The distinction determines where your customization belongs.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What a child theme can safely change

A child theme is the update-safe boundary for theme customizations. WordPress lets a child theme override a parent template, template part, or pattern by adding a file with the same name in the corresponding child-theme location. You edit the copy in the child theme rather than the parent file, so a parent-theme update does not overwrite your work.

The rule is different for PHP functions. A child theme’s functions.php is additive: it does not replace the parent’s file. Both files load, so the child file is the right place to add enqueue callbacks, filters, and other behavior, but it is not a drop-in replacement for parent functions.

#1 Best Overall
Sale
Compressed Air Duster,130000RPM Super Power Cordless Air Duster,Rechargeable Brushless Blower,3 Gear Adjustable Blower with LED Light,Dust Remover for Computer/House/Outdoor/Car
  • Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
  • With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
  • Wide Application:Upgraded attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
  • Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
  • Warranty & Support: Our Electric air duster comes with 5 years warranty and 24/7 customer service. During this period, if you have any questions,pls kindly feel free to contact us.
Parent theme type Primary customization surface Typical child-theme change
Classic PHP templates, template parts, stylesheet and hooks Use functions.php and a focused stylesheet; override a PHP template only when markup or placement must change.
Block theme.json and block-template HTML Set block styles in theme.json; copy a same-named file into /templates, /parts, or the pattern location for markup changes.

A block can also be affected by editor-only code, editor content styles, and front-end styles. Those are separate surfaces, so a change that appears in the editor is not automatically a change visitors will see.

Prepare before changing a block

  1. Work on a staging copy or make a full backup. A child theme prevents parent updates from replacing your files, but invalid JSON, PHP errors, or an overly broad selector can still break the site.
  2. Confirm the active parent and child theme. In the administration area, open Appearance and Themes. The child theme must be active; editing files in an inactive theme has no effect.
  3. Classify the parent theme. If the Site Editor and templates made of blocks are available, treat it as a block theme. If the theme relies on PHP files such as single.php and page.php, treat it as classic.
  4. Identify the exact block name. Use the block’s Code editor, List View, or documentation to obtain its namespace and slug, for example core/image, core/paragraph, or core/button. A CSS rule or theme.json key aimed at the wrong slug will be ignored.
  5. Decide which surface you are changing. A typography value, spacing value, color, border, layout setting, or block-style variation usually belongs in theme.json. A different HTML structure belongs in a template or pattern override. Large or specialized CSS belongs in a per-block stylesheet. Editor controls or JavaScript belong in editor-asset hooks.

Use theme.json first for supported block styles

For block themes, and for classic themes that already use Global Styles, theme.json is the preferred first route. It gives WordPress a structured description of settings and styles, scopes block rules to the relevant block, and lets the editor understand the same values used on the front end. The latest documented format is version 3, introduced in WordPress 6.6. If the site targets an older WordPress release, verify that the properties and format you use are supported there.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Target one block under styles.blocks

Place a theme.json file in the child-theme root, then add the block’s full namespace and slug under styles.blocks. This example changes the font size and bottom margin of core Paragraph blocks:

{"version":3,"styles":{"blocks":{"core/paragraph":{"typography":{"fontSize":"var:preset|font-size|large"},"spacing":{"margin":{"bottom":"1.5rem"}}}}}}

The preset reference must exist in the theme’s configured font-size presets. If the desired value is not represented by a preset, use a supported value for the WordPress version and theme. Keep the rule under the block key rather than writing a global p selector; the block-level scope avoids changing unrelated paragraphs.

Style a block variation

When the change is for a named block-style variation, nest the rule below variations. For example, a Button block’s Outline variation has its own key beneath core/button. WordPress documents this variation approach for core styles, with style-variation customization available since WordPress 6.2.

Rank #2
EVEO® Screen Cleaner Spray Kit (Streak-Free) TV Screen Cleaner for Smart TV, Lcd, LEd, Oled | Computer Screen Cleaner Spray and Wipe Microfiber Cloth - TV, Monitor, Laptop, iPad, Car - 6.7oz 1 Pack
  • Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
  • Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
  • Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
  • Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
  • Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth
{"version":3,"styles":{"blocks":{"core/button":{"variations":{"outline":{"border":{"width":"2px"}}}}}}}

Use the variation’s registered slug, not the label shown in the toolbar. A label can be translated or changed by a theme; the slug is the stable identifier used in the configuration.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Know when theme.json is not enough

theme.json can express the properties that WordPress exposes for the targeted block and version. It is not a general-purpose replacement for every CSS selector. If you need a pseudo-element, a complex descendant selector, a media query, animation, or another rule outside the supported style schema, move to a focused stylesheet instead of forcing unsupported keys into the JSON.

Override block-theme markup without editing the parent

When the requirement is structural—moving a block, changing wrapper markup, or altering which blocks appear in a template—copy the parent file into the child theme and edit the copy. A same-named child file takes precedence over the parent file.

Templates and template parts

For a block theme, look in the parent theme’s /templates (or legacy /block-templates) directory for page templates such as index.html, single.html, or page.html. Copy the required file to the matching child directory, preserve its filename, and then change the block markup. Template parts, such as a header or footer, follow the same rule in /parts.

Copy only the file you need. A complete copy is easier to compare with the parent than a partial reconstruction, and it keeps unrelated template updates visible when you review changes after an update.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
BladeHawks RGB Gaming Mouse Pad Extra Large Extended 31.5x12 Inch-Black
  • 【Large size】:Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
  • 【LED backlight mouse pad】:Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
  • 【Anti-slip rubber base】:Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
  • 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
  • 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.

Patterns and registered slugs

Patterns are identified by a registered slug as well as by their file. To override a parent pattern, place the child copy in the appropriate pattern location and retain the parent pattern’s registered slug. Renaming the slug creates a new pattern instead of overriding the existing one, so pages that already use the parent pattern will continue to use the old markup.

Register an additional block template

If the child theme needs a new selectable block template rather than an override, register it through the theme’s customTemplates configuration and create the corresponding HTML file in the child theme’s /templates directory. The registration and filename must agree; a declaration without a matching file cannot render a template.

Add a per-block stylesheet when CSS needs more control

For a rule that is too large or specialized for theme.json, create a small stylesheet under an assets directory and register it with wp_enqueue_block_style(). WordPress recommends block stylesheets as the fallback after checking whether the style can be represented in theme.json.

Example: load CSS for a particular block

Add the registration in the child theme’s functions.php. The child file is additive, so this code runs alongside the parent theme’s functions.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<?php
function itg_enqueue_image_block_style() {
    wp_enqueue_block_style(
        'core/image',
        array(
            'handle' => 'itg-image-block',
            'src'    => get_stylesheet_directory_uri() . '/assets/css/image-block.css',
            'path'   => get_stylesheet_directory() . '/assets/css/image-block.css',
        )
    );
}
add_action( 'init', 'itg_enqueue_image_block_style' );

Create assets/css/image-block.css and scope the declarations to the block class:

Rank #4
Sale
Vaydeer Wrist Rest for Keyboard and Mouse, Computer Ergonomic Wrist Support Pad, Soft Memory Foam Arm Cushion for Desk, Palm Hand Office Laptop Typing
  • 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
  • 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
  • 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
  • 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
  • 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.
.wp-block-image img {
    border-radius: 0.75rem;
    display: block;
}

The path lets WordPress read the file for asset handling where supported; the URL is what the browser loads. Use a unique handle, and change it if you later need WordPress to treat a substantially changed asset as a new file.

Scope custom selectors deliberately

Prefer the block class, such as .wp-block-image or .wp-block-button, or add an intentional custom class to the individual block and target that class. Avoid a broad selector such as img, button, or p in a global stylesheet: it can alter navigation, widgets, forms, and content that is not part of the customization.

If the CSS should apply only to one instance, add a custom class in the block’s Advanced panel and use a selector such as .featured-hero.wp-block-image. This keeps the rest of the site on the theme’s normal styling.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Make the change appear in the editor and on the front end

WordPress has separate loading paths for block content and for the editor interface. Choose the hook according to what the asset changes.

Requirement Appropriate location or hook What it affects
Supported block colors, typography, spacing, borders, layout, or variations theme.json Structured styles understood by Global Styles, the editor, and the front end.
CSS for block content in both contexts wp_enqueue_block_style() or enqueue_block_assets The block’s content in the editor and on rendered pages, depending on the registration and WordPress version.
Editor interface, inspector controls, or editor-only JavaScript enqueue_block_editor_assets with wp_enqueue_script() or wp_enqueue_style() The editing application itself; it is not the general route for front-end block CSS.
Classic-theme stylesheet loading wp_enqueue_style() on wp_enqueue_scripts Front-end styles; check the parent theme’s enqueue handles and dependencies before adding or replacing one.

When the requirement is visual styling of the block’s content, do not stop after loading a stylesheet on enqueue_block_editor_assets. That hook is for the editor UI. Register the content stylesheet through the block-style or shared block-assets path as well, then test a published page, not only the editor canvas.

Best Value
Sale
Under Desk Cable Management Tray No Drill, Metal Mesh Cable Management Under Desk with Clamp Mount, 2 Hole Cable Tray with Wire Management and Cord Organizer for Home Office Standing Desk
  • 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
  • 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
  • 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
  • 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
  • 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Classic themes: customize a block from the child stylesheet or hooks

Classic themes still render block content inside PHP-based templates. You can customize an individual block without replacing a PHP template when a selector is sufficient. Add a focused stylesheet in the child theme and enqueue it on wp_enqueue_scripts, taking the parent stylesheet’s loading order into account.

Child themes load before parent themes in the stylesheet sequence described by WordPress, so inspect how the parent enqueues its stylesheet before adding a new handle or attempting to replace one. A parent may use a specific handle, dependency, version, or conditional load. Reusing the wrong handle can create duplicate files or leave your rule before a more specific parent rule.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If the block needs different markup or placement, copy the relevant PHP template into the child theme with the same relative path and edit that copy. Keep the block’s class names stable unless you are also updating every selector and script that relies on them.

A complete decision workflow

  1. Name the block and the desired result. Write down the block slug and whether you need a style value, a style variation, new CSS behavior, different markup, editor UI, or a new template.
  2. Check the theme type. Use theme.json and block-template files for a block theme; use PHP templates, hooks, and the child stylesheet for a classic theme.
  3. Try the structured setting first. If the property is supported, add a narrowly scoped rule under styles.blocks.<namespace/slug>. For a variation, continue through variations.<variation-slug>.
  4. Override markup only for a structural requirement. Copy the exact parent template, part, or pattern file into the matching child location. Preserve filenames and pattern slugs.
  5. Use a per-block stylesheet for advanced CSS. Register it with wp_enqueue_block_style() on init, or use a shared block-assets path when the same content CSS must be available in both editing and viewing contexts.
  6. Separate editor-only behavior. Add scripts, inspector controls, or editor chrome styles through enqueue_block_editor_assets; do not assume those assets reach visitors.
  7. Test both contexts and several states. Check the editor, a published page, the responsive layout, a block with and without optional content, and any variation you intend to support.

Troubleshoot a block customization that does not work

The theme.json rule is ignored

  • Verify that the file is valid JSON: use double quotes for property names and string values, remove trailing commas, and confirm the root has the expected version and styles structure.
  • Check the block key. core/paragraph and core/Paragraph are different strings; use the registered namespace and slug.
  • Confirm that the targeted WordPress version supports the property. Version 3 of theme.json was introduced in WordPress 6.6, and a property documented for a newer release may be ignored on an older site.
  • Inspect whether the theme or a user-level Global Styles setting is producing a more specific value. Remove the conflicting setting or adjust the intended scope rather than adding an increasingly broad selector.

The template override has no effect

  • Make sure the child theme is active and that the file is in the matching directory, such as child-theme /templates or /parts.
  • Match the parent filename exactly. A file with a similar name is a separate template, not an override.
  • For a pattern, retain the registered slug. A changed slug registers a new pattern and will not replace the parent pattern.
  • Clear page-cache and object-cache layers after changing templates, then reload the Site Editor and the public page.

The CSS works in one place only

  • If it works in the editor but not on the public page, it was probably enqueued through enqueue_block_editor_assets alone. Move block-content CSS to wp_enqueue_block_style() or a shared block-assets route.
  • If it works on the front end but not in the editor, check the editor-content asset path and use selectors that match the editor’s block wrapper. Target the block itself, not editor chrome that changes between WordPress releases.
  • If the rule is present but overridden, inspect specificity and load order. Add a custom class to the block before resorting to an !important declaration.

The change disappears after a parent update

Check whether the edit was made in the parent directory instead of the child directory, or whether the customized file was never copied into the child theme. Keep a short change log of overridden templates and compare those files with the updated parent version after each WordPress or parent-theme update; supported theme.json properties and template structures can evolve.

Maintain and review the customization

Keep each block change small and local. A single theme.json rule is easier to maintain than a site-wide selector, and a per-block stylesheet is easier to audit than a large catch-all CSS file. Use descriptive function names and handles in functions.php, store CSS under an obvious assets path, and document which block and context each rule targets.

After a WordPress or parent-theme update, review three things: whether the block still outputs the same class names, whether the parent template gained important markup that your copied child file now lacks, and whether the theme.json property is still supported. Retest in the editor and on the front end, including logged-out viewing, because an editor-only success is not proof that visitors receive the style.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The practical rule to remember

Use the child theme as the boundary, identify the block by its exact namespace and slug, and select the smallest implementation that satisfies the requirement. Start with theme.json for supported visual settings, use a same-named child template or pattern for structural changes, and enqueue narrowly scoped CSS when the structured schema cannot express the design. Load editor UI assets separately from block-content assets, and verify the result in both editing and published views.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.