Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline CSS for query block is too specific #34047

Closed
3 tasks done
markhowellsmead opened this issue Aug 12, 2021 · 2 comments
Closed
3 tasks done

Inline CSS for query block is too specific #34047

markhowellsmead opened this issue Aug 12, 2021 · 2 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed [Type] Bug An existing feature does not function as intended

Comments

@markhowellsmead
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Have you tried deactivating all plugins except Gutenberg?

  • I have tested with all plugins deactivated.

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

  • I have tested with a default theme.

Description

The new query block adds inline CSS; the use of !important on the margins is too specific, and has to be overridden in theme code by using !important again. This needs to be improved.

For example:

.wp-container-61154d850afa1 > * {
    max-width: 736px;
    margin-left: auto !important;
    margin-right: auto !important;
}

Step-by-step reproduction instructions

  1. Add a query block to the page.
  2. Add regular margin-left and margin-right rules to the theme CSS.
  3. These rules don't take effect because of the use of !important coming from Core CSS.

Expected Behavior

The use of !important leads to complications for theme developers and (in some instances) can't be overridden without unnecessarily complicated theme CSS.

Current Behavior

The theme styles are overridden by the core css.

Screenshots or screen recording (optional)

No response

Code snippet (optional)

No response

WordPress Information

Sprache der Website | de_DE_formal
Benutzersprache | de_DE_formal
Zeitzone | Europe/Zurich
Homepage-URL | https://ffde.local
Website-URL | https://ffde.local
Permalink-Struktur | /%postname%/
Verwendet diese Website HTTPS? | Ja
Ist dies eine Multisite? | Nein
Kann sich jeder auf dieser Website registrieren? | Nein
Ist diese Website für Suchmaschinen ausgeschlossen? | Ja
Standard-Kommentarstatus | Offen
Umgebungstyp | local
Anzahl der Benutzer | 4
Verbindung mit WordPress.org | WordPress.org ist erreichbar

Gutenberg Information

Gutenberg plugin is not installed

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Other

Device Information

All

Operating System Information

All

@markhowellsmead
Copy link
Author

See also #41230.

@carolinan carolinan added [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed and removed [Block] Query Loop Affects the Query Loop Block labels Jul 25, 2022
@carolinan
Copy link
Contributor

I am closing this as a duplicate of #33956 since these margin styles are not specific to the query block.

@carolinan carolinan closed this as not planned Won't fix, can't repro, duplicate, stale Jul 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants