Update block icons to use Gutenberg style instead of Material

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.cache
 phpcs.xml
 phpunit.xml
 Thumbs.db

package.json

@@ -4,12 +4,10 @@
   "main": "Gruntfile.js",
   "author": "Automattic",
   "devDependencies": {
-    "@automattic/calypso-build": "^5.1.0",
+    "@automattic/calypso-build": "^6.3.0",
     "@babel/core": "^7.4.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@material-ui/core": "^4.9.2",
-    "@material-ui/icons": "^4.9.1",
     "@semantic-release/changelog": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
     "@wordpress/api-fetch": "^3.8.0",
@@ -61,6 +59,7 @@
     "@wordpress/hooks": "^2.6.0",
     "@wordpress/html-entities": "^2.5.0",
     "@wordpress/i18n": "^3.7.0",
+    "@wordpress/icons": "^2.10.0",
     "@wordpress/keycodes": "^2.9.0",
     "@wordpress/plugins": "^2.12.0",
     "lodash": "^4.17.15",

src/blocks/carousel/index.js

@@ -1,12 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { __ } from '@wordpress/i18n';
 import edit from './edit';
 
 /**
@@ -18,17 +18,23 @@ import './editor.scss';
 export const name = 'carousel';
 export const title = __( 'Post Carousel' );
 
-/* From https://material.io/tools/icons */
 export const icon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M2 6h4v11H2zm5 13h10V4H7v15zM9 6h6v11H9V6zm9 0h4v11h-4z" fill="#36f" />
+		<Path
+			clipRule="evenodd"
+			d="M7 18V6a2 2 0 012-2h6a2 2 0 012 2v12a2 2 0 01-2 2H9a2 2 0 01-2-2zM8.5 6v12a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V6a.5.5 0 00-.5-.5H9a.5.5 0 00-.5.5z"
+			fillRule="evenodd"
+		/>
+		<Path d="M4 18.5v-13h1.5v13zM18.5 5.5v13H20v-13z" />
 	</SVG>
 );
 
 export const settings = {
 	title,
-	icon,
+	icon: {
+		src: icon,
+		foreground: '#36f',
+	},
 	category: 'newspack',
 	keywords: [ __( 'posts' ), __( 'slideshow' ), __( 'carousel' ) ],
 	description: __( 'A carousel of posts.' ),

src/blocks/donate/index.js

@@ -1,8 +1,8 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Icon, payment } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,20 +18,12 @@ import './view.scss';
 export const name = 'donate';
 export const title = __( 'Donate', 'newspack-blocks' );
 
-/* From https://material.io/tools/icons */
-export const icon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path
-			d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"
-			fill="#36f"
-		/>
-	</SVG>
-);
-
 export const settings = {
 	title,
-	icon,
+	icon: {
+		src: <Icon icon={ payment } />,
+		foreground: '#36f',
+	},
 	category: 'newspack',
 	keywords: [
 		__( 'donate', 'newspack-blocks' ),

src/blocks/homepage-articles/edit.js

@@ -50,6 +50,16 @@ import {
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Icon,
+	formatListBullets,
+	fullscreen,
+	grid,
+	image,
+	postFeaturedImage,
+	pullLeft,
+	pullRight,
+} from '@wordpress/icons';
 
 let IS_SUBTITLE_SUPPORTED_IN_THEME;
 if (
@@ -60,39 +70,33 @@ if (
 	IS_SUBTITLE_SUPPORTED_IN_THEME = true;
 }
 
-/* From https://material.io/tools/icons */
 const landscapeIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z" />
+		<Path
+			clipRule="evenodd"
+			d="M18.714 7.5H5.286a.786.786 0 00-.786.786v7.428c0 .434.352.786.786.786h13.428a.786.786 0 00.786-.786V8.286a.786.786 0 00-.786-.786zM5.286 6A2.286 2.286 0 003 8.286v7.428A2.286 2.286 0 005.286 18h13.428A2.286 2.286 0 0021 15.714V8.286A2.286 2.286 0 0018.714 6H5.286z"
+			fillRule="evenodd"
+		/>
 	</SVG>
 );
 
 const portraitIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14z" />
+		<Path
+			clipRule="evenodd"
+			d="M15.714 4.5H8.286a.786.786 0 00-.786.786v13.428c0 .434.352.786.786.786h7.428a.786.786 0 00.786-.786V5.286a.786.786 0 00-.786-.786zM8.286 3A2.286 2.286 0 006 5.286v13.428A2.286 2.286 0 008.286 21h7.428A2.286 2.286 0 0018 18.714V5.286A2.286 2.286 0 0015.714 3H8.286z"
+			fillRule="evenodd"
+		/>
 	</SVG>
 );
 
 const squareIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z" />
-	</SVG>
-);
-
-const uncroppedIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z" />
-	</SVG>
-);
-
-const coverIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
-		<Path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" />
+		<Path
+			clipRule="evenodd"
+			d="M18.714 4.5H5.286a.786.786 0 00-.786.786v13.428c0 .434.352.786.786.786h13.428a.786.786 0 00.786-.786V5.286a.786.786 0 00-.786-.786zM5.286 3A2.286 2.286 0 003 5.286v13.428A2.286 2.286 0 005.286 21h13.428A2.286 2.286 0 0021 18.714V5.286A2.286 2.286 0 0018.714 3H5.286z"
+			fillRule="evenodd"
+		/>
 	</SVG>
 );
 
@@ -481,8 +485,6 @@ class Edit extends Component {
 						onChange={ _typeScale => setAttributes( { typeScale: _typeScale } ) }
 						min={ 1 }
 						max={ 10 }
-						beforeIcon="editor-textcolor"
-						afterIcon="editor-textcolor"
 						required
 					/>
 				</PanelBody>
@@ -616,13 +618,13 @@ class Edit extends Component {
 
 		const blockControls = [
 			{
-				icon: 'list-view',
+				icon: <Icon icon={ formatListBullets } />,
 				title: __( 'List View', 'newspack-blocks' ),
 				onClick: () => setAttributes( { postLayout: 'list' } ),
 				isActive: postLayout === 'list',
 			},
 			{
-				icon: 'grid-view',
+				icon: <Icon icon={ grid } />,
 				title: __( 'Grid View', 'newspack-blocks' ),
 				onClick: () => setAttributes( { postLayout: 'grid' } ),
 				isActive: postLayout === 'grid',
@@ -631,25 +633,25 @@ class Edit extends Component {
 
 		const blockControlsImages = [
 			{
-				icon: 'align-none',
+				icon: <Icon icon={ postFeaturedImage } />,
 				title: __( 'Show media on top', 'newspack-blocks' ),
 				isActive: mediaPosition === 'top',
 				onClick: () => setAttributes( { mediaPosition: 'top' } ),
 			},
 			{
-				icon: 'align-pull-left',
+				icon: <Icon icon={ pullLeft } />,
 				title: __( 'Show media on left', 'newspack-blocks' ),
 				isActive: mediaPosition === 'left',
 				onClick: () => setAttributes( { mediaPosition: 'left' } ),
 			},
 			{
-				icon: 'align-pull-right',
+				icon: <Icon icon={ pullRight } />,
 				title: __( 'Show media on right', 'newspack-blocks' ),
 				isActive: mediaPosition === 'right',
 				onClick: () => setAttributes( { mediaPosition: 'right' } ),
 			},
 			{
-				icon: coverIcon,
+				icon: <Icon icon={ image } />,
 				title: __( 'Show media behind', 'newspack-blocks' ),
 				isActive: mediaPosition === 'behind',
 				onClick: () => setAttributes( { mediaPosition: 'behind' } ),
@@ -676,7 +678,7 @@ class Edit extends Component {
 				onClick: () => setAttributes( { imageShape: 'square' } ),
 			},
 			{
-				icon: uncroppedIcon,
+				icon: <Icon icon={ fullscreen } />,
 				title: __( 'Uncropped', 'newspack-blocks' ),
 				isActive: imageShape === 'uncropped',
 				onClick: () => setAttributes( { imageShape: 'uncropped' } ),

src/blocks/homepage-articles/editor.scss

@@ -2,20 +2,6 @@
 @import '../../shared/sass/placeholder';
 @import '../../shared/sass/colors';
 
-.type-scale-slider {
-	.dashicon {
-		height: 16px;
-		width: 16px;
-	}
-
-	input + .dashicon {
-		height: 24px;
-		margin-left: 10px;
-		margin-right: 0;
-		width: 24px;
-	}
-}
-
 .wpnbha {
 	article {
 		.entry-title {

src/blocks/homepage-articles/index.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-import { createBlock } from '@wordpress/blocks';
-
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
+import { Path, SVG } from '@wordpress/components';
 import { applyFilters } from '@wordpress/hooks';
 import { __, _x } from '@wordpress/i18n';
 
@@ -28,20 +24,24 @@ export { name };
 
 export const title = __( 'Homepage Posts', 'newspack-blocks' );
 
-/* From https://material.io/tools/icons */
 export const icon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<Path d="M0 0h24v24H0z" fill="none" />
+		<Path d="M6.5 14.25H11v-1.5H6.5zM14.5 11.25h-8v-1.5h8zM6.5 8.25h8v-1.5h-8z" />
 		<Path
-			d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM10 9h8v2h-8zm0 3h4v2h-4zm0-6h8v2h-8z"
-			fill="#36f"
+			clipRule="evenodd"
+			d="M4.625 3C3.728 3 3 3.728 3 4.625v11.75C3 17.272 3.728 18 4.625 18h11.75c.897 0 1.625-.728 1.625-1.625V4.625C18 3.728 17.272 3 16.375 3zm11.75 1.5H4.625a.125.125 0 00-.125.125v11.75c0 .069.056.125.125.125h11.75a.125.125 0 00.125-.125V4.625a.125.125 0 00-.125-.125z"
+			fillRule="evenodd"
 		/>
+		<Path d="M20.25 8v11c0 .69-.56 1.25-1.249 1.25H6v1.5h13.001A2.749 2.749 0 0021.75 19V8z" />
 	</SVG>
 );
 
 export const settings = {
 	title,
-	icon,
+	icon: {
+		src: icon,
+		foreground: '#36f',
+	},
 	attributes,
 	category,
 	keywords: [

src/blocks/video-playlist/index.js

@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -17,20 +17,24 @@ import './editor.scss';
 export const name = 'youtube-video-playlist';
 export const title = __( 'YouTube Video Playlist', 'newspack-blocks' );
 
-/* From https://material.io/tools/icons */
 export const icon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-		<Path d="M0 0h24v24H0z" fill="none" />
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path d="M13 10.5L8.833 8v5z" />
 		<Path
-			d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4l-6-3.27v6.53L16 16z"
-			fill="#36f"
+			clipRule="evenodd"
+			d="M4.625 3C3.728 3 3 3.728 3 4.625v11.75C3 17.272 3.728 18 4.625 18h11.75c.897 0 1.625-.728 1.625-1.625V4.625C18 3.728 17.272 3 16.375 3zm11.75 1.5H4.625a.125.125 0 00-.125.125v11.75c0 .069.056.125.125.125h11.75a.125.125 0 00.125-.125V4.625a.125.125 0 00-.125-.125z"
+			fillRule="evenodd"
 		/>
+		<Path d="M20.25 8v11c0 .69-.56 1.25-1.249 1.25H6v1.5h13.001A2.749 2.749 0 0021.75 19V8z" />
 	</SVG>
 );
 
 export const settings = {
 	title,
-	icon,
+	icon: {
+		src: icon,
+		foreground: '#36f',
+	},
 	category: 'newspack',
 	keywords: [
 		__( 'video', 'newspack-blocks' ),