Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Welcome Guides to use external image URLs #32026

Merged
merged 3 commits into from
May 28, 2021
Merged

Update Welcome Guides to use external image URLs #32026

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6bdb876
Update Welcome Guides to use external image URLs
noisysocks May 20, 2021
18c75fa
Use <picture> to implement reduced motion in welcome guides
noisysocks May 28, 2021
0a655a5
Remove unnecessary height
noisysocks May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions packages/customize-widgets/src/components/welcome-guide/images.js
View file
Open in desktop

This file was deleted.

14 changes: 12 additions & 2 deletions packages/customize-widgets/src/components/welcome-guide/index.js
View file
Open in desktop
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
14 changes: 0 additions & 14 deletions packages/customize-widgets/src/components/welcome-guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,6 @@

&__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.
Expand Down
44 changes: 29 additions & 15 deletions packages/edit-post/src/components/welcome-guide/default.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions packages/edit-post/src/components/welcome-guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
.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
Open in desktop
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
Open in desktop

This file was deleted.

53 changes: 41 additions & 12 deletions packages/edit-widgets/src/components/welcome-guide/index.js
View file
Open in desktop
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>
);
}
16 changes: 0 additions & 16 deletions packages/edit-widgets/src/components/welcome-guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
.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