To override Gutenberg’s styles you need to add your own stylesheet. So hook into enqueue_block_editor_assets
and then add your own stylesheet in which you target the selectors you wanna override. In the following example I placed a stylesheet in a custom theme’s assets/
folder.
functions.php
:
// Add backend styles for Gutenberg.
add_action('enqueue_block_editor_assets', 'gutenberg_editor_assets');
function gutenberg_editor_assets() {
// Load the theme styles within Gutenberg.
wp_enqueue_style('my-gutenberg-editor-styles', get_theme_file_uri('/assets/gutenberg-editor-styles.css'), FALSE);
}
assets/gutenberg-editor-styles.css
:
.editor-post-title__input {
border: 1px solid black;
}
Related Posts:
- Are there Gutenberg container blocks?
- show classes as dropdown in guttenberg`s additional css classes input box
- Style new block-editor alignfull class without scrollbars or overflow
- What CSS rules are introduced to core blocks through wp-block-styles?
- Gutenberg Block Editor Match Admin Styles & Frontend Styles
- If I dequeue Gutenberg Stylesheet will that have any effect on WordPress 5.0.1?
- is it possible to use post-type as part of a css selector in block editor stylesheet?
- Remove WordPress/Gutenberg button styles for ACF blocks
- Gutenberg Additional CSS Class without modifying theme?
- Different css rules for TinyMCE and Gutenberg while using add_editor_style()
- Can you edit WP gutenberg block css without a plugin?
- How to stop Gutenberg from outputting inline CSS for specific blocks?
- Enqueue styles in new site editor in WordPress 5.9
- create bootstrap columns inside editor group block
- Add Custom Alignment Option to WordPress Blocks/Gutenberg
- Simple way to add custom class and ids to individual Gutenberg blocks
- The Global Styles missing
- ACF Gut block broke wordpress default style?
- Scroll code block instead of wrapping text
- Default paragraph block styles just for pages NOT for posts?
- Custom CSS in Widget editor (Gutenberg) gets stripped out
- Custom Gutenberg color classes naming convention
- Adding a new block editor color option to a theme
- Stop custom Gutenberg styles taking over other admin bits?
- Why can’t blocks be hidden with jQuery?
- Gutenberg CSS Issue
- Trying to make an image a circle in Gutenberg
- What is the cleanest way to shrink Gutenberg Blocks to container width?
- Gutenberg Editor: display error with a combination of transform and background-attachment:fixed
- Default Gutenberg CSS on frontend
- Customizing the CSS for the post/page editor?
- Use of CSS classes in editor-blocks.css file
- Images at the same vertical position in multiple columns
- How do I make my block-editor styles match my front-end styles?
- Dequeue classic-themes.min.css
- How can I add a section with a different background color?
- Narrow paragraph block aligned to left of “wrapper”
- adding additional css classes have no effect within block editor
- How do I change search input padding for blockbase child theme?
- Insert a group block inside a list item
- Full Site Editing Non-editble global styles?
- Block content rendered with inline CSS. How do I reuse it in a headless setup?
- How to add arbitrary custom CSS to a WordPress Block Theme using Site Editor?
- How to remove class=”wp-block-heading” from Heading tags?
- Gutenberg: where to find style settings
- Custom block style not working in the editor
- Customize margin between paragraphs using the Gutenberg Style editor
- What’s the difference between display:inline-flex and display:flex?
- How can I invert color using CSS?
- CSS: Creating textured backgrounds
- Better way to set distance between flexbox items
- How to override !important?
- Changing the width of Bootstrap popover
- Responsive background image in bootstrap container
- How to make circular background using css?
- What is the proper way to display a logo with CSS?
- Align elements side by side
- margin-bottom not working
- Modernizr and WordPress – How can I add a CSS class to the html element?
- WordPress Displaying Thumbnails Vertically
- CSS ?ver=4.6.1 not updating
- Changing Font-Size based on specific Font thru javascript
- How to get child style.css to load last rather than second behind parent style.css?
- Relative file paths in CSS when linking directly (not enqueuing)
- Remove Genericons Helper CSS from twentyfourteen theme
- How to create fa-bars animated menu
- Only column gallery on mobile device
- Changing CSS FilePath for All Pages
- CSS Minification
- wp_add_inline_style breaking style and not working
- show count is out of the anchor tag in wp_list_categories
- How to add a custom CSS class to ALL links
- Why won’t my custom login page CSS load?
- How to apply CSS based on publishing date
- Menu toggle bar works only on some pages in WordPress
- Video header on mobile, disappears behind header and content
- Free theme and css/bootstrap.css is not overridden in the child theme
- How to style text in WordPress
- Equal height sections in custom Headway Theme
- Links on the page, when being printed, have the URL next to them
- How do I minify ‘@import’ css files with wp-minify?
- Selector for page to set up scrolling plugin
- Button doesn’t work in the profile panel
- My css don’t get applied on the costume widget
- Is there a way to cache mailchimp css on wordpress?
- How to get different html tags from the content using regex?
- use css for resize image into mobile thumbnail
- How to set up workspaces with Chrome & WordPress?
- How to Position Read More link after post excerpt?
- Controling css order
- Why are my parent styles loading after my child styles?
- how to arrange the bullet list items in vertical [closed]
- Overriding WooCommerce CSS? [closed]
- Center-Align Images on Mobile Only
- Bootstrap navbar-fixed-top issues [closed]
- How do I add custom CSS animations for specific Gutenberg blocks?
- Transparent Overlay for Gravity Forms Ajax Spinner
- Remove the main title, but only from the main page
- aos properties ‘invalid’ and not recognised when included as a css class [closed]
- ACF Extended : Disable styles in front [closed]