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

Blocks: Split frontend block styles into block.scss files #1590

Merged
merged 3 commits into from
Jun 30, 2017

Conversation

youknowriad
Copy link
Contributor

This PR builds on top of #1418 and splits all the blocks' styles into two files

  • block.scss for styles shared with the frontend
  • style.scss for styles only loaded in the editor.

This should allow themes to support the gutenberg blocks without any change. The styles can be overriden by themes.

Testing instructions

Try the following blocks and ensure they're showing up properly on the frontend and the backend:

  • button
  • cover image
  • pullquote
  • quote
  • separator

@youknowriad youknowriad added the [Feature] Blocks Overall functionality of blocks label Jun 29, 2017
@youknowriad youknowriad self-assigned this Jun 29, 2017
& > .blocks-editable p {
font-size: 24px;
font-style: italic;
&.blocks-quote-style-1 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a note, we should clean these classes and make them proper modifiers.


&.blocks-quote-style-2 {
padding: 0 1em;
& > .blocks-editable p {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make editable have a wp-blocks-editable class

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was an error I should move this back to style.scss and use > p instead for frontend.

@mtias
Copy link
Member

mtias commented Jun 29, 2017

More specific styles needed for:

image

We should make the dash in quotes not be absolutely positioned:

image

@mtias
Copy link
Member

mtias commented Jun 29, 2017

We also need to get the object-fit styles from galleries that was merged earlier today.

@youknowriad
Copy link
Contributor Author

youknowriad commented Jun 29, 2017

@mtias the is-cropped className was missing in the save function. Added in 705c835

@mtias
Copy link
Member

mtias commented Jun 29, 2017

Now the fixtures will hunt you...

@jasmussen
Copy link
Contributor

Nice work!

I think we'll want to do a run on theme styles and polish all of these as a separate PR, but I think it would be great to get this in soon, especially since I did some polish work to many of the blocks in #1597.

@youknowriad youknowriad force-pushed the update/split-block-styles branch from 705c835 to c1676e8 Compare June 30, 2017 09:39
@youknowriad youknowriad force-pushed the update/split-block-styles branch from c1676e8 to 12efb79 Compare June 30, 2017 09:42
@youknowriad
Copy link
Contributor Author

Ok. I'll wait for the tests to pass and merge. :)

@youknowriad youknowriad merged commit 15f2ae2 into master Jun 30, 2017
@youknowriad youknowriad deleted the update/split-block-styles branch June 30, 2017 09:52
@youknowriad youknowriad mentioned this pull request Jul 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants