Skip to content

Ads Gutenblock: Add "Hide ad on mobile views" toggle#31608

Merged
dbspringer merged 1 commit intomasterfrom
update/ad-block-remove-on-mobile
Mar 25, 2019
Merged

Ads Gutenblock: Add "Hide ad on mobile views" toggle#31608
dbspringer merged 1 commit intomasterfrom
update/ad-block-remove-on-mobile

Conversation

@dbspringer
Copy link
Copy Markdown
Member

@dbspringer dbspringer commented Mar 20, 2019

Sometimes a tall/wide ad unit makes sense on Desktop, but not a mobile impression. It makes sense to include an option to disable the ad on a mobile impression or replace it with one that's more mobile friendly.

Jetpack PR: Automattic/jetpack#11644
Addresses: #30870

Screen Shot 2019-03-25 at 11 45 04 AM

Changes proposed in this Pull Request

  • Add "Hide ad on mobile views" toggle

Testing instructions

  • Before installing the update make a post containing some "old" Ads blocks.
  • Download & build Jetpack branch: https://github.com/Automattic/jetpack/tree/update/ad-block-remove-on-mobile
  • Open Calypso branch, compile blocks e.g. npx lerna run build --stream --scope='@automattic/jetpack-blocks' && rsync -a --delete packages/jetpack-blocks/dist/ ../jetpack/_inc/blocks/
  • On WordAds approved site add a unit and toggle Hide ad on mobile views
  • View page via favorite mobile impression tester, see ad is missing.
  • Edit post with "old" blocks and verify the blocks have updated successfully.

Fixes #

@dbspringer dbspringer added Jetpack [Status] In Progress WordAds [Goal] Gutenberg Working towards full integration with Gutenberg labels Mar 20, 2019
@dbspringer dbspringer added this to the Jetpack: 7.2 milestone Mar 20, 2019
@dbspringer dbspringer self-assigned this Mar 20, 2019
@matticbot
Copy link
Copy Markdown
Contributor

@dbspringer dbspringer added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR and removed [Status] In Progress labels Mar 21, 2019
@simison
Copy link
Copy Markdown
Member

simison commented Mar 21, 2019

@thomasguillot do you have time to help here with design review?

cc @scruffian

Copy link
Copy Markdown
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

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

Code looks good and works well 👍

Let's get design review.

Comment thread packages/jetpack-blocks/src/blocks/wordads/editor.scss
@sirreal sirreal removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 25, 2019
Copy link
Copy Markdown
Contributor

@thomasguillot thomasguillot left a comment

Choose a reason for hiding this comment

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

Can we have the toggle outside and underneath the placeholder? Also left-aligned rather than centred.

@simison
Copy link
Copy Markdown
Member

simison commented Mar 25, 2019 via email

@dbspringer dbspringer force-pushed the update/ad-block-remove-on-mobile branch from 1cb1ddd to 83b1218 Compare March 25, 2019 18:16
@dbspringer
Copy link
Copy Markdown
Member Author

Is something like this what you're talking about @thomasguillot?

Screen Shot 2019-03-25 at 11 33 03 AM

Placing control outside placeholder
@dbspringer dbspringer force-pushed the update/ad-block-remove-on-mobile branch from 87c0329 to 77a9116 Compare March 25, 2019 18:43
@thomasguillot
Copy link
Copy Markdown
Contributor

thomasguillot commented Mar 25, 2019

Is something like this what you're talking about @thomasguillot?

Screen Shot 2019-03-25 at 11 33 03 AM

This look great but it could look even better if we remove "Advertisements" and "REPORT THIS AD". As is, it clashes a bit with the toggle (can be done in a separate PR)

@dbspringer dbspringer merged commit 7bacf7b into master Mar 25, 2019
@dbspringer dbspringer deleted the update/ad-block-remove-on-mobile branch March 25, 2019 19:03
@matticbot matticbot removed the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Mar 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Goal] Gutenberg Working towards full integration with Gutenberg Jetpack WordAds

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants