-
+
+
+ 
+
{ __( 'Welcome to block Widgets' ) }
diff --git a/packages/customize-widgets/src/components/welcome-guide/style.scss b/packages/customize-widgets/src/components/welcome-guide/style.scss
index a558ed644e8ed4..3baacc37a25913 100644
--- a/packages/customize-widgets/src/components/welcome-guide/style.scss
+++ b/packages/customize-widgets/src/components/welcome-guide/style.scss
@@ -5,24 +5,6 @@
margin-bottom: $grid-unit-10;
}
- &__image {
- height: 240px;
-
- &__prm-r {
- display: none;
- }
-
- @media (prefers-reduced-motion: reduce) {
- &__prm-r {
- display: block;
- }
-
- &__prm-np {
- display: none;
- }
- }
- }
-
// Extra specificity to override `.wrap h1` styles.
.wrap &__heading {
font-size: 18px;
diff --git a/packages/edit-post/src/components/welcome-guide/default.js b/packages/edit-post/src/components/welcome-guide/default.js
index f5f854420daa01..d83eab0fa13ddb 100644
--- a/packages/edit-post/src/components/welcome-guide/default.js
+++ b/packages/edit-post/src/components/welcome-guide/default.js
@@ -9,16 +9,7 @@ import { createInterpolateElement } from '@wordpress/element';
/**
* Internal dependencies
*/
-/**
- * Internal dependencies
- */
-import {
- CanvasImage,
- EditorImage,
- BlockLibraryImage,
- DocumentationImage,
- InserterIconImage,
-} from './images';
+import WelcomeGuideImage from './image';
import { store as editPostStore } from '../../store';
export default function WelcomeGuideDefault() {
@@ -32,7 +23,12 @@ export default function WelcomeGuideDefault() {
onFinish={ () => toggleFeature( 'welcomeGuide' ) }
pages={ [
{
- image:
,
+ image: (
+
+ ),
content: (
<>
@@ -47,7 +43,12 @@ export default function WelcomeGuideDefault() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -62,7 +63,12 @@ export default function WelcomeGuideDefault() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -75,7 +81,10 @@ export default function WelcomeGuideDefault() {
),
{
InserterIconImage: (
-
+ 
),
}
) }
@@ -84,7 +93,12 @@ export default function WelcomeGuideDefault() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
diff --git a/packages/edit-post/src/components/welcome-guide/image.js b/packages/edit-post/src/components/welcome-guide/image.js
new file mode 100644
index 00000000000000..6e95913c4254c7
--- /dev/null
+++ b/packages/edit-post/src/components/welcome-guide/image.js
@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+ return (
+
+
+ 
+
+ );
+}
diff --git a/packages/edit-post/src/components/welcome-guide/images.js b/packages/edit-post/src/components/welcome-guide/images.js
deleted file mode 100644
index 16d48bc5ec4270..00000000000000
--- a/packages/edit-post/src/components/welcome-guide/images.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const CanvasImage = ( props ) => (
- <>
- 
- 
-
-);
-
-export const EditorImage = ( props ) => (
- <>
- 
- 
-
-);
-
-export const BlockLibraryImage = ( props ) => (
- <>
- 
- 
-
-);
-
-export const DocumentationImage = ( props ) => (
- <>
- 
- 
-
-);
-
-export const TemplateEditorImage = ( props ) => (
- <>
- 
- %27%3E%0A%20%20%20%20%3Cpath%20fill%3D%27%232F2F2F%27%20d%3D%27M0%200h624v480H0z%27%2F%3E%0A%20%20%20%20%3Crect%20width%3D%27420%27%20height%3D%27459%27%20x%3D%27102%27%20y%3D%2774%27%20fill%3D%27%23fff%27%20rx%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%27%23007CBA%27%20d%3D%27M102%20430h420v50H102zM102%2076a2%202%200%20012-2h416a2%202%200%20012%202v94H102V76z%27%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%27%23fff%27%20fill-rule%3D%27evenodd%27%20d%3D%27M340%20122c0-15.428-12.572-28-28-28-15.456%200-28%2012.572-28%2028%200%2015.456%2012.544%2028%2028%2028%2015.428%200%2028-12.544%2028-28zm-34.216%2015.036l-9.548-25.62c1.54-.056%203.276-.224%203.276-.224%201.4-.168%201.232-3.164-.168-3.108%200%200-4.06.308-6.636.308-.504%200-1.036%200-1.624-.028%204.452-6.832%2012.152-11.256%2020.916-11.256%206.524%200%2012.46%202.436%2016.94%206.552-1.904-.308-4.62%201.092-4.62%204.424%200%201.814.966%203.371%202.053%205.121v.001c.154.249.311.501.467.758.98%201.708%201.54%203.808%201.54%206.888%200%204.172-3.92%2014-3.92%2014l-8.484-23.436c1.512-.056%202.296-.476%202.296-.476%201.4-.14%201.232-3.5-.168-3.416%200%200-4.032.336-6.664.336-2.436%200-6.524-.336-6.524-.336-1.4-.084-1.568%203.36-.168%203.416l2.576.224%203.528%209.548-5.068%2016.324zm27.025-15.199l-.061.163a3144.091%203144.091%200%2000-6.052%2016.106l-.002.004-.008.022-2.114%205.652c7.476-4.312%2012.32-12.572%2012.32-21.784%200-4.312-.98-8.288-2.94-11.9.842%206.468-.452%209.902-1.143%2011.737zm-31.729%2022.815c-8.344-4.032-13.972-12.768-13.972-22.652%200-3.64.644-6.944%202.016-10.052l2.514%206.889.002.006c3.139%208.602%206.281%2017.214%209.44%2025.809zm18.508.98l-7.224-19.544a5512.667%205512.667%200%2001-4.017%2011.791c-.918%202.689-1.839%205.385-2.759%208.089%202.016.616%204.2.924%206.412.924%202.66%200%205.18-.448%207.588-1.26z%27%20clip-rule%3D%27evenodd%27%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%27%23DDD%27%20d%3D%27M158%20202h183v27H158zM158%20237h308v27H158zM158%20273h308v27H158zM158%20308h308v27H158zM158%20344h308v27H158zM158%20379h86v27h-86z%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%27clip0%27%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M0%200h624v480H0z%27%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%3C%2Fsvg%3E)
-
-);
-
-export const InserterIconImage = ( props ) => (
-
-);
diff --git a/packages/edit-post/src/components/welcome-guide/style.scss b/packages/edit-post/src/components/welcome-guide/style.scss
index 1697a694b6291e..5bdba26b7207e8 100644
--- a/packages/edit-post/src/components/welcome-guide/style.scss
+++ b/packages/edit-post/src/components/welcome-guide/style.scss
@@ -1,26 +1,9 @@
.edit-post-welcome-guide {
- $image-height: 240px;
- $image-width: 312px;
width: 312px;
&__image {
background: #00a0d2;
- height: 240px;
margin: 0 0 $grid-unit-20;
-
- &__prm-r {
- display: none;
- }
-
- @media (prefers-reduced-motion: reduce) {
- &__prm-r {
- display: block;
- }
-
- &__prm-np {
- display: none;
- }
- }
}
&__heading {
diff --git a/packages/edit-post/src/components/welcome-guide/template.js b/packages/edit-post/src/components/welcome-guide/template.js
index 2a4384722af24a..360b9c768ed0c1 100644
--- a/packages/edit-post/src/components/welcome-guide/template.js
+++ b/packages/edit-post/src/components/welcome-guide/template.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { TemplateEditorImage } from './images';
+import WelcomeGuideImage from './image';
import { store as editPostStore } from '../../store';
export default function WelcomeGuideTemplate() {
@@ -22,7 +22,12 @@ export default function WelcomeGuideTemplate() {
onFinish={ () => toggleFeature( 'welcomeGuideTemplate' ) }
pages={ [
{
- image: ,
+ image: (
+
+ ),
content: (
<>
diff --git a/packages/edit-widgets/src/components/welcome-guide/images.js b/packages/edit-widgets/src/components/welcome-guide/images.js
deleted file mode 100644
index 9c3f42a139928a..00000000000000
--- a/packages/edit-widgets/src/components/welcome-guide/images.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const CanvasImage = ( props ) => (
- <>
-
-
-
-);
-
-export const EditorImage = ( props ) => (
- <>
-
-
-
-);
-
-export const BlockLibraryImage = ( props ) => (
- <>
-
-
-
-);
-
-export const DocumentationImage = ( props ) => (
- <>
-
-
-
-);
-
-export const InserterIconImage = ( props ) => (
-
-);
diff --git a/packages/edit-widgets/src/components/welcome-guide/index.js b/packages/edit-widgets/src/components/welcome-guide/index.js
index 28b76cfc7a5f9e..1dbaa753a87192 100644
--- a/packages/edit-widgets/src/components/welcome-guide/index.js
+++ b/packages/edit-widgets/src/components/welcome-guide/index.js
@@ -9,13 +9,6 @@ import { createInterpolateElement } from '@wordpress/element';
/**
* Internal dependencies
*/
-import {
- CanvasImage,
- EditorImage,
- BlockLibraryImage,
- DocumentationImage,
- InserterIconImage,
-} from './images';
import { store as editWidgetsStore } from '../../store';
export default function WelcomeGuide() {
@@ -60,7 +53,12 @@ export default function WelcomeGuide() {
onFinish={ () => toggleFeature( 'welcomeGuide' ) }
pages={ [
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -109,7 +107,12 @@ export default function WelcomeGuide() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -124,7 +127,12 @@ export default function WelcomeGuide() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -137,7 +145,11 @@ export default function WelcomeGuide() {
),
{
InserterIconImage: (
-
+
),
}
) }
@@ -146,7 +158,12 @@ export default function WelcomeGuide() {
),
},
{
- image: ,
+ image: (
+
+ ),
content: (
<>
@@ -171,3 +188,15 @@ export default function WelcomeGuide() {
/>
);
}
+
+function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+ return (
+
+
+
+
+ );
+}
diff --git a/packages/edit-widgets/src/components/welcome-guide/style.scss b/packages/edit-widgets/src/components/welcome-guide/style.scss
index f05b921db35510..286128e1e4d8ad 100644
--- a/packages/edit-widgets/src/components/welcome-guide/style.scss
+++ b/packages/edit-widgets/src/components/welcome-guide/style.scss
@@ -1,26 +1,9 @@
.edit-widgets-welcome-guide {
- $image-height: 240px;
- $image-width: 312px;
width: 312px;
&__image {
background: #00a0d2;
- height: 240px;
margin: 0 0 $grid-unit-20;
-
- &__prm-r {
- display: none;
- }
-
- @media (prefers-reduced-motion: reduce) {
- &__prm-r {
- display: block;
- }
-
- &__prm-np {
- display: none;
- }
- }
}
&__heading {
+