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

Chore: style Gutenberg file block #773

Merged
merged 17 commits into from
Jun 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slimy-gifts-drum.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@cloudfour/patterns': minor
---

Adds visual support for WP Gutenberg file blocks
56 changes: 56 additions & 0 deletions src/vendor/wordpress/_wordpress.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,62 @@ $wp-button-gap: sizes.$list-inline-gap;
}
}

/**
* Gutenberg block: File download button
* Applies our pattern library styles to gutenberg file download blocks.
*/

.wp-block-file {
/**
* 1. Prevents stacked file buttons from collapsing on each other.
*/

+ .wp-block-file {
margin-top: $wp-button-gap; /* 1 */
}

/**
* The following three selectors target a class name _and_ a universal
* selector (*). This is intentional because the Gutenberg file block can
* generate two different elements, a file-link and a file-button and we
* want to style both of them with the same visual appearance and
* characteristics. We could easily have chosen `:not(.wp-block-file__button)`
* but opted for less characters.
*
* 1. Prevents default WP styling from modifying buttons opacity on hover.
*/

.wp-block-file__button,
* {
Comment on lines +83 to +84
Copy link
Member

Choose a reason for hiding this comment

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

Can you add a comment somewhere explaining why you're targeting the class AND the universal selector? Earlier you had this comment, which was helpful to prevent someone else coming in later and thinking they can optimize your code by removing the class:

/*
 * If I don't include `wp-block-file__button` here, this selector is not 
 * specific enough to enforce the desired styles, as rules from the 
 * `@wordpress/block-library` override  various properties.
 */

Copy link
Member

Choose a reason for hiding this comment

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

I don't think you need to repeat the comment in each selector — maybe add a footnote comment to each that references the earlier footnote?

Copy link
Contributor Author

@derekshirk derekshirk Jun 17, 2020

Choose a reason for hiding this comment

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

Thanks for your feedback @spaceninja.

maybe add a footnote comment to each that references the earlier footnote?

Forgive my ignorance here, but I wasn't actually sure how to implement a "footnote comment" or a numerical comment, in the same way we do on properties of a classname.

So...this is what I ended up with:

/**
   * The following three selectors target a class name _and_ a universal 
   * selector (*). This is intentional because the Gutenberg file block can
   * generate two different elements, a file-link and a file-button and we
   * want to style both of them with the same visual appearance and
   * characteristics. We could easily have chosen `:not(.wp-block-file__button)`
   * but opted for less characters.
   * 
   * 1. Prevents default WP styling from modifying buttons opacity on hover.
   */

  .wp-block-file__button,
  * {
    @include button.default;
    opacity: inherit !important; /* 1 */
  }

  ...

@include button.default;
opacity: inherit !important; /* 1 */
}

/**
* 1. Prevents default WP styling from modifying button text color on hover
*/

&.c-button--secondary {
.wp-block-file__button,
* {
@include button.secondary;
color: inherit !important; /* 1 */
}
}

/**
* 1. Prevents default WP styling from modifying button text color on hover
*/

&.c-button--tertiary {
.wp-block-file__button,
* {
@include button.tertiary;
color: inherit !important; /* 1 */
}
}
}

/**
* Gutenberg block: Table
* Applies our pattern library styles to tables generated via Gutenberg blocks.
Expand Down
38 changes: 28 additions & 10 deletions src/vendor/wordpress/gutenberg.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -232,22 +232,40 @@ Adding a caption in the editor includes a `figcaption` element before the closin

The file block allows downloading or opening media or page attachment content.

This block creates a `div` with class `wp-block-file`, which wraps one or two
`a` elements, the second of which (toggled in the editor) is meant to be styled
as a button, adding the class `wp-block-file__button`.
This block creates a parent `div` with a `wp-block-file` class name, which
wraps a single `a` element. The Gutenberg editor allows file downloads to be
displayed as buttons (`wp-block-file__button`) or text-only links. Our CSS
styles both configurations as [buttons](/?path=/docs/components-button--elements).

The `c-button--secondary` and `c-button-tertiary` class names can be added to the file block's "Advanced → Additional CSS class(es)" input, to output additional button styles.

Be aware that the Gutenberg "Show download button" is what adds the `download` attribute to the `<a>` element.

<Preview>
<Story name="core/file">
{`<div class="wp-block-file">
<a href="/media/Squares.jpg"
rel="noreferrer noopener" target="_blank">
Open in new tab
<a href="#" class="wp-block-file__button" download="">
Primary file download button
</a>
</div>
<div class="wp-block-file">
<a href="#">
Primary file download link
</a>
<a href="/media/Squares.jpg"
class="wp-block-file__button"
download="">
Download file
</div>
<div class="wp-block-file c-button--secondary">
<a href="#" class="wp-block-file__button" download="">
Secondary file download button
</a>
</div>
<div class="wp-block-file c-button--secondary">
<a href="">Secondary file download link</a>
</div>
<div class="wp-block-file c-button--tertiary">
<a href="#" class="wp-block-file__button" download="">Tertiary file download button</a>
</div>
<div class="wp-block-file c-button--tertiary">
<a href="#">Tertiary file download link</a>
</div>`}
</Story>
</Preview>
Expand Down