Site logo

Archived topic

Unable to have full width options in blocks

11 replies · Started by Daniele on June 3, 2022

Viewing posts 1–12 of 12

Hi guys,
I really don't understand why I dont' have full width alignment option in my gutenberg blocks...
I tried also adding add_theme_support( 'align-wide' ); but noting changed

Hi Daniele,

Are there some specific blocks we are talking about?

Can you try switch to twenty twenty one theme to test if that works?

Hi Ying,
it seems that all the blocks are missing this option.

I switched to twenty twenty, and now I see the full width option.

This is my actual configuration: Fresh WP install, generatepress child theme, (no plugins except GP premium and SVG support) with only three files inside:
- functions.php


<?php
function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

/*--------- Full width theme support ----------*/
add_theme_support( 'align-wide' );

-theme.json


{
  "version": 2,
  "settings": {
    "color": {
      "custom": false,
      "palette": [
        {
          "slug": "primary",
          "color": "#3847F8",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#20B3FC",
          "name": "Secondary"
        },
        {
          "slug": "light-blue",
          "color": "#ECF0F9",
          "name": "Light Blue"
        },
        {
          "slug": "gray-bg",
          "color": "#FAFAFA",
          "name": "Gray Background"
        },
        {
          "slug": "white",
          "color": "#fff",
          "name": "White"
        },
        {
          "slug": "dark-gray",
          "color": "#373F41",
          "name": "Dark Gray"
        },
        {
          "slug": "light-gray",
          "color": "#737B7D",
          "name": "Light Gray"
        }
      ],
      "gradients": [
        {
          "slug": "dark-to-light-blue",
					"gradient": "linear-gradient(270deg, #3847f8, #20b3fc)",
					"name": "Dark to Light Blue"
        }
      ]
    },
    "blocks": {
      "core/button": {
        "border": {
          "radius": false
        }
      }
    }
  },
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "gradient": "var(--wp--preset--gradient--dark-to-light-blue)"
        },
        "border": {
          "radius": "0"
        }
      }
    }
  }
}

-style.css (not worth attaching this)

Hi there,

can you remove the theme.json and recheck ?

Hello,
If I remove theme.json it works.
But I need that file :)

Quick question - why do you need that file ?

I need it for a number of reasons...set a default palette and gradients, set the default styling of certain blocks and remove other options that i don't want my final user to change, so that the style will be coherent across all the website.

It is also useful to change all the palette of the website if I want to use the same theme for another client

and it seems if using theme.json I have to manually set “contentSize” and”wideSize” options.
Is that true?

I would suggest reaching out to WP or the article writer as it's not something GP specific.

Thanks for your understanding!

Hello, I understand.
can I just know if generate press uses some presets sizes for Gutenberg full width option?

Thanks

GB doesn't interfere with WP's full width option :)

For anyone that has this issue this is the solution.
Adding contentsize options in theme.json:


  "settings": {
    "layout": {
      "contentSize": "1200px",
      "wideSize": "100%"
    }
}

This will enable again the full and wide options in the blocks (only on parent blocks, it doesn't work for child ones)

This archived topic is closed to new replies.