Skip to content

Commit

Permalink
Update Welcome Guides to use external image URLs (#32026)
Browse files Browse the repository at this point in the history
  • Loading branch information
@noisysocks @youknowriad
noisysocks authored and youknowriad committed May 31, 2021
1 parent c49d625 commit 52606e5
Show file tree
Hide file tree
Showing 11 changed files with 100 additions and 276 deletions.
16 changes: 0 additions & 16 deletions packages/customize-widgets/src/components/welcome-guide/images.js
View file

This file was deleted.

14 changes: 12 additions & 2 deletions packages/customize-widgets/src/components/welcome-guide/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { EditorImage } from './images';
import { store as customizeWidgetsStore } from '../../store';

export default function WelcomeGuide( { sidebar } ) {
Expand All @@ -22,7 +21,18 @@ export default function WelcomeGuide( { sidebar } ) {

return (
<div className="customize-widgets-welcome-guide">
<EditorImage />
<picture className="customize-widgets-welcome-guide__image">
<source
srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
media="(prefers-reduced-motion: reduce)"
/>
<img
src="https://s.w.org/images/block-editor/welcome-editor.gif"
width="312"
height="240"
alt=""
/>
</picture>
<h1 className="customize-widgets-welcome-guide__heading">
{ __( 'Welcome to block Widgets' ) }
</h1>
Expand Down
18 changes: 0 additions & 18 deletions packages/customize-widgets/src/components/welcome-guide/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
44 changes: 29 additions & 15 deletions packages/edit-post/src/components/welcome-guide/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -32,7 +23,12 @@ export default function WelcomeGuideDefault() {
onFinish={ () => toggleFeature( 'welcomeGuide' ) }
pages={ [
{
image: <CanvasImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-canvas.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-canvas.gif"
/>
),
content: (
<>
<h1 className="edit-post-welcome-guide__heading">
Expand All @@ -47,7 +43,12 @@ export default function WelcomeGuideDefault() {
),
},
{
image: <EditorImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-editor.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-editor.gif"
/>
),
content: (
<>
<h1 className="edit-post-welcome-guide__heading">
Expand All @@ -62,7 +63,12 @@ export default function WelcomeGuideDefault() {
),
},
{
image: <BlockLibraryImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-library.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-library.gif"
/>
),
content: (
<>
<h1 className="edit-post-welcome-guide__heading">
Expand All @@ -75,7 +81,10 @@ export default function WelcomeGuideDefault() {
),
{
InserterIconImage: (
<InserterIconImage className="edit-post-welcome-guide__inserter-icon" />
<img
alt={ __( 'inserter' ) }
src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='2' fill='%231E1E1E'/%3E%3Cpath d='M9.22727 4V14M4 8.77273H14' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A"
/>
),
}
) }
Expand All @@ -84,7 +93,12 @@ export default function WelcomeGuideDefault() {
),
},
{
image: <DocumentationImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
/>
),
content: (
<>
<h1 className="edit-post-welcome-guide__heading">
Expand Down
11 changes: 11 additions & 0 deletions packages/edit-post/src/components/welcome-guide/image.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
return (
<picture className="edit-post-welcome-guide__image">
<source
srcSet={ nonAnimatedSrc }
media="(prefers-reduced-motion: reduce)"
/>
<img src={ animatedSrc } width="312" height="240" alt="" />
</picture>
);
}
97 changes: 0 additions & 97 deletions packages/edit-post/src/components/welcome-guide/images.js
View file

This file was deleted.

17 changes: 0 additions & 17 deletions packages/edit-post/src/components/welcome-guide/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-post/src/components/welcome-guide/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -22,7 +22,12 @@ export default function WelcomeGuideTemplate() {
onFinish={ () => toggleFeature( 'welcomeGuideTemplate' ) }
pages={ [
{
image: <TemplateEditorImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.gif"
/>
),
content: (
<>
<h1 className="edit-post-welcome-guide__heading">
Expand Down
80 changes: 0 additions & 80 deletions packages/edit-widgets/src/components/welcome-guide/images.js
View file

This file was deleted.

53 changes: 41 additions & 12 deletions packages/edit-widgets/src/components/welcome-guide/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -60,7 +53,12 @@ export default function WelcomeGuide() {
onFinish={ () => toggleFeature( 'welcomeGuide' ) }
pages={ [
{
image: <CanvasImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-canvas.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-canvas.gif"
/>
),
content: (
<>
<h1 className="edit-widgets-welcome-guide__heading">
Expand Down Expand Up @@ -109,7 +107,12 @@ export default function WelcomeGuide() {
),
},
{
image: <EditorImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-editor.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-editor.gif"
/>
),
content: (
<>
<h1 className="edit-widgets-welcome-guide__heading">
Expand All @@ -124,7 +127,12 @@ export default function WelcomeGuide() {
),
},
{
image: <BlockLibraryImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-library.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-library.gif"
/>
),
content: (
<>
<h1 className="edit-widgets-welcome-guide__heading">
Expand All @@ -137,7 +145,11 @@ export default function WelcomeGuide() {
),
{
InserterIconImage: (
<InserterIconImage className="edit-widgets-welcome-guide__inserter-icon" />
<img
className="edit-widgets-welcome-guide__inserter-icon"
alt={ __( 'inserter' ) }
src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='2' fill='%231E1E1E'/%3E%3Cpath d='M9.22727 4V14M4 8.77273H14' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A"
/>
),
}
) }
Expand All @@ -146,7 +158,12 @@ export default function WelcomeGuide() {
),
},
{
image: <DocumentationImage />,
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
/>
),
content: (
<>
<h1 className="edit-widgets-welcome-guide__heading">
Expand All @@ -171,3 +188,15 @@ export default function WelcomeGuide() {
/>
);
}

function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
return (
<picture className="edit-widgets-welcome-guide__image">
<source
srcSet={ nonAnimatedSrc }
media="(prefers-reduced-motion: reduce)"
/>
<img src={ animatedSrc } width="312" height="240" alt="" />
</picture>
);
}
17 changes: 0 additions & 17 deletions packages/edit-widgets/src/components/welcome-guide/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down

0 comments on commit 52606e5

Please sign in to comment.