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

Improve margin within the media replace popover #24309

Merged
merged 1 commit into from
Jul 31, 2020

Conversation

noahshrader
Copy link
Contributor

Description

Currently, there is a bottom margin placed on the replace media menu to create space between menu items and the "Current media URL" container. When the "Current media URL" container is not shown, the bottom margin of the menu persists, causing there to be excessive space at the bottom of the popover.

This commit moves the margin from the bottom of the media replace menu to the top of the media replace url input so that the popover spacing stays consistent when the media replace URL input is not shown (the Cover block instance, for example)

How has this been tested?

Tested the change with the following browser on MacOS:

  • Chrome 83.0.4103.116
  • Firefox 79
  • Safari 13.1.1

Screenshots

Before

Screen Shot 2020-07-31 at 8 43 44 AM

After

Screen Shot 2020-07-31 at 8 44 16 AM

Types of changes

Style/CSS adjustment

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

This commit moves the margin from the bottom of the media replace menu to the top of the media replace url input so that the popover spacing stays consistent when the media replace URL input is not shown (the Cover block instance, for example)
@noahshrader noahshrader added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Jul 31, 2020
@draganescu draganescu added [Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended labels Jul 31, 2020
@noahshrader noahshrader added the [Block] Cover Affects the Cover Block - used to display content laid over a background image label Jul 31, 2020
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Tested and works as described! :shipit:

@draganescu draganescu merged commit ab49043 into WordPress:master Jul 31, 2020
@github-actions github-actions bot added this to the Gutenberg 8.7 milestone Jul 31, 2020
@noahshrader noahshrader deleted the noah/media-replace-margin branch July 31, 2020 14:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Image Affects the Image Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants