Add a blocks.css file

[saltcod]

Per @smy315's point here: #78 (comment)

We should probably include a blocks.css file to compliment the wordpress.css file we have now.

This looks like Automattic's. I haven't had a chance to even look that over yet, so no endorsement on that particular one. https://github.com/WordPress/gutenberg-starter-theme/blob/master/css/blocks.css

The biggest pain point on my last project with lots of Gutenberg blocks was input fields and labels. Some inputs are actual inputs, while others were div-based faux-inputs for richtext with no labels.

[colorful-tones]

It is also worth referencing, and monitoring progress for TwentyNineteen's blocks.scss https://github.com/WordPress/twentynineteen/blob/master/sass/blocks/_blocks.scss

[colorful-tones]

Also, there will likely be some overlap with this Issue and #87

Specifically: #87 (comment)

[colorful-tones]

I'm a fan of @samikeijonen 's Uuups theme's block CSS organization: https://github.com/samikeijonen/uuups/tree/master/resources/css/blocks/core

[saltcod]

What would we add to the scaffold in this case? Sang just went through this work on another project and it ended up being a similar structure, but almost all of the styles were project/design dependent.

There's precedent in the scaffold for placeholder folders with .gitkeep, but not for empty files (which would fail linting anyway).

Thoughts?

[saltcod]

By default, Youtube videos don't shrink small enough on small screens. This causes them to flow outside their otherwise responsive container.

Any objections for adding a positioning rule on small screens for this?

I believe the trick is to set the video's iframe to position absolute / centered, and overflow hidden on its container.

If no objections, I'll add to the PR associated with this issue.

[samikeijonen]

We could do the same as we do with components:

Add empty blocks/index.css file and in style.css:

/* Blocks */

/* @import url("blocks/index.css"); */

I would also dequeue Core block styles in front-end:

// Dequeue Core block styles.
wp_dequeue_style( 'wp-block-library' );

Pros

• No fighting with Core styles by overwriting them. Or adding specificity.
• Performance.

Cons

• Take care of the Core block styles by yourself.

I don't see that as a big issue though. In reality we blacklist or whitelist Core blocks and based on that we know which Core blocks needs styling from us.

[samikeijonen]

@saltcod About iframe. It's more about missing this styles:

iframe {
	max-width: 100%;
}

Or if playing safe:

embed,
iframe,
object {
	max-width: 100%;
}

[colorful-tones]

Add empty blocks/index.css file and in style.css

This seems like the best, lean approach to me. Only addition I might add is in the empty blocks/index.css file we could put a comment about how it relates to the wp_dequeue_style( 'wp-block-library' )

[timwright12]

a version of this got merge recently, closing it out