search

tomusborne / generateblocks

GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com
197 stars 21 forks source link

Bad CSS priorization with GeneratePress theme #977

Closed simkoG closed 1 year ago

simkoG commented 1 year ago

Description

There are some bad CSS file prioritization with the GeneratePress theme. I mean, the GeneratePress styles overwrite the GenerateBlock's Global Style tags.

Steps to reproduce

  1. Install and activate GeneratePress with GeneratePress Pro.
  2. Install and activate GenerateBlocks with GenerateBlocks Pro.
  3. Go to GenerateBlocks > Settings > and set CSS PRINT METHOD to External File. important
  4. Go to Appearance > Customize > General and set Dynamic CSS Print Method to External file. important
  5. Apply these styles inside the Customizer:
    • Colors > Buttons > Background: #FF0000 (hover: #FF6347)
    • Colors > Buttons > Text: #FFFF00 (hover: #FFA500)
    • Colors > Content > Link: #800080 (hover: #FFC0CB)
  6. Add a new Global style within GenerateBlocks (GenerateBlocks > Global Styles > Add new)
  7. Insert a single button.
  8. Give these styles to the new button:
    • name: gb-button-primary
    • label: primary
    • Colors > Background: #008000 (hover: #ffff00)
    • Colors > Text: #ff0000 (hover: #008000)
      1. Create a new page and insert a button. Set the previously made style as Global style.
      2. Insert a Text block below the button, and make a link from it.
      3. Save and check the result. You should see that the button's text color is wrong.

Expected behavior

image Preview inside the editor.

Actual behavior

image Final page. You can see that the button's text has a wrong color.

References:

You should load the GenerateBlocks' CSS files after the GeneratePress theme's CSS files.

image

tomusborne commented 1 year ago

Hey @simkoG,

Moving the CSS file in this case likely won't fix the issue.

.inside-article a is more specific than .gb-button-primary, which is why it's being overwritten.

In most cases, it's not necessary to use the "Content Link Color" option in GP that writes that first selector, you can just use the "Body Link Color" option.

One other option is to actually add a link to the Global Style button, this will tell GB to output the selector as a.gb-button-primary which should fix the issue.