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

Improve selectability #18846

Closed
strarsis opened this issue Nov 30, 2019 · 2 comments
Closed

Improve selectability #18846

strarsis opened this issue Nov 30, 2019 · 2 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.

Comments

@strarsis
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Some themes add a background image or complex background or just want to format some text in page body.

Currently, I have to use this selector, preferably either as CSS preprocessor or CSS variable:

$editor-gutenberg-background-selector: ".editor-writing-flow > div > div > div > .editor-block-list__layout";

The styles are enqueued, I try to use as much frontend-styles for backend as possible:

/**
 * Gutenberg scripts and styles
 * @see https://www.billerickson.net/block-styles-in-gutenberg/
 */
function gutenberg_scripts() {
    wp_enqueue_style(
        'editor-theme',
        asset_path('styles/editor.css'),
        false,
        true
    );
}
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\gutenberg_scripts' );

Especially generic text elements like <p>, <ul>, etc without a style variation need to be selected, too.
When I just select all <ul> I would either select all <ul> in WordPress backend and inspector panels, too - or nothing of them because I use a selector for the front end markup only (e.g. body:not(.wp-admin) ul, main ul).

Describe the solution you'd like
Some attribute or class for the innermost editor wrapper so background and typographic styles can be safely and easily applied by a theme (or plugin).

Describe alternatives you've considered
The alternative I am currently using is some custom selector that may change between Gutenberg updates which requires themes to handle different DOM structures for different Gutenberg versions.

@strarsis
Copy link
Contributor Author

@talldan talldan added [Type] Enhancement A suggestion for improvement. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Jan 24, 2020
@skorasaurus skorasaurus added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Nov 30, 2020
@mtias
Copy link
Member

mtias commented Sep 29, 2024

With the editor iframe targeting editor only / frontend without disturbing the admin chrome should be a lot easier.

@mtias mtias closed this as completed Sep 29, 2024
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. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants