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

[DustinHartzler]

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:

Adding a 1px border around the input field and setting the input text color to black makes it legible:

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.

[jesin]

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

[jesin]

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

[lancewillett]

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

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

[DustinHartzler]

Everything looks good!

I've tested the patch and it works perfectly.

[lancewillett]

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.

[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.

[lancewillett]

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.

[lancewillett]

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

[jesin]

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.

[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.

[nvwd]

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.

[jesin]

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.

[lancewillett]

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.

[obenland]

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.

[lancewillett]

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.

[lancewillett]

In 28663:

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