diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/wordads')
7 files changed, 422 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/wordads/constants.js b/plugins/jetpack/extensions/blocks/wordads/constants.js new file mode 100644 index 00000000..6cf647af --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/constants.js @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Path, SVG } from '@wordpress/components'; + +export const DEFAULT_FORMAT = 'mrec'; +export const AD_FORMATS = [ + { + height: 250, + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-7-2h2V7h-4v2h2z" /> + </SVG> + ), + name: __( 'Rectangle 300x250', 'jetpack' ), + tag: DEFAULT_FORMAT, + width: 300, + editorPadding: 30, + }, + { + height: 90, + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-4-4h-4v-2h2c1.1 0 2-.89 2-2V9c0-1.11-.9-2-2-2H9v2h4v2h-2c-1.1 0-2 .89-2 2v4h6v-2z" /> + </SVG> + ), + name: __( 'Leaderboard 728x90', 'jetpack' ), + tag: 'leaderboard', + width: 728, + editorPadding: 60, + }, + { + height: 50, + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-4-4v-1.5c0-.83-.67-1.5-1.5-1.5.83 0 1.5-.67 1.5-1.5V9c0-1.11-.9-2-2-2H9v2h4v2h-2v2h2v2H9v2h4c1.1 0 2-.89 2-2z" /> + </SVG> + ), + name: __( 'Mobile Leaderboard 320x50', 'jetpack' ), + tag: 'mobile_leaderboard', + width: 320, + editorPadding: 100, + }, + { + height: 600, + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <Path fill="none" d="M.04 0h24v24h-24V0z" /> + <Path d="M19.04 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16h-14V5h14v14zm-6-2h2V7h-2v4h-2V7h-2v6h4z" /> + </SVG> + ), + name: __( 'Wide Skyscraper 160x600', 'jetpack' ), + tag: 'wideskyscraper', + width: 160, + editorPadding: 30, + }, +]; diff --git a/plugins/jetpack/extensions/blocks/wordads/edit.js b/plugins/jetpack/extensions/blocks/wordads/edit.js new file mode 100644 index 00000000..2067d0cd --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/edit.js @@ -0,0 +1,56 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { BlockControls } from '@wordpress/editor'; +import { Component, Fragment } from '@wordpress/element'; +import { Placeholder, ToggleControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import FormatPicker from './format-picker'; +import { AD_FORMATS } from './constants'; +import { icon, title } from './'; + +import './editor.scss'; + +class WordAdsEdit extends Component { + handleHideMobileChange = hideMobile => { + this.props.setAttributes( { hideMobile: !! hideMobile } ); + }; + + render() { + const { attributes, setAttributes } = this.props; + const { format, hideMobile } = attributes; + const selectedFormatObject = AD_FORMATS.filter( ( { tag } ) => tag === format )[ 0 ]; + + return ( + <Fragment> + <BlockControls> + <FormatPicker + value={ format } + onChange={ nextFormat => setAttributes( { format: nextFormat } ) } + /> + </BlockControls> + <div className={ `wp-block-jetpack-wordads jetpack-wordads-${ format }` }> + <div + className="jetpack-wordads__ad" + style={ { + width: selectedFormatObject.width, + height: selectedFormatObject.height + selectedFormatObject.editorPadding, + } } + > + <Placeholder icon={ icon } label={ title } /> + <ToggleControl + checked={ Boolean( hideMobile ) } + label={ __( 'Hide ad on mobile views', 'jetpack' ) } + onChange={ this.handleHideMobileChange } + /> + </div> + </div> + </Fragment> + ); + } +} +export default WordAdsEdit; diff --git a/plugins/jetpack/extensions/blocks/wordads/editor.js b/plugins/jetpack/extensions/blocks/wordads/editor.js new file mode 100644 index 00000000..d05f4039 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/editor.js @@ -0,0 +1,7 @@ +/** + * Internal dependencies + */ +import registerJetpackBlock from '../../shared/register-jetpack-block'; +import { name, settings } from '.'; + +registerJetpackBlock( name, settings ); diff --git a/plugins/jetpack/extensions/blocks/wordads/editor.scss b/plugins/jetpack/extensions/blocks/wordads/editor.scss new file mode 100644 index 00000000..b7be4878 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/editor.scss @@ -0,0 +1,52 @@ +@import '../../shared/styles/gutenberg-colors.scss'; + +.wp-block-jetpack-wordads { + background: $white; +} + +[data-type='jetpack/wordads'][data-align='center'] .jetpack-wordads__ad { + margin: 0 auto; +} + +.jetpack-wordads__ad { + display: flex; + overflow: hidden; + flex-direction: column; + max-width: 100%; + + .components-placeholder { + flex-grow: 2; + } + + .components-toggle-control__label { + line-height: 1.4em; + } + + .components-base-control__field { + padding: 7px; + } +} + +.jetpack-wordads-leaderboard .components-placeholder { + min-height: 90px; +} + +.jetpack-wordads-mobile_leaderboard .components-placeholder { + min-height: 72px; +} + +.wp-block-jetpack-wordads__format-picker { + $active-item-outline-width: 2px; + + padding: 7px; + + // Leave space between elements for active state styling + .components-menu-item__button + .components-menu-item__button { + margin-top: $active-item-outline-width; + } + + .components-menu-item__button.is-active { + color: $dark-gray-900; + box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important; + } +} diff --git a/plugins/jetpack/extensions/blocks/wordads/format-picker.js b/plugins/jetpack/extensions/blocks/wordads/format-picker.js new file mode 100644 index 00000000..b058ab03 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/format-picker.js @@ -0,0 +1,59 @@ +/** + * External Dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Dropdown, MenuItem, NavigableMenu, Path, SVG, Toolbar } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { AD_FORMATS } from './constants'; + +const label = __( 'Pick an ad format', 'jetpack' ); + +export default function FormatPicker( { value, onChange } ) { + return ( + <Dropdown + position="bottom right" + renderToggle={ ( { onToggle, isOpen } ) => { + return ( + <Toolbar + controls={ [ + { + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z" /> + </SVG> + ), + title: label, + onClick: onToggle, + extraProps: { 'aria-expanded': isOpen }, + className: 'wp-block-jetpack-wordads__format-picker-icon', + }, + ] } + /> + ); + } } + renderContent={ ( { onClose } ) => ( + <NavigableMenu className="wp-block-jetpack-wordads__format-picker"> + { AD_FORMATS.map( ( { tag, name, icon } ) => ( + <MenuItem + className={ tag === value ? 'is-active' : undefined } + icon={ icon } + isSelected={ tag === value } + key={ tag } + onClick={ () => { + onChange( tag ); + onClose(); + } } + role="menuitemcheckbox" + > + { name } + </MenuItem> + ) ) } + </NavigableMenu> + ) } + /> + ); +} diff --git a/plugins/jetpack/extensions/blocks/wordads/index.js b/plugins/jetpack/extensions/blocks/wordads/index.js new file mode 100644 index 00000000..7a6a0238 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/index.js @@ -0,0 +1,66 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { ExternalLink, Path, SVG } from '@wordpress/components'; +import { Fragment } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import { DEFAULT_FORMAT } from './constants'; + +export const name = 'wordads'; +export const title = __( 'Ad', 'jetpack' ); + +export const icon = ( + <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M12,8H4A2,2 0 0,0 2,10V14A2,2 0 0,0 4,16H5V20A1,1 0 0,0 6,21H8A1,1 0 0,0 9,20V16H12L17,20V4L12,8M15,15.6L13,14H4V10H13L15,8.4V15.6M21.5,12C21.5,13.71 20.54,15.26 19,16V8C20.53,8.75 21.5,10.3 21.5,12Z" /> + </SVG> +); + +export const settings = { + title, + + description: ( + <Fragment> + <p>{ __( 'Earn income by adding high quality ads to your post', 'jetpack' ) }</p> + <ExternalLink href="https://wordads.co/"> + { __( 'Learn all about WordAds', 'jetpack' ) } + </ExternalLink> + </Fragment> + ), + + icon, + attributes: { + align: { + type: 'string', + default: 'center', + }, + format: { + type: 'string', + default: DEFAULT_FORMAT, + }, + hideMobile: { + type: 'boolean', + default: false, + }, + }, + + category: 'jetpack', + + keywords: [ __( 'ads', 'jetpack' ), 'WordAds', __( 'Advertisement', 'jetpack' ) ], + + supports: { + align: [ 'left', 'center', 'right' ], + alignWide: false, + className: false, + customClassName: false, + html: false, + reusable: false, + }, + edit, + save: () => null, +}; diff --git a/plugins/jetpack/extensions/blocks/wordads/wordads.php b/plugins/jetpack/extensions/blocks/wordads/wordads.php new file mode 100644 index 00000000..8cb8ea2a --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/wordads.php @@ -0,0 +1,121 @@ +<?php //phpcs:ignore WordPress.Files.FileName.InvalidClassFileName +/** + * Ads Block. + * + * @since 7.1.0 + * + * @package Jetpack + */ +class Jetpack_WordAds_Gutenblock { + const BLOCK_NAME = 'jetpack/wordads'; + + /** + * Check if site is on WP.com Simple. + * + * @return bool + */ + private static function is_wpcom() { + return defined( 'IS_WPCOM' ) && IS_WPCOM; + } + /** + * Check if the WordAds module is active. + * + * @return bool + */ + private static function is_jetpack_module_active() { + return method_exists( 'Jetpack', 'is_module_active' ) && Jetpack::is_module_active( 'wordads' ); + } + + /** + * Check if the site is approved for ads for WP.com Simple sites. + * + * @return bool + */ + private static function is_available() { + if ( self::is_wpcom() ) { + return has_any_blog_stickers( array( 'wordads', 'wordads-approved', 'wordads-approved-misfits' ), get_current_blog_id() ); + } + + return self::is_jetpack_module_active(); + } + + /** + * Register the WordAds block. + */ + public static function register() { + if ( self::is_available() ) { + jetpack_register_block( + self::BLOCK_NAME, + array( + 'render_callback' => array( 'Jetpack_WordAds_Gutenblock', 'gutenblock_render' ), + ) + ); + } + } + + /** + * Set if the WordAds block is available. + */ + public static function set_availability() { + if ( ! self::is_available() ) { + Jetpack_Gutenberg::set_extension_unavailable( self::BLOCK_NAME, 'WordAds unavailable' ); + return; + } + // Make the block available. Just in case it wasn't registed before. + Jetpack_Gutenberg::set_extension_available( self::BLOCK_NAME ); + } + + /** + * Renders the WordAds block. + * + * @param array $attr Block attributes. + * + * @return string Block HTML. + */ + public static function gutenblock_render( $attr ) { + global $wordads; + + /** This filter is already documented in modules/wordads/wordads.php `insert_ad()` */ + if ( empty( $wordads ) || is_feed() || apply_filters( 'wordads_inpost_disable', false ) ) { + return ''; + } + + if ( ! empty( $attr['hideMobile'] ) && $wordads->params->is_mobile() ) { + return ''; + } + + if ( ! self::is_wpcom() && $wordads->option( 'wordads_house' ) ) { + return $wordads->get_ad( 'inline', 'house' ); + } + + // section_id is mostly depricated at this point, but it helps us (devs) keep track of which ads end up where + // 6 is to keep track of gutenblock ads. + $section_id = $wordads->params->blog_id . '6'; + $align = 'center'; + if ( isset( $attr['align'] ) && in_array( $attr['align'], array( 'left', 'center', 'right' ), true ) ) { + $align = $attr['align']; + } + $align = 'align' . $align; + + $ad_tag_ids = $wordads->get_ad_tags(); + $format = 'mrec'; + if ( isset( $attr['format'] ) && in_array( $attr['format'], array_keys( $ad_tag_ids ), true ) ) { + $format = $attr['format']; + } + + $height = $ad_tag_ids[ $format ]['height']; + $width = $ad_tag_ids[ $format ]['width']; + $snippet = $wordads->get_ad_snippet( $section_id, $height, $width, 'gutenberg', $wordads->get_solo_unit_css() ); + return $wordads->get_ad_div( 'inline', $snippet, array( $align ) ); + } +} + +add_action( + 'init', + array( 'Jetpack_WordAds_Gutenblock', 'register' ) +); + +add_action( + 'jetpack_register_gutenberg_extensions', + array( 'Jetpack_WordAds_Gutenblock', 'set_availability' ) +); |