WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#27677 closed defect (bug) (fixed)

Twenty Fourteen: Input text field missing border when using Jetpack subscription form shortcode

Reported by: DustinHartzler Owned by: lancewillett
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

When using [jetpack_subscription_form] shortcode to display a email signup form on a page, the box is not outlined and the text is set to white, which makes it impossible to see / fill out the form:

https://i.cloudup.com/_Q1HyWwEn2.png

Adding a 1px border around the input field and setting the input text color to black makes it legible:
https://i.cloudup.com/Pcakk5aS83.png

The CSS is below and is using the .widget class. In this particular theme, the styling works for sidebar widgets (since the default sidebar is black).

.widget input,
.widget textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 16px;
	padding: 1px 2px 2px 4px;
}

Another widget style is necessary for widgets in the main column.

Attachments (1)

27677.diff (719 bytes) - added by jesin 7 years ago.
Apply .widget input & textarea styles only if they are inside .widget-area

Download all attachments as: .zip

Change History (18)

@jesin
7 years ago

Apply .widget input & textarea styles only if they are inside .widget-area

#1 @jesin
7 years ago

  • Keywords has-patch added

After applying this patch the jetpack input field should look similar to those in the comment form.

#2 @lancewillett
7 years ago

  • Keywords reporter-feedback added
  • Milestone changed from Awaiting Review to 3.9

Hi DustinHartzler! Thanks for the report. Hi jesin -- thank you for the patch.

DustinHartzsler: can you please test the patch and report back?

#3 @DustinHartzler
7 years ago

  • Keywords reporter-feedback removed

Everything looks good!

I've tested the patch and it works perfectly.

#4 @lancewillett
7 years ago

One side-effect of the patch could be other areas that override the default form styles might stop working since this change is more specific.

Might be good to try another patch that only fixes the in-page content and leave existing styles alone.

#5 follow-up: @lancewillett
7 years ago

DustinHartzler, can you share the steps to repeat the original report? How to enable the correct Jetpack settings and shortcode to see the issue? I'm having trouble getting the shortcode to work.

#6 @lancewillett
7 years ago

I think we should consider this a Jetpack thing -- might not be a core bug at all. Why is the Jetpack shortcode adding the "widget" class if it's added to a page or post? That seems wrong.

#7 @lancewillett
7 years ago

  • Keywords close added; has-patch removed

I suggest we report this as a bug in Jetpack and close this ticket as "invalid".

#8 in reply to: ↑ 5 @jesin
7 years ago

Replying to lancewillett:

DustinHartzler, can you share the steps to repeat the original report? How to enable the correct Jetpack settings and shortcode to see the issue? I'm having trouble getting the shortcode to work.

Make sure Jetpack is connected with your wordpress.com account. Only then does the subscription widget work.

#9 follow-up: @DustinHartzler
7 years ago

It also is a problem on WordPress.com.

There is a shortcode on WordPress.com sites [blog_subscription_form] that it's broken in Twenty Fourteen theme, so I don't think this is 100% related to Jetpack.

#10 @nvwd
7 years ago

The styles that cause the shortcode output to 'disappear' are in the Twenty Fourteen style. Setting text and borders to white are specific to dark/black backgrounds like the sidebar in Twenty Fourteen.

The patch makes the color change more specific to form fields within a widget-area and doesn't make the color changes to shortcode output within the content.

#11 in reply to: ↑ 9 ; follow-up: @jesin
7 years ago

Replying to DustinHartzler:

It also is a problem on WordPress.com.

There is a shortcode on WordPress.com sites [blog_subscription_form] that it's broken in Twenty Fourteen theme, so I don't think this is 100% related to Jetpack.

That is because that shortcode too uses the widget class. The HTML output of both the jetpack shortcode and [blog_subscription_form] seem similar. After all jetpack was built to bring in some features of WP.com.

Whether it is a bad practice to use the widget class in non-widgetized areas is something the devs have to decide.

#12 in reply to: ↑ 11 ; follow-up: @lancewillett
7 years ago

Replying to jesin:

Whether it is a bad practice to use the widget class in non-widgetized areas is something the devs have to decide.

Yes, that's what I was getting at. The theme shouldn't have to work around a bad practice in a plugin — I think this should be fixed at the origin to not use widget class when the output isn't in a widget.

#13 @nacin
7 years ago

  • Milestone changed from 3.9 to Awaiting Review

#14 in reply to: ↑ 12 ; follow-up: @obenland
7 years ago

  • Keywords close removed
  • Version set to 3.8

Replying to lancewillett:

I think this should be fixed at the origin to not use widget class when the output isn't in a widget.

Just because it's not part of a sidebar, it doesn't mean it's not a widget. Since we have the template tag the_widget(), widgets can be displayed anywhere.

#15 in reply to: ↑ 14 @lancewillett
7 years ago

  • Keywords has-patch added

Replying to obenland:

Just because it's not part of a sidebar, it doesn't mean it's not a widget. Since we have the template tag the_widget(), widgets can be displayed anywhere.

Hmm, know any themes that style for that? In my experience themes expect widgets to be in widget areas.

I guess we can try the suggested patch, and let it soak through the 4.0 cycle and get testing eyes on it.

#16 @lancewillett
7 years ago

  • Milestone changed from Awaiting Review to 4.0

#17 @lancewillett
7 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 28663:

Twenty Fourteen: apply .widget input and textarea styles only if they are inside .widget-area. Props jesin, fixes #27677.

Note: See TracTickets for help on using tickets.