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

Include .has-no-blocks body class on archive and search results pages. #309

Open
jamiemitchell opened this issue Sep 14, 2019 · 1 comment
Labels

Comments

@jamiemitchell
Copy link

The .has-no-block helper function in the Gutenberg init.php doesn't show on archive and search results pages.

Even though the archive or search results page contain blocks themselves within the posts, I think the archive and search results pages should still include the .has-no-blocks body class as these aren't actually editable pages.

So if we were to use the .has-no-blocks body class for Gutenberg block page specific styling like for example:

body:not(.has-no-blocks) .entry-content {
    /* Do some Gutenberg block page specific styling
        which could include margins, padding or widths  */
}

Then those styles would also get applied to posts on archive and search results pages too where this block page specific styling should not be included.

@jamiemitchell
Copy link
Author

jamiemitchell commented Sep 17, 2019

Just a suggestion, but in lib/gutenberg/init.php possibly change:

	if ( ! has_blocks() ) {
		$classes[] = 'has-no-blocks';
		return $classes;
	}

to:

	if ( has_blocks()  ) {
		$classes[] = 'has-blocks';
	}

Because if the Gutenberg init.php is disabled, then any styles added to the main stylesheet for '.has-no-blocks' will no longer work.

Where as the 'has-blocks' class is 100% Gutenberg specific for folks who may want to style block pages different, remove paddings, margins, width etc too.

As an example:

.has-blocks .site-inner {
    max-width: 100%;
    padding: 0;
}

.has-blocks .entry-content > * {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 760px;
}

.has-blocks .entry-content > .alignwide {
    max-width: 1160px;
}

Makes block page styling super easy.

Hope this helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant