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 small visual regression with button variation preview. #12051

Merged
merged 1 commit into from Nov 19, 2018

Conversation

Projects
None yet
2 participants
@jasmussen
Contributor

jasmussen commented Nov 19, 2018

In https://github.com/WordPress/gutenberg/pull/11757/files#diff-9bc45fdf28d434e26e152546f25fd08eR101, a change was introduced to how custom placeholder text works.

Custom placeholder text is basically a duplicate version of the text, which holds the visual placeholder. The height change as linked above was added to make sure the two elements are in sync, height-wise. Which is important for when the placeholder text wraps.

The Button styles this placeholder directly, which means it changes things sligtly in this regard. The long term solution would be to refactor this slightly, so that we don't style this placeholder, but instead style a parent element in the editor. But in the mean time, this PR fixes the current markup and CSS.

Before:

screenshot 2018-11-19 at 10 48 04

After:

screenshot 2018-11-19 at 10 47 06

Fix small visual regression with button variation preview.
In https://github.com/WordPress/gutenberg/pull/11757/files#diff-9bc45fdf28d434e26e152546f25fd08eR101, a change was introduced to how custom placeholder text works.

Custom placeholder text is basically a duplicate version of the text, which holds the visual placeholder. The height change as linked above was added to make sure the two elements are in sync, height-wise. Which is important for when the placeholder text wraps.

The Button styles this placeholder directly, which means it changes things sligtly in this regard. The long term solution would be to refactor this slightly, so that we don't style this placeholder, but instead style a parent element in the editor. But in the mean time, this PR fixes the current markup and CSS.

@jasmussen jasmussen added this to the 4.5 milestone Nov 19, 2018

@jasmussen jasmussen self-assigned this Nov 19, 2018

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Nov 19, 2018

@jasmussen jasmussen referenced this pull request Nov 19, 2018

Merged

Fix/button css specificity #12005

4 of 4 tasks complete
@youknowriad

👍

@jasmussen jasmussen merged commit 8585f15 into master Nov 19, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the fix/button-variation-preview branch Nov 19, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Fix small visual regression with button variation preview. (WordPress…
…#12051)

In https://github.com/WordPress/gutenberg/pull/11757/files#diff-9bc45fdf28d434e26e152546f25fd08eR101, a change was introduced to how custom placeholder text works.

Custom placeholder text is basically a duplicate version of the text, which holds the visual placeholder. The height change as linked above was added to make sure the two elements are in sync, height-wise. Which is important for when the placeholder text wraps.

The Button styles this placeholder directly, which means it changes things sligtly in this regard. The long term solution would be to refactor this slightly, so that we don't style this placeholder, but instead style a parent element in the editor. But in the mean time, this PR fixes the current markup and CSS.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment