68 jili casino login register download,58jili login app download apk old version.Recharge Every day and Get Bonus up-to 50%!

(@yochaiglik)

Hello,

i have a wordpress woocommerce site that is using a classic theme (storefront) with a child theme that i wrote.
i wanted to use gutenberg and to get the best experience from it, so i have created a theme.json to better control the styles and settings of the blocks.

i ran into a problem:
the theme.json is processed ok, and when i am using blocks in gutenberg, everything is working fine on the frontend, the problem is that some of the styles are not appearing in the gutenberg editor.

here is an example i did to test it:

a group block, having inside 3 groups,
each group has different align: none, wide and full.
the problem is that they all showing as full in the editor.

in the frontend it look like this:

i am searching for a solution for few days now, including digging in to docs, reading gutenberg guides and asking in forums. cant find it.
i would realy appreciate help on that topic, a solution or a direction to search in.

thanks!

my theme.json for refference:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": false,
    "layout": {
      "contentSize": "650px",
      "wideSize": "1000px"
    },
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    },
    "color": {
      "text": true,
      "background": true,
      "custom": true,
      "customDuotone": true,
      "customGradient": true,
      "defaultPalette": true,
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#3239FF"
        },
        {
          "name": "Dark",
          "slug": "dark",
          "color": "#222F3E"
        },
        {
          "name": "Light",
          "slug": "light",
          "color": "#FFFFFF"
        }
      ]
    },
    "shadow": {
      "defaultPresets": true,
      "presets": [
        {
          "name": "Natural",
          "slug": "natural",
          "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
        },
        {
          "name": "Deep",
          "slug": "deep",
          "shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
        },
        {
          "name": "Sharp",
          "slug": "sharp",
          "shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
        },
        {
          "name": "Outlined",
          "slug": "outlined",
          "shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
        },
        {
          "name": "Crisp",
          "slug": "crisp",
          "shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
        }
      ]
    },
    "spacing": {
      "blockGap": true,
      "customSpacingSize": true,
      "units": [
        "px",
        "em",
        "rem",
        "vh",
        "vw",
        "%"
      ],
      "spacingScale": {
        "operator": "*",
        "increment": 1.5,
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem"
      }
    },
    "typography": {
      "customFontSize": true,
      "dropCap": true,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "13px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "20px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "36px"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "42px"
        }
      ],
      "fontStyle": true,
      "fontWeight": true,
      "letterSpacing": true,
      "lineHeight": false,
      "textDecoration": true,
      "textTransform": true,
      "writingMode": false,
      "fluid": true
    },
    "blocks": {
      "core/button": {
        "border": {
          "radius": true
        },
        "appearanceTools": true
      },
      "core/image": {
        "lightbox": {
          "allowEditing": true
        }
      },
      "core/pullquote": {
        "border": {
          "color": true,
          "radius": true,
          "style": true,
          "width": true
        }
      },
      "core/group": {
        "color": {
          "text": true,
          "background": true,
          "link": true
        }
      }
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--light)",
      "text": "var(--wp--preset--color--dark)"
    },
    "elements": {
      "button": {
        "color": {
          "text": "#fff",
          "background": "#32373c"
        },
        "spacing": {
          "padding": "calc(0.667em + 2px) calc(1.333em + 2px)"
        },
        "typography": {
          "fontSize": "inherit",
          "fontFamily": "inherit",
          "lineHeight": "inherit",
          "textDecoration": "none"
        },
        "border": {
          "width": "0"
        }
      },
      "link": {
        "typography": {
          "textDecoration": "underline"
        }
      },
      "heading": {
        "color": {
          "text": "var(--wp--preset--color--dark)"
        }
      }
    },
    "spacing": {
      "blockGap": "24px",
      "padding": {
        "top": "0px",
        "right": "0px",
        "bottom": "0px",
        "left": "0px"
      }
    }
  }
}

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter Yochai Glik
(@yochaiglik)

1 year ago

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
Shameem R. a11n
(@shameemreza)

1 year ago
Hi @yochaiglik

As you’ve found in the WordPress core post, the layout defined in theme.json is not automatically registered to container blocks, and apparently, the root block as well. This is likely the reason why you’re seeing all your group blocks as full width in the editor, regardless of the alignment that you’ve set.

To resolve this, you could try adding support for the layout configuration in the after_setup_theme action in your functions.php file, for example:
```
add_action( 'after_setup_theme', function() {
add_theme_support( 'layout', array(
'contentSize' => '650px',
'wideSize' => '1000px',
) );
} );
```
This will add support for the layout configuration in your theme, and should make the Gutenberg editor reflect the styles as defined in your theme.json file.

Detailed information can be found here: https://developer.www.ads-software.com/reference/hooks/after_setup_theme/

Please give this a try and let us know if this helps or if you have any other questions.
Thread Starter Yochai Glik
(@yochaiglik)

1 year ago
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' );
	}

} );
```
Shameem R. a11n
(@shameemreza)

1 year ago

Hi @yochaiglik

I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

Your approach to use the enqueue_block_editor_assets action hook to decode the JSON file and dynamically update the styles is quite resourceful.

However, please be aware that while your solution may work, it’s not officially supported by WordPress. This means that it might not be compatible with future updates and could potentially cause issues with your site.

Meanwhile, should you have further inquiries, kindly create a new topic here.

Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘classic theme using theme.json dont show styles in the block editor’ is closed to new replies.

Tags