Skip to content

Commit

Permalink
Polish Social Links block (#17380)
Browse files Browse the repository at this point in the history 
* Remove gray, adjust hover, focus styles.

* Polish further, hide sibling inserter.

* Add generic child-block-selected style.
  • Loading branch information
@jasmussen
jasmussen authored Sep 10, 2019
1 parent 276981d commit 665a102
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 47 deletions.
21 changes: 0 additions & 21 deletions packages/block-library/src/social-link/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,3 @@
padding-left: 16px;
padding-right: 16px;
}

// The following two rules have their classes doubled to increase specificity.
.has-child-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
.is-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
background-color: $dark-gray-150;
}

.has-child-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
.is-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
color: $dark-gray-150;
background-color: transparent;
}


[data-type*="core/social-link-"].is-selected .wp-social-link, // Matches the selected social logo block.
.wp-social-link:focus {
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
82 changes: 57 additions & 25 deletions packages/block-library/src/social-links/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,73 @@
// Editor specific styles for Social Links.
.wp-block-social-links {
div.editor-url-input {
display: inline-block;
margin-left: $grid-size;
}

.wp-block-social-links div.editor-url-input {
display: inline-block;
margin-left: 8px;
}

.wp-block-social-links .editor-block-list__layout {
display: flex;
justify-content: flex-start;
.editor-block-list__layout {
display: flex;
justify-content: flex-start;
}
}

// Reduce the paddings, margins, and UI of inner-blocks.
// @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block.
// When that happens, leverage that instead of the following overrides.
.wp-block-social-links {
[data-type="core/social-links"] {
// 1. Reset margins on immediate innerblocks container.
> .block-editor-inner-blocks > .block-editor-block-list__layout {
.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout {
margin-left: 0;
margin-right: 0;
}

// 2. Remove paddings on subsequent immediate children.
> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
width: auto;
padding-left: 0;
padding-right: 0;
}

// 3. Remove margins on subsequent Edit container.
> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
margin-left: 0;
margin-right: 0;
}

// 4. Hide the block outlines.
> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before {
content: none;
// 4. Minimize the block outlines.
.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before {
border-right: none;
border-top: none;
border-bottom: none;
}

.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before {
box-shadow: none;
}

// 5. Remove the dashed outlines for child blocks.
&.is-hovered .wp-block-social-links .block-editor-block-list__block-edit::before,
&.is-selected .wp-block-social-links .block-editor-block-list__block-edit::before,
&.has-child-selected .wp-block-social-links .block-editor-block-list__block-edit::before {
border-color: transparent !important; // !important used to keep the selector from growing any more complex.
}

// 5. Remove vertical margins on subsequent block container.
> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit > [data-block] {
// 6. Remove vertical margins on subsequent block container.
.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit > [data-block] {
margin-top: 0;
margin-bottom: 0;
}

// Hide the breadcrumb.
// Hide the mover.
.block-editor-block-list__breadcrumb,
.block-editor-block-mover.block-editor-block-mover { // Needs specificity.
// Hide the sibling inserter.
.wp-block-social-links .block-editor-block-list__insertion-point,
.wp-block-social-links .block-editor-block-list__breadcrumb,
.wp-block-social-links .block-editor-block-mover.block-editor-block-mover { // Needs specificity.
display: none;
}
}


// Polish the Appender.
.wp-block-social-links .block-list-appender {
margin: 0;
Expand Down Expand Up @@ -96,7 +112,7 @@
transform-origin: center center;
}

[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected):not(.is-hovered) {
[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) {
.wp-social-link__is-incomplete {
opacity: 0;
transform: scale(0);
Expand All @@ -106,8 +122,24 @@
}
}

[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) {
.wp-social-link__is-incomplete {
opacity: 0.6;
}
// Unconfigured placeholder links are semitransparent.
.wp-social-link.wp-social-link__is-incomplete {
opacity: 0.5;
}

.wp-block-social-links .is-selected .wp-social-link__is-incomplete,
.wp-social-link.wp-social-link__is-incomplete:hover,
.wp-social-link.wp-social-link__is-incomplete:focus {
opacity: 1;
}


// Focus styles for the button inside the child block.
// The child block itself has a more generic focus style, see line 55.
[data-type="core/social-links"] .wp-social-link:focus { // This needs specificity.
opacity: 1;
box-shadow: 0 0 0 2px $white, 0 0 0 4px $blue-medium-focus;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
width: 36px;
height: 36px;
border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
margin-right: $grid-size;
margin-right: 8px;
transition: transform 0.1s ease;

a {
Expand Down

0 comments on commit 665a102

Please sign in to comment.