@automattic/newspack-blocks 1.53.0 → 1.54.0

package/src/setup/placeholder-blocks.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { getBlockType, registerBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { withDispatch } from '@wordpress/data';
+import { Icon, pullquote } from '@wordpress/icons';
+
+const placeholderBlocks = {
+	'newspack-ads/ad-unit': {
+		title: __( 'Ad Unit', 'newspack-blocks' ),
+		description: __( 'Render an ad unit from your inventory.', 'newspack-blocks' ),
+		icon: pullquote,
+		message: __( 'Place ad units inside your page by installing Newspack Ads.', 'newspack-blocks' ),
+		url: 'https://newspack.pub/support/advertising/',
+	},
+};
+
+function registerPlaceholderBlock( blockName, { title, description, icon, message, url } ) {
+	if ( getBlockType( blockName ) ) {
+		return;
+	}
+	title = title || blockName.split( '/' ).pop();
+	const edit = ( { clientId, removeBlocks } ) => {
+		const blockProps = useBlockProps(); // eslint-disable-line
+		return (
+			<div { ...blockProps }>
+				<div className="newspack-blocks-placeholder-block">
+					<div className="newspack-blocks-placeholder-block__label">
+						{ icon && <Icon icon={ icon } /> }
+						{ title }
+					</div>
+					<p>
+						<strong>
+							{ sprintf(
+								// translators: %s is the block name.
+								__( 'The "%s" block is currently not available.', 'newspack-blocks' ),
+								title
+							) }
+						</strong>
+					</p>
+					{ message && <p>{ message }</p> }
+					<div className="newspack-blocks-placeholder-block__buttons">
+						{ url && (
+							<Button variant="primary" target="_blank" rel="external" href={ url }>
+								{ __( 'Visit Plugin Page', 'newspack-blocks' ) }
+							</Button>
+						) }
+						<Button variant="secondary" isDestructive onClick={ () => removeBlocks( clientId ) }>
+							{ __( 'Remove Block', 'newspack-blocks' ) }
+						</Button>
+					</div>
+				</div>
+			</div>
+		);
+	};
+	registerBlockType( blockName, {
+		title,
+		description,
+		icon,
+		edit: withDispatch( dispatch => ( {
+			removeBlocks: dispatch( 'core/block-editor' ).removeBlocks,
+		} ) )( edit ),
+		supports: {
+			html: false,
+			lock: false,
+			reusable: false,
+			inserter: false,
+			defaultStylePicker: false,
+			customClassName: false,
+			className: false,
+			alignWide: false,
+			align: false,
+			anchor: false,
+		},
+	} );
+}
+
+for ( const blockName in placeholderBlocks ) {
+	registerPlaceholderBlock( blockName, placeholderBlocks[ blockName ] );
+}

package/src/shared/sass/_mixins.scss

@@ -1,30 +1,32 @@
+@use './variables';
+
 @mixin media( $res ) {
 	@if mobile == $res {
-		@media only screen and ( min-width: $mobile_width ) {
+		@media only screen and ( min-width: variables.$mobile_width ) {
 			@content;
 		}
 	}
 
 	@if tabletonly == $res {
-		@media only screen and ( max-width: #{ $tablet_width - 1 } ) {
+		@media only screen and ( max-width: #{ variables.$tablet_width - 1 } ) {
 			@content;
 		}
 	}
 
 	@if tablet == $res {
-		@media only screen and ( min-width: $tablet_width ) {
+		@media only screen and ( min-width: variables.$tablet_width ) {
 			@content;
 		}
 	}
 
 	@if desktop == $res {
-		@media only screen and ( min-width: $desktop_width ) {
+		@media only screen and ( min-width: variables.$desktop_width ) {
 			@content;
 		}
 	}
 
 	@if wide == $res {
-		@media only screen and ( min-width: $wide_width ) {
+		@media only screen and ( min-width: variables.$wide_width ) {
 			@content;
 		}
 	}

package/src/types/@wordpress/block-editor.d.ts

@@ -0,0 +1 @@
+declare module '@wordpress/block-editor'

package/src/types/@wordpress/components.d.ts

@@ -0,0 +1 @@
+declare module '@wordpress/components'

package/src/types/{index.ts → index.d.ts}

@@ -3,7 +3,11 @@ declare global {
 		wpcomGutenberg: {
 			blogPublic: string;
 		};
-		newspack_blocks_data: { assets_path: string };
+		newspack_blocks_data: {
+			assets_path: string;
+			is_rendering_streamlined_block?: boolean;
+			streamlined_block_stripe_badge?: string;
+		};
 	}
 
 	type PostId = number;

package/src/types/newspack-components.d.ts

@@ -0,0 +1,7 @@
+declare module 'newspack-components' {
+	function useObjectState<StateObject>(
+		object: StateObject
+	): [object: StateObject, (object: Partial<StateObject>) => void];
+	const hooks = { useObjectState };
+	export { hooks };
+}

package/vendor/autoload.php

@@ -4,4 +4,4 @@
 
 require_once __DIR__ . '/composer/autoload_real.php';
 
-return ComposerAutoloaderInit23e7353bf7a8e11d2c7c2cc21cce61d6::getLoader();
+return ComposerAutoloaderInit49fbd6ec7deee2cfafc0623f87888fe4::getLoader();

package/vendor/composer/autoload_real.php

@@ -2,7 +2,7 @@
 
 // autoload_real.php @generated by Composer
 
-class ComposerAutoloaderInit23e7353bf7a8e11d2c7c2cc21cce61d6
+class ComposerAutoloaderInit49fbd6ec7deee2cfafc0623f87888fe4
 {
     private static $loader;
 
@@ -22,15 +22,15 @@ class ComposerAutoloaderInit23e7353bf7a8e11d2c7c2cc21cce61d6
             return self::$loader;
         }
 
-        spl_autoload_register(array('ComposerAutoloaderInit23e7353bf7a8e11d2c7c2cc21cce61d6', 'loadClassLoader'), true, true);
+        spl_autoload_register(array('ComposerAutoloaderInit49fbd6ec7deee2cfafc0623f87888fe4', 'loadClassLoader'), true, true);
         self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(\dirname(__FILE__)));
-        spl_autoload_unregister(array('ComposerAutoloaderInit23e7353bf7a8e11d2c7c2cc21cce61d6', 'loadClassLoader'));
+        spl_autoload_unregister(array('ComposerAutoloaderInit49fbd6ec7deee2cfafc0623f87888fe4', 'loadClassLoader'));
 
         $useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded());
         if ($useStaticLoader) {
             require __DIR__ . '/autoload_static.php';
 
-            call_user_func(\Composer\Autoload\ComposerStaticInit23e7353bf7a8e11d2c7c2cc21cce61d6::getInitializer($loader));
+            call_user_func(\Composer\Autoload\ComposerStaticInit49fbd6ec7deee2cfafc0623f87888fe4::getInitializer($loader));
         } else {
             $map = require __DIR__ . '/autoload_namespaces.php';
             foreach ($map as $namespace => $path) {

package/vendor/composer/autoload_static.php

@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInit23e7353bf7a8e11d2c7c2cc21cce61d6
+class ComposerStaticInit49fbd6ec7deee2cfafc0623f87888fe4
 {
     public static $classMap = array (
         'Composer\\InstalledVersions' => __DIR__ . '/..' . '/composer/InstalledVersions.php',
@@ -13,7 +13,7 @@ class ComposerStaticInit23e7353bf7a8e11d2c7c2cc21cce61d6
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->classMap = ComposerStaticInit23e7353bf7a8e11d2c7c2cc21cce61d6::$classMap;
+            $loader->classMap = ComposerStaticInit49fbd6ec7deee2cfafc0623f87888fe4::$classMap;
 
         }, null, ClassLoader::class);
     }

package/vendor/composer/installed.php

@@ -5,7 +5,7 @@
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
-        'reference' => 'f7f4a31da32051a3cdbb44ab64515f863368e08b',
+        'reference' => 'd0c5ef37143589ab35d9926bda95d6de2e196b63',
         'name' => 'automattic/newspack-blocks',
         'dev' => false,
     ),
@@ -16,7 +16,7 @@
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),
-            'reference' => 'f7f4a31da32051a3cdbb44ab64515f863368e08b',
+            'reference' => 'd0c5ef37143589ab35d9926bda95d6de2e196b63',
             'dev_requirement' => false,
         ),
     ),

package/webpack.config.js

@@ -2,6 +2,7 @@
  **** WARNING: No ES6 modules here. Not transpiled! ****
  */
 /* eslint-disable import/no-nodejs-modules */
+/* eslint-disable @typescript-eslint/no-var-requires */
 
 /**
  * External dependencies
@@ -45,12 +46,15 @@ const editorScript = [
 	...blockScripts( 'editor', path.join( __dirname, 'src' ), blocks ),
 ];
 
+const placeholderBlocksScript = path.join( __dirname, 'src', 'setup', 'placeholder-blocks' );
+
 const blockStylesScript = [ path.join( __dirname, 'src', 'block-styles', 'view' ) ];
 
 const webpackConfig = getBaseWebpackConfig(
 	{ WP: true },
 	{
 		entry: {
+			placeholder_blocks: placeholderBlocksScript,
 			editor: editorScript,
 			block_styles: blockStylesScript,
 			donateStreamlined: path.join( __dirname, 'src/blocks/donate/streamlined' ),