diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/wordads/edit.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/wordads/edit.js | 56 |
1 files changed, 56 insertions, 0 deletions
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; |