Yochai Glik

update:

i had issue with the home page, i thought it was templating problem, but after a deep dig i found out that its only some styles and scripts that made the home page look difference.

using query monitor when i loaded my home page
without the site editor i got:
58 styles, and 38 scripts
with the site editor i got:
70 styles, and 35 scripts

so my perhaps some styles that was making the home page look as it should wasnt loaded or some other styles overide and make it look different.

P. S.
i didnt knew about the option to convert a block theme to a hybrid theme by adding theme/theme.json and theme/templates/index.html and i must say that this information blew my mind because i looked for something like this a lot!
after i learnt it i search for a reference of this in the documentation and didnt find anything about it.

so if someone have link to a reference i would realy appreciate a share, or just talk to me here or on email.

• This reply was modified 7 months, 1 week ago by Yochai Glik.

Hi @mdshak thank you for the reply

the file name is already archive-product.php

its located in storefront-child/woocommerce/archive-product.php

to my understanding woocommerce is filtering the template after wordpress does, in order to allow the templates to be in the woocommerce/ directory.

after adding index.html to storefront-child/templates/ the entire lcating of templates has changed and it can no longer find the correct template.

i did manage to get a partial fix by adding:

add_filter( 'woocommerce_has_block_template', '__return_false',20 );

which make woocommerce think that the site does not have block templates and therefore getting the correct template.

but, i still have issues with the homepage, not displaying the correct template.
for a similar reason, i think.

just to link the issue here

https://github.com/WordPress/gutenberg/issues/59922

Hi @threadi thank you for the reply

I really appreciate the response and I think I will open an issue for this on Gutenberg repo

and yes, I’m a developer so coding this feature is possible, maybe I will do it

• This reply was modified 8 months, 1 week ago by Yochai Glik.

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.

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

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

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

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?

Hey @shameemreza,
thank you for the reply and the help!

my solution was similar but a bit different, i wanted to get the values from theme.json and in that way, every time the theme.json changed. those values will change also.

i tryied using the WP_THEME_JSON class, but it was too complicated.
so i wrote a little script of my own.

add_action( 'enqueue_block_editor_assets', function () {
	$theme_json                                 = wp_json_file_decode( get_stylesheet_directory() . '/theme.json', [ 'associative' => true ] );
	$fix_block_editor_not_showing_layout_styles = '';
	if ( isset( $theme_json['settings']['layout'] ) ) {
		$content_size = $theme_json['settings']['layout']['contentSize'];
		$wide_size    = $theme_json['settings']['layout']['wideSize'];

		$fix_block_editor_not_showing_layout_styles .= 'body {';
		$fix_block_editor_not_showing_layout_styles .= '--wp--style--global--content-size: ' . $content_size . ';';
		$fix_block_editor_not_showing_layout_styles .= '--wp--style--global--wide-size: ' . $wide_size . ';';
		$fix_block_editor_not_showing_layout_styles .= '}';
	}
	if ( ! empty( $fix_block_editor_not_showing_layout_styles ) ) {
		wp_register_style( 'epalle_fix_block_editor_not_showing_layout_styles', false );
		wp_add_inline_style( 'epalle_fix_block_editor_not_showing_layout_styles', $fix_block_editor_not_showing_layout_styles );
		wp_enqueue_style( 'epalle_fix_block_editor_not_showing_layout_styles' );
	}

} );

for anyone intersetd
just came across this post:
https://make.www.ads-software.com/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/

which says that defining layout in theme.json is not automaticaly registered to continer blocks, and aparently the root block as well