Advanced Heading not using var theme colors

  • Resolved jhnpldng

    (@jhnpldng)


    2 years, 1 month ago

    I made a night mode button as per your tutorial. This website is not using BlockPress(yet) but the theme does have foreground and background color variable presets.

    Here’s a wp heading
    color: var(--wp--preset--color--foreground) !important;

    All the WP blocks and all the Gutenify theme blocks swap foreground and background colors just fine but the GS Advanced Heading block doesn’t output the color variable css.

    On the above page, you’ll see two sets of four of the Advanced Heading block with a WP Heading block below those and I stuck a nightmode button(light bulb) right there handy for you.

    Text of the blocks are as per their colors chosen in the block editor.

    #3 is a theme preset/variable but like the rest, it shows up in the Inspector as a hard coded, inline #777 which the theme calls Boulder.

    #2 is the background var so you won’t see it until you click the light bulb icon/button.

    #1 is not quite being invisible in dark mode because I’m tweaking the dark mode colors from something other than black/white background/foreground. As per below.

    body.nightmode{--wp--preset--color--white: #1A1A1D; --wp--preset--color--black: #ffffff;}
body.nightmode{--wp--preset--color--background: #1A1A1D; --wp--preset--color--foreground: white!important;}
body.nightmode{--wp--preset--color--background-secondary: #0B1112 !important;}

    I’m working on “somewhat” duplicating the home page layout and blocks which is a Gutenify Template and uses their blocks plugin as well. I want to use BlockPress and Greenshift instead.

    On a side note, it sure would be nice to swap the circled number out for an icon.

    • This topic was modified 2 years, 1 month ago by jhnpldng.
    • This topic was modified 2 years, 1 month ago by jhnpldng.
    • This topic was modified 2 years, 1 month ago by jhnpldng.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author wpsoul

    (@wpsoul)

    You are doing it in wrong way

    You should not add color to heading, because your heading can be part of banner or other blocks.

    You need to do opposite. You need to remove color setting from heading (both, from GS and from your theme), then, heading will use Body colors

    Thread Starter jhnpldng

    (@jhnpldng)

    #4 has no colors set – whatever colors you see on #4 is whatever GS outputs them as but in the editor, no colors are set for the heading or subtitle.

    The heading has no color set but GS outputs it as hard coded, inline #000.
    The subtitle has no color set but GS outputs it as hard coded, inline #b0bac0.
    The circled number is blue because that’s what color GS makes it initially.`

    When I set colors as foreground/background, everything else greenshift works. Everything Gutenify theme works. Everything Gutenify plugin works.

    Grenshift Advanced Heading does not work.

    #1 is foreground
    #2 is background
    #3 is a theme color, medium gray
    and again, #4 has no colors set for heading/subtitle.

    I don’t really need the Advanced Heading because it’s easy enough to create the same thing with core blocks and I know if I set the text on those as foreground, nightmode will work.

    I just wanted to let you know that advanced heading is outputting hard coded inline hex colors instead of var.

    • This reply was modified 2 years, 1 month ago by jhnpldng.
    Plugin Author wpsoul

    (@wpsoul)

    Greenshift doesn’t load and doesn’t set any colors if you don’t add them in options

    Heading colors are loaded from your theme. You can ask author of theme how to remove default color for h1,h2,h3,h4, etc

    Thread Starter jhnpldng

    (@jhnpldng)

    Then why do I find this in your greenshift-animation-and-page-builder-blocks/build/index.js

    .gspb_heading_subtitle{display:block; font-size:17px; line-height:22px; color:#b0bac0;margin-top:5px}

    That’s about as hard coded as it gets.

    I did try the circled number with heading on a fresh install with blockpress and greenshift and the rest of the block elements come through with the color variable. but that subtitle just ain’t right.

    Search that javascript file and you’ll find it. I can’t clear out the subtitle color if it’s called out in a javascript file.

    Thread Starter jhnpldng

    (@jhnpldng)

    Just did a search in that file for color:# and found 49 results. The results include background-color:# because I didn’t do a whole word search. There are quite a few blocks being styled in that javascript file. Also padding, margins, font-weight, font-size.

    Makes it hard for people who want their global colors/styles to be used.

    Thread Starter jhnpldng

    (@jhnpldng)

    greenshift-animation-and-page-builder-blocks/build/index.js

    49 instances of color:#
    includes
    20 instances of background-color:#

    8 instances of font-weight:

    10 instances of padding:1 (could include 1-19)
    5 instances of padding:2 (could include 2 & 20-29)
    2 instances of padding:3 (1 – 3px and 1 – 30px)
    6 instances of text-decoration:
    15 instances of font-size:1 (could include 1-19)
    15 instances of font-size:2 (could include 2 & 20-29)
    1 instance of font-size:3

    7 instances line-height:1 (could be 1, 1.5 etc)
    7 instances line-height:2
    1 instance line-height:3

    1 instance of margin:1 (margin:15px on autolist)
    61 instances of margin- (margin-top, bottom, left, right ???? not my job)

    In a javascript file!

    That’s a lot of styles that will override global styles when nothing is specified in the block editor. The 49 instances of color:# means the nightmode will never work right.

    Plugin Author wpsoul

    (@wpsoul)

    .gspb_heading_subtitle – this is for subtitle of heading, it’s not for heading, but you are right, it can be replaced by opacity

    49 instances of color:#
    includes
    20 instances of background-color:#

    Of course, there are predefined colors in some blocks, otherwise, they will be unstyled when you add them and will lool broken. And these blocks should not change colors in night mode because they will look broken. For example, infobox colors or titlebox. They should not change colors.

    But core elements, like container, row, heading, advanced text, lists – they have no preinstalled colors

    • This reply was modified 2 years, 1 month ago by wpsoul.
    Thread Starter jhnpldng

    (@jhnpldng)

    Here’s the thing. I was planning on creating a really nice custom nightmode theme, not simply swap foreground for background. You’re tutorial taught me the concept but that javascript file will prevent a few things from being changed with that method.

    Infobox, I would probably not want to change as it’s kind of a standard so I can understand why you would give them predefined colors. Initial paddings, margins, etc I can also understand because you want the blocks to look good when first inserted and after that, people can change them if they want.

    So as of now, the subtitle on the Circle Number Heading Block is one that I see no good reason for being hard coded to a light blueish gray. It’s just text.

    The icons for Icon Box also default to a hard coded #565D66 and again, I don’t see the reason. Figured that out when I went to recreate the look of the Circle Number Heading Block but with an icon which is my preference to a circled number anyway.

    I do have a couple of colors I can use for both light and dark backgrounds as a workaround.

    So we’re both right I think. Infobox colors were mostly standardized by bootstrap and the traffic light or universal safety standards colors make sense. An icon or that subtitle, not so much.

    So if you think you should/could fix those two items, great.

    In the meantime, I’ve read the roadmap and anxiously await seeing what you do with woocommerce.

    Plugin Author wpsoul

    (@wpsoul)

    As I wrote, I agree with subtitle and color will be removed there.

    But I can’t remove color from icon or circle element. Default black is ugly for these elements. Also, default blue is working great on both, night and regular mode.

    Also, icon must have default color, it’s because custom icons can be not visible without fill color

    Anyway, the solution is possible. In next update, we will add logic when you clean Icon color, it will use parent text color and this will work as you need for your purpose. So, you just need to clean default color value in Icon option

    Thread Starter jhnpldng

    (@jhnpldng)

    Thx

    Also on my staging site, I got rid of that theme and it’s plugin and am using blockpress which takes care of the headings. BlockPress + GreenShift + Twentig for every site now.

    • This reply was modified 2 years, 1 month ago by jhnpldng.
    Thread Starter jhnpldng

    (@jhnpldng)

    Confirmed, all is fixed. Thanks again.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Advanced Heading not using var theme colors’ is closed to new replies.