theme.json styles changes not showing in the block editor

Hi
I am not able to reproduce this.
The style from theme.json shows in the editor but not the front.

Rather, on the front, storefront theme overrides the pink background color for the outline variation.

hey @poena

thank you for the reply
i was not able to reproduce this as well, as i wrote in the topic.

i will mention also that in my custom plugin i disabled storefront gutenberg hooks

/**
 * Remove all Storefront gutenberg styles
 * and adding storefront-child styles
 *
 */
add_action(
	'init',
	function () {
		remove_editor_styles();
		add_editor_style( theme_url . '/assets/css/general-stylesheet.css' );
		add_editor_style( theme_url . '/assets/fonts/font.css' );
		add_editor_style( theme_url . '/assets/css/custom.css' );
	} );
add_action(
	'enqueue_block_assets',
	function () {
		wp_dequeue_style( 'storefront-gutenberg-blocks' );
	},
	20
);

but in my test i re-enabled them and there was still an issue.

i remember somewhere reading that its the theme responsibility to take care of the styles both in the block editor as well in the frontend,
maye that is the issue?

remove_editor_styles(); removes all editor styles. Even though this is on init, there is probably a timing problem where the theme.json changes in the editor are also removed.

update

just to proceed with the elimination process i tried this

in a fresh wp install, using woo plugin and storefront theme
and storefront-child child-theme
adding theme.json and change styles, for example: styles.blocks.button.color.text = “red”
and style.blocks.button.variations.outline.color.text = “green”
is working! and i can see the changes in the block editor and the frontend

also, on my local install (where i have the issue) i created a new child-theme for storefront (sfc) add the theme.json with the changes and it didnt worked – the changes was not shown in the block editor but did show in the frontend.

i also deactivated all my plugins and it still, didnt worked.

and just for clerification: success for me is that i change style in theme.json in my child-theme and those changes are shown in the block editor and the frontend

another update

i reproduced the issue

i used wp-duplicator plugin to duplicate the database to the other wp install i had (with storfront installed) and i got the same issue!

so this means that i manage to isolate the issue to my local wp database

from there i tried to edit the customizer option (the classic theme customizer).
i changed the buttons color, and this did have change in the block editor.

so my conclusion for now is that the styles in the editor is affected by the classic theme customizer.

i will investigate further more and update

This is not a bug.
Block themes can use the customizer. Any content in the Customizer CSS option should work the same as in a classic theme.

hey @poena, thanks for the answers

i know the customizer is supposed to work like that, but maybe in my website it causes a problem.

i did managed to isolate the issue to the database,
and i would appreciate information about the enqueuing of global style in the block editor and global styles in general and its relation to the database.

i know that the proccess of global style take user styles in account, which is stored in the database as displayed here:

but, i didnt found any information about classic theme global styles data stored in the database

update

still on this issue ??

i found out that the only place in the browser my theme.json styles appear is in this tag:

<script id="wp-edit-post-js-after">

which is the @wordpress/edit-post package

what i did was added a specific style to theme.json

    "blocks": {
      "core/button": {
        "color": {
          "text": "red"
        },
        "variations": {
          "outline": {
            "color": {
              "text": "#44e125",
              "background": "blue"
            }
          }
        }
      }
    }

and then search “#44e125” in the browser insepctor, and the only place it came up was in the function in “wp-edit-post-js-after”.

it should apear also, in the styles of the outline button, but it is not.

Hello @poena and @yochaiglik,

I have the same problem for few days. I’m interested in more information.

Kind regards,