search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.54k stars 4.22k forks source link

Unable to disable Typography panel #39203

Closed bradhogan closed 2 years ago

bradhogan commented 2 years ago

Description

Previously I had the following in my theme:

add_theme_support( 'editor-font-sizes' );
add_theme_support( 'disable-custom-font-sizes' );

To disable the unwanted Typography Panel from Gutenberg as it is confusing to our customers and overwhelms them with options.

However, with 5.9 this simple fix no longer works and I cannot find documentation on how to actually remove this panel from our theme support.

Thank you!

Step-by-step reproduction instructions

Add 

add_theme_support( 'editor-font-sizes' );
add_theme_support( 'disable-custom-font-sizes' );

Then click into the text inside of a page your are editing and you will see the Typography panel is still there.

Screenshots, screen recording, code snippet

No response

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

jackholden commented 2 years ago

Do you have a theme.json file? If not make one and try below as future WordPress is heading in a theme.json direction. Much simpler.

theme.json Docs

I think these are all the params available currently regarding typography:

    "typography": {
         "customFontSize": false,
         "dropCap": false,
         "fontFamilies": [],
         "fontSizes": [],
         "fontStyle": false,
         "fontWeight": false,
         "letterSpacing": false,
         "lineHeight": false,
         "textDecoration": false,
         "textTransform": false
    },
skorasaurus commented 2 years ago

Hi,

I'm not able to reproduce this; both the ability to customize a font-size and do not appear in a theme when i have the following snippet in my functions.php

Make sure that you have it hooked in using the after_setup_theme; this should still work even if you are not using a child theme.

Could you share what theme you are using? 

function child_theme_setup() {

    add_theme_support( 'disable-custom-font-sizes' );
    add_theme_support( 'editor-font-sizes' );

}
add_action( 'after_setup_theme', 'child_theme_setup' );
github-actions[bot] commented 2 years ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

adamwoodnz commented 2 years ago

Closing following triage policy

caseymilne commented 4 months ago

Is it possible to enable "typography": false to fully shut off the typography panel? I've found that this theme.json setting results in no controls, but the typography heading still shows in the sidebar: 

"typography": {
  "customFontSize": false,
  "dropCap": false,
  "fontStyle": false,
  "fontWeight": false,
  "letterSpacing": false,
  "lineHeight": false,
  "textColumns": false,
  "textDecoration": false,
  "textTransform": false,
  "writingMode": false,
  "fontSizes": []
}

For those who find this I believe a HOC can be used to shut typography support off completely by filtering the block registrations.

maheshwaghmare commented 4 months ago

The default variables are disabled.

But still, those are loading.

Why?

See the theme.json

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "color": {
            "defaultDuotone": false,
            "defaultGradients": false,
            "defaultPalette": false
        },
        "shadow": {
            "defaultPresets": false
        },
        "spacing": {
            "defaultSpacingSizes": false,
            "spacingScale": {
                "steps": 0
            },
        },
        "typography": {
            "defaultFontSizes": false,
        },
    },
}

1. The palette and gradients are disabled as "defaultGradients": false, and "defaultPalette": false then why the variables loaded:

--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);

2. The shadow is disabled as "defaultPresets": false then why the variables loaded:

--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);

3. The spacing is disabled as "defaultSpacingSizes": false,, and "spacingScale": { "steps": 0 }, then why the variables loaded:

--wp--preset--spacing--20: ;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;

4. The typography is disabled as "defaultFontSizes": false, then why the variables loaded:

--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;

Refer below complete theme.json

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "color": {
            "defaultDuotone": false,
            "defaultGradients": false,
            "defaultPalette": false,
            "palette": [
                {
                    "color": "#ebebeb",
                    "name": "Base",
                    "slug": "base"
                },
                {
                    "color": "#1e1e1e",
                    "name": "Contrast",
                    "slug": "contrast"
                },
                {
                    "color": "#3858e9",
                    "name": "Primary",
                    "slug": "primary"
                },
                {
                    "color": "#ffffff",
                    "name": "White",
                    "slug": "white"
                },
                {
                    "color": "#000000",
                    "name": "Black",
                    "slug": "black"
                }
            ]
        },
        "border": {
            "color": true,
            "radius": true,
            "style": true,
            "width": true
        },
        "dimensions": {
            "minHeight": true
        },
        "layout": {
            "contentSize": "640px",
            "wideSize": "1240px"
        },
        "blocks": {
            "core/image": {
                "lightbox": {
                    "enabled": true
                }
            }
        },
        "shadow": {
            "defaultPresets": false,
            "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,
            "margin": true,
            "padding": true,
            "defaultSpacingSizes": false,
            "spacingScale": {
                "steps": 0
            },
            "spacingSizes": [
                {
                    "name": "20",
                    "slug": "20",
                    "size": ""
                },
                {
                    "name": "none",
                    "slug": "none",
                    "size": "0px"
                },
                {
                    "name": "xxs",
                    "slug": "xxs",
                    "size": "1px"
                },
                {
                    "name": "xs",
                    "slug": "xs",
                    "size": "2px"
                },
                {
                    "name": "sm",
                    "slug": "sm",
                    "size": "4px"
                },
                {
                    "name": "md",
                    "slug": "md",
                    "size": "6px"
                },
                {
                    "name": "lg",
                    "slug": "lg",
                    "size": "8px"
                },
                {
                    "name": "xl",
                    "slug": "xl",
                    "size": "12px"
                },
                {
                    "name": "2xl",
                    "slug": "2xl",
                    "size": "16px"
                },
                {
                    "name": "3xl",
                    "slug": "3xl",
                    "size": "24px"
                },
                {
                    "name": "4xl",
                    "slug": "4xl",
                    "size": "32px"
                },
                {
                    "name": "5xl",
                    "slug": "5xl",
                    "size": "40px"
                },
                {
                    "name": "6xl",
                    "slug": "6xl",
                    "size": "48px"
                }
            ]
        },
        "typography": {
            "customFontSize": true,
            "dropCap": true,
            "fontStyle": true,
            "fontWeight": true,
            "letterSpacing": true,
            "lineHeight": true,
            "textColumns": true,
            "textDecoration": true,
            "textTransform": true,
            "writingMode": true,
            "fontFamilies": [
                {
                    "name": "System Font",
                    "slug": "system-font",
                    "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
                }
            ],
            "fluid": false,
            "fontSizes": [
                {
                    "name": "Extra Small (xs)",
                    "slug": "xs",
                    "size": "12px"
                },
                {
                    "name": "Small (sm)",
                    "slug": "sm",
                    "size": "14px"
                },
                {
                    "name": "Medium (md)",
                    "slug": "md",
                    "size": "16px"
                },
                {
                    "name": "Large (lg)",
                    "slug": "lg",
                    "size": "36px"
                },
                {
                    "name": "Extra Large (xl)",
                    "slug": "x-large",
                    "size": "42px"
                }
            ]
        },
        "custom": {
            "border--none": 0,
            "border--hairline": "1px",
            "border--thin": "2px",
            "border--medium": "4px",
            "border--thick": "8px",
            "border--extra-thick": "16px",
            "radius-none": "0px",
            "radius-xxs": "1px",
            "radius-xs": "2px",
            "radius-sm": "4px",
            "radius-md": "6px",
            "radius-lg": "8px",
            "radius-xl": "12px",
            "line-height--small": 1.2,
            "line-height--medium": 1.5,
            "line-height--large": 1.8,
            "font-style--normal": "normal",
            "font-style--italic": "italic",
            "font-weight--thin": 100,
            "font-weight--extra-light": 200,
            "font-weight--light": 300,
            "font-weight--normal": 400,
            "font-weight--medium": 500,
            "font-weight--semi-bold": 600,
            "font-weight--bold": 700,
            "font-weight--extra-bold": 800,
            "font-weight--black": 900,
            "text-transform--none": "none",
            "text-transform--capitalize": "capitalize",
            "text-transform--uppercase": "uppercase",
            "text-transform--lowercase": "lowercase",
            "text-decoration--none": "none",
            "text-decoration--underline": "underline",
            "text-decoration--line-through": "line-through",
            "text-decoration--overline": "overline"
        }
    },
    "styles": {}
}
:root {
    --wp--style--block-gap: 24px;
}

:root {
    --wp--style--global--content-size: 640px;
    --wp--style--global--wide-size: 1240px;
}

:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--base: #ebebeb;
    --wp--preset--color--contrast: #1e1e1e;
    --wp--preset--color--primary: #3858e9;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-family--system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --wp--preset--spacing--20: ;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--spacing--none: 0px;
    --wp--preset--spacing--xxs: 1px;
    --wp--preset--spacing--xs: 2px;
    --wp--preset--spacing--sm: 4px;
    --wp--preset--spacing--md: 6px;
    --wp--preset--spacing--lg: 8px;
    --wp--preset--spacing--xl: 12px;
    --wp--preset--spacing--2-xl: 16px;
    --wp--preset--spacing--3-xl: 24px;
    --wp--preset--spacing--4-xl: 32px;
    --wp--preset--spacing--5-xl: 40px;
    --wp--preset--spacing--6-xl: 48px;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    --wp--custom--border-none: 0;
    --wp--custom--border-hairline: 1px;
    --wp--custom--border-thin: 2px;
    --wp--custom--border-medium: 4px;
    --wp--custom--border-thick: 8px;
    --wp--custom--border-extra-thick: 16px;
    --wp--custom--radius-none: 0px;
    --wp--custom--radius-xxs: 1px;
    --wp--custom--radius-xs: 2px;
    --wp--custom--radius-sm: 4px;
    --wp--custom--radius-md: 6px;
    --wp--custom--radius-lg: 8px;
    --wp--custom--radius-xl: 12px;
    --wp--custom--line-height-small: 1.2;
    --wp--custom--line-height-medium: 1.5;
    --wp--custom--line-height-large: 1.8;
    --wp--custom--font-style-normal: normal;
    --wp--custom--font-style-italic: italic;
    --wp--custom--font-weight-thin: 100;
    --wp--custom--font-weight-extra-light: 200;
    --wp--custom--font-weight-light: 300;
    --wp--custom--font-weight-normal: 400;
    --wp--custom--font-weight-medium: 500;
    --wp--custom--font-weight-semi-bold: 600;
    --wp--custom--font-weight-bold: 700;
    --wp--custom--font-weight-extra-bold: 800;
    --wp--custom--font-weight-black: 900;
    --wp--custom--text-transform-none: none;
    --wp--custom--text-transform-capitalize: capitalize;
    --wp--custom--text-transform-uppercase: uppercase;
    --wp--custom--text-transform-lowercase: lowercase;
    --wp--custom--text-decoration-none: none;
    --wp--custom--text-decoration-underline: underline;
    --wp--custom--text-decoration-line-through: line-through;
    --wp--custom--text-decoration-overline: overline;
}

:root {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

:root {
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color--rgb: 0, 124, 186;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
    --wp-admin-theme-color-darker-20: #005a87;
    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
    --wp-admin-border-width-focus: 2px;
    --wp-block-synced-color: #7a00df;
    --wp-block-synced-color--rgb: 122, 0, 223;
    --wp-bound-block-color: var(--wp-block-synced-color);
}
enoversum commented 3 weeks ago

Is it possible to enable "typography": false to fully shut off the typography panel? I've found that this theme.json setting results in no controls, but the typography heading still shows in the sidebar:

"typography": {
  "customFontSize": false,
  "dropCap": false,
  "fontStyle": false,
  "fontWeight": false,
  "letterSpacing": false,
  "lineHeight": false,
  "textColumns": false,
  "textDecoration": false,
  "textTransform": false,
  "writingMode": false,
  "fontSizes": []
}

For those who find this I believe a HOC can be used to shut typography support off completely by filtering the block registrations.

Wondering the same…