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.

Sign up for GitHub

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

File block: Try refreshing styles #39118

Closed
wants to merge 4 commits into from
Closed

File block: Try refreshing styles #39118

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
be04332
Inspector tweaks.
jasmussen Feb 28, 2022
e28d850
Simplify styles.
jasmussen Feb 28, 2022
d623f93
Tweak styles.
jasmussen Feb 28, 2022
85acb8c
"Open in new tab"
jasmussen Mar 2, 2022
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
25 changes: 15 additions & 10 deletions packages/block-library/src/file/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
height: auto;
}

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0;

.components-resizable-box__container {
margin-bottom: 1em;
}
Expand All @@ -29,16 +23,27 @@
left: 0;
}

// This is an extra container present only in the editor view.
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we still need to have different markup in the editor?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Probably not. The block feels somewhat oldish. Feel free to commit to the PR if you like!

Copy link
Contributor

Choose a reason for hiding this comment

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

Might be better as a follow up!

.wp-block-file__content-wrapper {
flex-grow: 1;
display: flex;
flex: 1;
align-items: center;
}

// This is the editable filename on the left.
// Make sure it matches the styling on the frontend.
// Except for flex-grow, it is useful to have an easily selectable block.
a {
min-width: 1em;
min-width: 2em !important;
}

// This element maps to the Download button link on the right.
.wp-block-file__button-richtext-wrapper {
display: inline-block;
margin-left: 0.75em;
margin-left: auto;
}

// The file block already has a border, so don't show the extra border of the placceholder.
.components-placeholder.components-placeholder {
box-shadow: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I suppose if we do add border support, you could set the border to zero which might be weird in the placeholder state 🤔

Then again, it seems like the placeholder state itself could do with a great deal of iteration to be more minimal — almost just a small dashed-line dropzone of the same size as the resulting block? Probably best to explore separately.

}
}
6 changes: 2 additions & 4 deletions packages/block-library/src/file/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,20 +68,18 @@ export default function FileBlockInspector( {
) }
</PanelBody>
) }
<PanelBody title={ __( 'Text link settings' ) }>
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
label={ __( 'Link to' ) }
value={ textLinkHref }
options={ linkDestinationOptions }
onChange={ changeLinkDestinationOption }
/>
<ToggleControl
label={ __( 'Open in new tab' ) }
label={ __( 'Open link in new tab' ) }
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
checked={ openInNewWindow }
onChange={ changeOpenInNewWindow }
/>
</PanelBody>
<PanelBody title={ __( 'Download button settings' ) }>
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
<ToggleControl
label={ __( 'Show download button' ) }
checked={ showDownloadButton }
Expand Down
50 changes: 23 additions & 27 deletions packages/block-library/src/file/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
.wp-block-file {
margin-bottom: 1.5em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
box-sizing: border-box;

// Basic styles meant to be easily overridden by block supports and theme.json.
border: 1px solid;
padding: 0.5em;

// Link/text.
> a {
flex: 1;
}

// Separate download button.
.wp-block-file__button {
margin-left: auto;
text-decoration: none;
color: currentColor;
flex-grow: 0;
}

&.aligncenter {
text-align: center;
Expand All @@ -13,30 +35,4 @@
.wp-block-file__embed {
margin-bottom: 1em;
}

.wp-block-file__button {
background: #32373c;
border-radius: 2em;
color: $white;
font-size: 0.8em;
padding: 0.5em 1em;
}

a.wp-block-file__button {
text-decoration: none;

&:hover,
&:visited,
&:focus,
&:active {
box-shadow: none;
color: $white;
opacity: 0.85;
text-decoration: none;
}
}

* + .wp-block-file__button {
margin-left: 0.75em;
}
}