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

Fix Blocker Picker autocompleter icon spacing #14772

Merged
merged 3 commits into from Apr 4, 2019

Conversation

@getdave
Copy link
Contributor

commented Apr 2, 2019

During the creation of the block-editor package the className in the JSX on the autocompleter wasn’t updated. However the CSS rule was updated. This inconsistency meant that a number to CSS rules were no longer being applied.

The main result was that the Block autocompeleter lost its right hand margin thereby making the icon too close to the text.

Screen Shot 2019-04-02 at 14 30 13

What was fixed?

This PR updates the className in the JSX to use the block-editor- prefix. This causes the CSS to apply again thereby correcting the margin that was missing.

Fixed version - note the space between icon and text has been restored:
Screen Shot 2019-04-02 at 15 28 35

Types of changes

Bug fix (non-breaking change which fixes an issue).

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • [x ] I've included developer documentation if appropriate.
Fixes classname to match package and CSS rule
During the creation of block-editor the className on the autocompleter wasn’t updated. This change updates the class to use the `block-editor-` prefix. This causes the CSS to apply again thereby correcting the margin that was missing.
@@ -54,7 +54,7 @@ export function createBlockCompleter( {
} = {} ) {
return {
name: 'blocks',
className: 'editor-autocompleters__block',
className: 'block-editor-autocompleters__block',

This comment has been minimized.

Copy link
@youknowriad

youknowriad Apr 3, 2019

Contributor

I think this className shouldn't be updated since it's the editor package. Any reasons for this @aduth and are there other similar use-cases?

This comment has been minimized.

Copy link
@aduth

aduth Apr 3, 2019

Member

This does appear to have been included in the updates from editor- to block-editor- in #14420, and in retrospect, I can't see any reason why it should have been (there are no other references outside the editor package). I think the correct course of action then would be to change the applied styles back from .block-editor- to .editor- in src/components/autocompleters/style.scss.

https://github.com/WordPress/gutenberg/pull/14420/files#diff-ea8f473f0650959558c8075aac355a73

This appears to have been the only file changed in packages/editor/ in #14420.

@aduth aduth referenced this pull request Apr 3, 2019

Closed

Fix styling regression to autocompleters #14791

5 of 5 tasks complete

aduth and others added some commits Apr 3, 2019

Editor: Revert autocompleters classnames to editor prefix
Co-Authored-By: Daniel Richards <talldan@users.noreply.github.com>

@getdave getdave requested a review from chrisvanpatten as a code owner Apr 3, 2019

@aduth

aduth approved these changes Apr 3, 2019

Copy link
Member

left a comment

I pushed directly the proposed revisions to revert the class name prefix back to editor-. This should be effectively a straight revert of 790fa23 for the specific file packages/editor/src/components/autocompleters/style.scss.

cc @talldan

@aduth aduth merged commit a6ff3a0 into master Apr 4, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@aduth aduth deleted the fix/block-picker-icon-spacing branch Apr 4, 2019

@youknowriad youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019

aduth added a commit that referenced this pull request Apr 15, 2019

Fix Blocker Picker autocompleter icon spacing (#14772)
* Fixes classname to match package and CSS rule

During the creation of block-editor the className on the autocompleter wasn’t updated. This change updates the class to use the `block-editor-` prefix. This causes the CSS to apply again thereby correcting the margin that was missing.

* Revert "Fixes classname to match package and CSS rule"

This reverts commit 28eb706.

* Editor: Revert autocompleters classnames to editor prefix

Co-Authored-By: Daniel Richards <talldan@users.noreply.github.com>

aduth added a commit that referenced this pull request Apr 16, 2019

Fix Blocker Picker autocompleter icon spacing (#14772)
* Fixes classname to match package and CSS rule

During the creation of block-editor the className on the autocompleter wasn’t updated. This change updates the class to use the `block-editor-` prefix. This causes the CSS to apply again thereby correcting the margin that was missing.

* Revert "Fixes classname to match package and CSS rule"

This reverts commit 28eb706.

* Editor: Revert autocompleters classnames to editor prefix

Co-Authored-By: Daniel Richards <talldan@users.noreply.github.com>

aduth added a commit that referenced this pull request Apr 16, 2019

Fix Blocker Picker autocompleter icon spacing (#14772)
* Fixes classname to match package and CSS rule

During the creation of block-editor the className on the autocompleter wasn’t updated. This change updates the class to use the `block-editor-` prefix. This causes the CSS to apply again thereby correcting the margin that was missing.

* Revert "Fixes classname to match package and CSS rule"

This reverts commit 28eb706.

* Editor: Revert autocompleters classnames to editor prefix

Co-Authored-By: Daniel Richards <talldan@users.noreply.github.com>

This was referenced Apr 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.