Responsive Ads In Text Content

[jeffersonrabb]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

#19 introduced responsive ads, but only for full-width positions: Above Header, Below Header, Above Footer. A common use case is to place ads in the content using Super Cool Ad Inserter. If media queries responded to the width of an element's container this would be an easy fix, but unfortunately this is not possible. Instead, this branch uses a series of filters to allow the theme to control the media queries based on the width of the theme's text column. These are the three new filters:

newspack_ads_maybe_use_responsive_placement: whether responsive logic should be applied to a particular Ad placement.
newspack_ads_breakpoint: allows themes to alter breakpoints based on the width of the content column.
newspack_ads_should_have_min_width: allows theme to determine the conditions where min-width should be excluded from the media query.

This PR should be tested with Automattic/newspack-theme#839,

Closes #30.

How to test the changes in this Pull Request:

1. Create an Ad Unit in Newpack->Advertising with at least two sizes, one optimized for desktop and one for mobile. My testing focused on a unit with 728x90 and 300x250 varients.
2. Install Super Cool Ad Inserter plugin.
3. Navigate to Appearance->Widgets. In "Inserted Ad Position 1" insert Newspack Ads, and select the unit created in step 1.
4. Create posts with each of the three Newspack Theme templates. Each should have at least six paragraphs to ensure the ad will be properly inserted.
5. View all three posts at a variety of viewport widths. Verify the unit shown is appropriate to the browser width. https://cloudup.com/cmEV4zGFJIC

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[jeffersonrabb]

In a355613 I've simplified the logic so there is only one media query filter: newspack_ads_media_query_for_size

This is used to filter the media query for one size of an ad unit. The theme can alter the max/min width for a particular size based on theme considerations like sidebar presence and margins.

[adekbadek]

LGTM

[matticbot]

🎉 This PR is included in version 1.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀