All Questions
Tagged with css block-editor
76 questions
0
votes
0
answers
79
views
Style priority in theme.json
I have the following theme.json file in a custom classic/hybrid theme:
theme.json file:
"styles": {
"elements": {
"heading": {
"color": {...
- 2,002
0
votes
0
answers
47
views
How do I highlight a Wordpress Menu Item for a page that is not on the Menu?
I am writing a Wordpress site using the block editor (Spectra One theme).
I have a menu item called News. When I click on it the News page appears and the News menu item is highlighted.
The News page ...
2
votes
0
answers
43
views
Block style variations not enqueued for blocks inside HTML code dynamically rendered via JS
The new WP 6.6 will let anyone style any registered block style variations in theme.json via the styles.blocks.blockName.variations property. Check the following post for more info:
https://developer....
- 2,002
0
votes
0
answers
59
views
How to add a class to a core block in both admin editor and frontend?
I'm having huge difficulties with the forced styling bundled in WP (using hybrid themes):
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: ...
- 334
1
vote
1
answer
145
views
Get generated block styles programmatically
If you use wp_head() in the header of your theme Wordpress generated a style tag for the Gutenberg block editor.
Who knows how you can get the generated css style tag with the styles without using ...
- 31
1
vote
1
answer
53
views
Block editor: can’t change format of inline code blocks
I’ve just to moved an old Movable Type 5 blog over to wordpress, and the process was relatively straightforward. But now I am trying to tweak the styles of my site.
(For what it’s worth, this is using ...
- 123
0
votes
0
answers
114
views
How to force Gutenberg to follow all custom CSS styling in preview?
I noticed that the live website version can often be different to preview in Gutenberg. For example, this CSS is added as additional/custom CSS through Styles menu:
.no-link-underline:link {
text-...
- 101
0
votes
0
answers
202
views
Wordpress 6.4.2 - can't load editor style css using 'after_setup_theme' or 'admin_init' actions
My hosting company upgraded my remote Wordpress version of my site to 6.4.2 and as I mentioned in a previous ticket alot of things stopped working. One item that seems to be broken are the custom ...
- 147
0
votes
0
answers
71
views
Disable WP-Elements Class Creation (Gutenberg)
Gutenberg adds a classname and separately renders CSS in the for certain when certain support features are used such as textColor. This adds additional classNames to blocks and renders additional css ...
- 131
1
vote
0
answers
60
views
Load RTL CSS using block.json for block development
I am developing a block using block.json and I could load RTL CSS on backend using this code:
// Check if RTL mode is enabled
if (wp.i18n.isRTL()) {
// Import RTL stylesheet if RTL mode is enabled
...
- 308
1
vote
0
answers
98
views
Gutenberg inline style messing up the navigation when I add a list to a page
This is sort of weird. I have a set of pages and the navigation looks the same on all but one page. After trial/error I was able to narrow it down to having a list on my page. As soon as I add a list ...
- 11
0
votes
1
answer
627
views
Enqueue Stylesheet on the front end and in the block editor Conditionally
How would you include a stylesheet in both the block-editor and on the front-end if the page meets certain criteria?
In this case I want to include a stylesheet called homepage.css if the page is the ...
- 131
0
votes
1
answer
140
views
Turn off/modify specific pre-rendered Gutenberg editor CSS styles
I'm having an issue where Gutenberg is pre-rendering with the theme's style.css, and some of the styles are not fit for the editor. Specifically, I have a class that utilizes transform: translate ...
- 33
1
vote
1
answer
461
views
Embed dynamic media query in a Gutenberg block
I'm working on a custom block that renders a series of DIVs differently depending on the device on which it is displayed. On desktop, the DIVs need to be displayed horizontally with a right margin of ...
- 2,002
0
votes
2
answers
2k
views
How to remove class="wp-block-heading" from Heading tags?
WordPress is injecting class="wp-block-heading" to all the heading tags, like h1, h2, and h3. Even though I don't need it in my style sheet. I tried removing it with the following codes, but ...
- 11
2
votes
2
answers
2k
views
Block content rendered with inline CSS. How do I reuse it in a headless setup?
I'm working on a Headless Wordpress setup. I want my Wordpress posts rendered elsewhere. I want to write these posts using the basic Gutenberg block editor, and show them on a separate non-Wordpress ...
- 402
0
votes
0
answers
125
views
Align images to the left of the content
I am using WordPress 6.2 and the Twenty Twenty-Three theme. I am using a local version of WordPress so I am able to edit the style.css and other files.
How can I make the left-aligned image blocks ...
- 318
0
votes
0
answers
1k
views
Custom block style not working in the editor
I'm using the following code to register a custom block style for the quote block in a child theme:
function child_init() {
register_block_style(
'core/quote',
array(
'...
- 2,002
0
votes
0
answers
114
views
Image and font support missing in editor when deploying theme remotely
So I am starting to learn Wordpress development and today I uploaded my first custom theme from my local environment to the remote hosting server. My theme installed with no issues and I was ready to ...
- 147
0
votes
1
answer
409
views
How to add arbitrary custom CSS to a Wordpress Block Theme using Site Editor?
When using a Block Theme then you can use the Site Editor, accessible via: Wordpress Dashboard > Appearance > Editor. — Introduced in Wordpress 5.9 on 2022-01-25.
Site Editor > Styles (right ...
- 111
1
vote
1
answer
898
views
Customize margin between paragraphs using the Gutenberg Style editor
I'm using the new Styles editor to customize the theme. I would like to change the spacing between the paragraphs of the page and single templates. Is that possible?
- 403
1
vote
0
answers
37
views
Full Site Editing Non-editble global styles?
Working my way through learning FSE, I'm using this this article and wondered what to do for global styles you don't want user control over?
Previous this would be controlled via style.css however, it ...
- 245
1
vote
3
answers
822
views
Insert a group block inside a list item
It seems like the only thing you can put inside a list item is text (including links), inline images, and lists. But I would like to insert a whole group of blocks inside a list item.
I was able to do ...
- 111
6
votes
2
answers
5k
views
Dequeue classic-themes.min.css
since version 6.1, wordpress loads classic-themes.min.css on our websites and crashes all of my buttons styles.
I only want to see my own styles in the frontend, so i'm dequeueing WP Styles like this:
...
- 141
3
votes
1
answer
3k
views
How do I make my block-editor styles match my front-end styles?
The Problem
I'm currently working on a personal blog that pulls its styles from my style.css file. Because It's a blog, I'm also using the block editor to create blog posts, but I want the block ...
- 31
0
votes
1
answer
90
views
Narrow paragraph block aligned to left of "wrapper"
I'm using the full-site-editing feature with
"layout":{
"contentSize":"1264px",
"wideSize":"1264px"
}
set in theme.json. Now when I ...
- 317
0
votes
0
answers
826
views
adding additional css classes have no effect within block editor
I've been inserting CSS through the Customizer -> Additional CSS. Then I will add some classes within the block editor to single blocks, using the Advanced -> additional css classes field
My ...
- 125
1
vote
0
answers
438
views
How to add my theme's style to woocommerce blocks?
I have found plenty of articles on how to remove the styling from the Woocommerce blocks, but I can find nothing about how to actually use your theme's styling to replace the removed styling from the ...
- 11
0
votes
1
answer
890
views
How can I add a section with a different background color?
I've installed Wordpress on my server and I'm attempting to implement the design I've mocked up in Figma. It's a pretty simple design but it employs different colored sections to break up the content ...
- 103
0
votes
1
answer
601
views
How do I add custom CSS animations for specific Gutenberg blocks?
I am not building a theme from scratch and am using a given Wordpress template that allows for full site editing with Gutenberg block editor.
I have been able to add custom CSS (using the Additional ...
2
votes
2
answers
3k
views
Add Custom Alignment Option to Wordpress Blocks/Gutenberg
When you set up blocks in the block editor (Gutenberg), you typically get options on how to align them (i.e. none, wide, full). Or, if your theme doesn't have them, you can use the function ...
- 548
2
votes
1
answer
247
views
Can you edit WP gutenberg block css without a plugin?
I want to add custom css to my gutenberg table block. I want to adjust the css width of the tds. Ive tried selected the "Fixed Width table cells" toggle but the table seems to have different ...
- 21
2
votes
1
answer
2k
views
How to stop Gutenberg from outputting inline CSS for specific blocks?
I like to know how I can remove these individually.
<style id='wp-block-separator-inline-css'>
@charset "UTF-8";.wp-block-separator{border-bottom:1px soli ...
</style>
WP has a ...
- 735
0
votes
1
answer
634
views
Scroll code block instead of wrapping text
I'm including some code in a blog post and the length of some lines causes text to wrap, which I don't want.
I'd like to have the sort of thing which can be found here on stackexchange, where a scroll ...
- 101
1
vote
0
answers
136
views
How to check if a WordPress core block is active in sidebar
I have a widget area and I want to enqueue a stylesheet only if a core block is active in it. I tried the following code:
// if has audio block.
if (has_block('audio')) {
wp_enqueue_style('audio-...
- 11
2
votes
1
answer
2k
views
Enqueue styles in new site editor in WordPress 5.9
In the block editor for posts and pages, I used to use the enqueue_block_editor_assets hook to enqueue styles for the block.
add_action( 'enqueue_block_editor_assets','load_assets_in_block' );
...
0
votes
1
answer
94
views
How to upload and style svg logo?
WP beginner here. I'm trying to upload an svg logo to my site. The logo can be accessed here. If you open it in the browser and inspect it, it should show the svg tags around the object.
I've ...
0
votes
3
answers
369
views
Use of CSS classes in editor-blocks.css file
Checking the editor-blocks.css file found in some themes, I see the following CSS classes added before some of the individual block classes:
.edit-post-visual-editor
.editor-block-list__layout
.editor-...
- 2,002
0
votes
0
answers
77
views
Will WordPress updates remove Gutenberg Additional Classes?
I’m attempting to customize Gutenberg column blocks on my front page.
I’ve added a custom class name to a column block using the blocks Additional CSS class feature.
In my child theme style sheet, I’...
- 1
0
votes
0
answers
107
views
Custom CSS in Widget editor (Gutenberg) gets stripped out
As of WP 5.8.1 (or 5.8.0) the Gutenberg Editor gets to be default even for Widgets.
So I've started to create some Widgets with Gutenberg blocks. My issue is that if I add custom CSS to the blocks (...
- 125
4
votes
1
answer
201
views
@wordpress/create-block image url in css
how to include image URL to css "style.css" in custom block?
Both these not work:
background-image: url("images/imagename.png");
background-image: url("./images/imagename.png&...
- 41
0
votes
0
answers
128
views
Adding a new block editor color option to a theme
I am trying to add new colors to my gutenberg color palette, I would like to add a red color, but when I add the following lines:
array(
'name' => _x( 'Red', 'Name of the red color in the ...
0
votes
0
answers
161
views
Stop custom Gutenberg styles taking over other admin bits?
Is there any classes or way of targeting CSS so custom Gutenberg styles doesn't take over the whole admin?
For example i want p tag to reflect the front of site font-family and a links etc, but then ...
- 245
0
votes
0
answers
14
views
WP - Best way to store theme colors to use in SASS/SCSS, JSX (blocks) and PHP [duplicate]
I want to have a way to change theme colors once and use them in SCSS, JSX and PHP.
Right now I have the theme colors in my variables.scss like:
$theme-colors: (
base: #fff,
primary: #5bb57a,
...
- 167
4
votes
1
answer
748
views
What CSS rules are introduced to core blocks through wp-block-styles?
The Gutenberg Handbook mentions that some CSS for WordPress core blocks are applied to the front-end and within the editor by default (and that they cannot be disabled) but there are more opinionated ...
- 799
0
votes
1
answer
29
views
Why can't blocks be hidden with jQuery?
This seems to be a trivial CSS question and should be asked on SO, but I think there are many subtleties in here that it's better to ask in here.
I add a CSS class to a block and use jQuery to hide ...
- 332
0
votes
1
answer
134
views
Gutenberg CSS Issue
I have the css code below but it does not work on the post page:
( I am talking about font size and color )
/* gutenberg */
blockquote {
text-align: center;
margin: 20px;
font-family: ...
- 98
1
vote
0
answers
30
views
How can I add class to every quote element?
How can I edit defualt class of quote element?
Can I use some kind of hook in the_content to add class to any other element??
- 21
0
votes
1
answer
511
views
Trying to make an image a circle in Gutenberg
Gutenberg allows extra CSS styles for an image.
I want to make the image a circle and I thought this CSS would work:
img.imgcircular {
-webkit-clip-path: circle(15.7% at 50% 50%);
clip-path: circle(...
- 983
3
votes
2
answers
2k
views
Changing Gutenberg / WP block editor width only on pages, not posts or other taxonomies
I have managed to change the width of the WordPress block editor so it uses my max width of my actual theme, making it easier to do layouts during the writing process. Now I wanted to change that to ...
- 171