feat: update blocks with new brand (#2050)

src/blocks/author-list/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Icon, listView } from '@wordpress/icons';
+import { listView } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -34,8 +34,8 @@ authorCustomFields.forEach( field => {
 export const settings = {
 	title,
 	icon: {
-		src: <Icon icon={ listView } />,
-		foreground: '#36f',
+		src: listView,
+		foreground: '#406ebc',
 	},
 	keywords: [ __( 'author', 'newspack-blocks' ), __( 'profile', 'newspack-blocks' ) ],
 	description: __( 'Display a list of author profile cards.', 'newspack-blocks' ),

src/blocks/author-profile/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Icon, postAuthor } from '@wordpress/icons';
+import { postAuthor } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -34,8 +34,8 @@ authorCustomFields.forEach( field => {
 export const settings = {
 	title,
 	icon: {
-		src: <Icon icon={ postAuthor } />,
-		foreground: '#36f',
+		src: postAuthor,
+		foreground: '#406ebc',
 	},
 	keywords: [ __( 'author', 'newspack-blocks' ), __( 'profile', 'newspack-blocks' ) ],
 	description: __( 'Display an author profile card.', 'newspack-blocks' ),

src/blocks/carousel/index.js

@@ -37,7 +37,7 @@ export const settings = {
 	title,
 	icon: {
 		src: icon,
-		foreground: '#36f',
+		foreground: '#406ebc',
 	},
 	attributes,
 	category,

src/blocks/checkout-button/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Icon, button } from '@wordpress/icons';
+import { button } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,8 +18,8 @@ export { name };
 export const settings = {
 	...metadata,
 	icon: {
-		src: <Icon icon={ button } />,
-		foreground: '#36f',
+		src: button,
+		foreground: '#406ebc',
 	},
 	edit,
 	deprecated,

src/blocks/donate/index.js

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink, Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
-import { payment } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -22,13 +21,24 @@ const { name, attributes, category, supports } = metadata;
 
 // Name must be exported separately.
 export { name };
+
 export const title = __( 'Donate', 'newspack-blocks' );
 
+export const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			d="M14.75 9a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-5 0A2.5 2.5 0 0 0 9.75 9H4v11h16V9h-5.25Zm-1-2.5c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1h-1v-1Zm-5 0c0-.55.45-1 1-1s1 .45 1 1v1h-1c-.55 0-1-.45-1-1Zm-3.25 4h6v8h-6v-8Zm13 8H13v-8h5.5v8Z"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
+
 export const settings = {
 	title,
 	icon: {
-		src: payment,
-		foreground: '#36f',
+		src: icon,
+		foreground: '#406ebc',
 	},
 	category,
 	keywords: [

src/blocks/homepage-articles/index.js

@@ -40,7 +40,7 @@ export const settings = {
 	title,
 	icon: {
 		src: icon,
-		foreground: '#36f',
+		foreground: '#406ebc',
 	},
 	attributes,
 	category,

src/blocks/homepage-articles/utils.ts

@@ -176,19 +176,19 @@ const generatePreviewPost = ( id: PostId ) => {
 		newspack_author_info: [
 			{
 				display_name: __( 'Author Name', 'newspack-blocks' ),
-				avatar: `<div style="background: #36f;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;"></div>`,
+				avatar: `<div style="background: #e8e8e8;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;"></div>`,
 				id: 1,
 				author_link: '/',
 			},
 		],
 		newspack_category_info: __( 'Category', 'newspack-blocks' ),
 		newspack_featured_image_caption: __( 'Featured image caption', 'newspack-blocks' ),
 		newspack_featured_image_src: {
-			large: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
-			landscape: `${ PREVIEW_IMAGE_BASE }/newspack-800x600.jpg`,
-			portrait: `${ PREVIEW_IMAGE_BASE }/newspack-600x800.jpg`,
-			square: `${ PREVIEW_IMAGE_BASE }/newspack-800x800.jpg`,
-			uncropped: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
+			large: `${ PREVIEW_IMAGE_BASE }/placeholder-1024x536.jpg`,
+			landscape: `${ PREVIEW_IMAGE_BASE }/placeholder-800x600.jpg`,
+			portrait: `${ PREVIEW_IMAGE_BASE }/placeholder-600x800.jpg`,
+			square: `${ PREVIEW_IMAGE_BASE }/placeholder-800x800.jpg`,
+			uncropped: `${ PREVIEW_IMAGE_BASE }/placeholder-1024x536.jpg`,
 		},
 		newspack_has_custom_excerpt: false,
 		newspack_sponsors_show_categories: false,

src/blocks/iframe/index.js

@@ -26,7 +26,7 @@ export const settings = {
 	title,
 	icon: {
 		src: iframeIcon,
-		foreground: '#36f',
+		foreground: '#406ebc',
 	},
 	category,
 	keywords: [ __( 'iframe', 'newspack-blocks' ), __( 'project iframe', 'newspack-blocks' ) ],

src/blocks/video-playlist/index.js

@@ -33,7 +33,7 @@ export const settings = {
 	title,
 	icon: {
 		src: icon,
-		foreground: '#36f',
+		foreground: '#406ebc',
 	},
 	category: 'newspack',
 	keywords: [

src/setup/newspack-logo.js

@@ -9,15 +9,15 @@ const NewspackLogo = ( { size = 24, className } ) => (
 		className={ classNames( 'newspack-logo', className ) }
 		width={ size }
 		height={ size }
-		viewBox="0 0 32 32"
+		viewBox="0 0 24 24"
 	>
 		<Path
-			d="M16 32c8.836 0 16-7.164 16-16S24.836 0 16 0 0 7.164 0 16s7.163 16 16 16z"
-			fill="#36F"
+			fill="#003da5"
+			d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
 		/>
 		<Path
-			d="M22.988 16.622h-1.72l-1.103-1.124h2.823v1.124zm0-3.31H18.02l-1.102-1.124h6.071v1.124zm0-3.31h-8.217l-1.103-1.125h9.32v1.125zm0 13.12L9.012 8.878v4.749l.069.071h-.07v9.426h3.451v-5.98l5.867 5.98h4.66z"
 			fill="#fff"
+			d="M16.546 13.97v-1.364h-1.364l1.364 1.364ZM13.97 11.394h2.575V10.03h-3.939l1.364 1.364ZM11.394 8.818h5.152V7.455H10.03l1.364 1.363ZM7.455 7.455l9.09 9.09H13.97l-4.697-4.697v4.697H7.455v-9.09Z"
 		/>
 	</SVG>
 );

src/shared/js/newspack-icon.js

@@ -17,13 +17,13 @@ const NewspackIcon = ( { size = 24, className } ) => (
 	>
 		<Path
 			className="newspack-icon__circle"
-			fill="#36f"
-			d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.372 12 12 12z"
+			fill="#003da5"
+			d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
 		/>
 		<Path
 			className="newspack-icon__n"
 			fill="#fff"
-			d="M17.241 12.467h-1.29l-.827-.843h2.117v.843zm0-2.483h-3.727l-.826-.843h4.553v.843zm0-2.483h-6.163l-.827-.843h6.99v.843zm0 9.841L6.76 6.658v10.684h2.588v-4.484l4.4 4.484h3.494z"
+			d="M16.546 13.97v-1.364h-1.364l1.364 1.364ZM13.97 11.394h2.575V10.03h-3.939l1.364 1.364ZM11.394 8.818h5.152V7.455H10.03l1.364 1.363ZM7.455 7.455l9.09 9.09H13.97l-4.697-4.697v4.697H7.455v-9.09Z"
 		/>
 	</SVG>
 );

src/shared/sass/_colors.scss

@@ -1,4 +1,4 @@
-$color__primary: #36f;
+$color__primary: #003da5;
 $color__secondary: #555;
 $color__background-body: #fff;
 $color__background-input: #fff;