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

Jump to bottom

FSE: Add welcome guide #36172

Merged
merged 10 commits into from
Nov 16, 2021
Merged

FSE: Add welcome guide #36172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3c62719
FSE: Add welcome guide
Mamaduka Nov 3, 2021
03a4a26
Fix e2e tests
Mamaduka Nov 6, 2021
64dc6bf
Split welcome guide
Mamaduka Nov 6, 2021
eb9503e
remove extraneous full stop
jameskoster Nov 8, 2021
339fe96
get started
jameskoster Nov 8, 2021
833fb3c
Close styles welcome guide for e2e tests
Mamaduka Nov 8, 2021
597a16a
Add tools menu item
Mamaduka Nov 9, 2021
ec69959
Update assets
Mamaduka Nov 15, 2021
78ea3d9
Adjust styles
Mamaduka Nov 15, 2021
4fa6c96
Fix new e2e test
Mamaduka Nov 15, 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
27 changes: 27 additions & 0 deletions packages/e2e-tests/experimental-features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,4 +157,31 @@ export const siteEditor = {
return '';
} );
},

async disableWelcomeGuide() {
const isWelcomeGuideActive = await page.evaluate( () =>
wp.data.select( 'core/edit-site' ).isFeatureActive( 'welcomeGuide' )
);
const isWelcomeGuideStyesActive = await page.evaluate( () =>
wp.data
.select( 'core/edit-site' )
.isFeatureActive( 'welcomeGuideStyles' )
);

if ( isWelcomeGuideActive ) {
await page.evaluate( () =>
wp.data
.dispatch( 'core/edit-site' )
.toggleFeature( 'welcomeGuide' )
);
}

if ( isWelcomeGuideStyesActive ) {
await page.evaluate( () =>
wp.data
.dispatch( 'core/edit-site' )
.toggleFeature( 'welcomeGuideStyles' )
);
}
},
};
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/document-settings.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe( 'Document Settings', () => {

beforeEach( async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
} );

describe( 'when a template is selected from the navigation sidebar', () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ describe( 'Multi-entity editor states', () => {

it( 'should not display any dirty entities when loading the site editor', async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
expect( await openEntitySavePanel() ).toBe( false );
} );

Expand Down Expand Up @@ -204,6 +205,7 @@ describe( 'Multi-entity editor states', () => {
);
await saveAllEntities();
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();

// Wait for site editor to load.
await canvas().waitForSelector(
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ describe( 'Multi-entity save flow', () => {
postId: 'tt1-blocks//index',
postType: 'wp_template',
} );
await siteEditor.disableWelcomeGuide();

// Select the header template part via list view.
await page.click( '.edit-site-header-toolbar__list-view-toggle' );
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/settings-sidebar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ describe( 'Settings sidebar', () => {
} );
beforeEach( async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
} );

describe( 'Template tab', () => {
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/site-editor-export.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ describe( 'Site Editor Templates Export', () => {

beforeEach( async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
} );

it( 'clicking export should download edit-site-export.zip file', async () => {
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/site-editor-inserter.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe( 'Site Editor Inserter', () => {
} );
beforeEach( async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
} );

it( 'inserter toggle button should toggle global inserter', async () => {
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/experiments/template-part.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe( 'Template Part', () => {
describe( 'Template part block', () => {
beforeEach( async () => {
await siteEditor.visit();
await siteEditor.disableWelcomeGuide();
} );

async function navigateToHeader() {
Expand Down
7 changes: 6 additions & 1 deletion packages/e2e-tests/specs/experiments/template-revert.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ import { addQueryArgs } from '@wordpress/url';
*/
import { siteEditor } from '../../experimental-features';

const { visit: visitSiteEditor, getEditedPostContent } = siteEditor;
const {
visit: visitSiteEditor,
getEditedPostContent,
disableWelcomeGuide,
} = siteEditor;

const assertSaveButtonIsDisabled = () =>
page.waitForSelector(
Expand Down Expand Up @@ -97,6 +101,7 @@ describe( 'Template Revert', () => {
beforeEach( async () => {
await trashAllPosts( 'wp_template' );
await visitSiteEditor();
await disableWelcomeGuide();
} );

it( 'should delete the template after saving the reverted template', async () => {
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/performance/site-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ describe( 'Site Editor Performance', () => {
);

await siteEditor.visit( { postId: id, postType: 'page' } );
await siteEditor.disableWelcomeGuide();

let i = 3;

Expand Down
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import URLQueryController from '../url-query-controller';
import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
import ErrorBoundary from '../error-boundary';
import WelcomeGuide from '../welcome-guide';
import { store as editSiteStore } from '../../store';
import { GlobalStylesRenderer } from './global-styles-renderer';
import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
Expand Down Expand Up @@ -288,6 +289,7 @@ function Editor( { initialSettings, onError } ) {
}
footer={ <BlockBreadcrumb /> }
/>
<WelcomeGuide />
<Popover.Slot />
<PluginArea />
</ErrorBoundary>
Expand Down
63 changes: 63 additions & 0 deletions packages/edit-site/src/components/welcome-guide/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/**
* WordPress dependencies
*/
import { useDispatch } from '@wordpress/data';
import { Guide } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';

/**
* Internal dependencies
*/
import WelcomeGuideImage from './image';
import { store as editSiteStore } from '../../store';

export default function WelcomeGuideEditor() {
const { toggleFeature } = useDispatch( editSiteStore );

return (
<Guide
className="edit-site-welcome-guide"
contentLabel={ __( 'Welcome to the site editor' ) }
finishButtonText={ __( 'Get Started' ) }
onFinish={ () => toggleFeature( 'welcomeGuide' ) }
pages={ [
{
image: (
<WelcomeGuideImage
nonAnimatedSrc="https://s.w.org/images/block-editor/edit-your-site.svg?1"
animatedSrc="https://s.w.org/images/block-editor/edit-your-site.gif?1"
/>
),
content: (
<>
<h1 className="edit-site-welcome-guide__heading">
{ __( 'Edit your site' ) }
</h1>
<p className="edit-site-welcome-guide__text">
{ __(
'Design everything on your site — from the header right down to the footer — using blocks.'
) }
</p>
<p className="edit-site-welcome-guide__text">
{ createInterpolateElement(
__(
'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'
),
{
StylesIconImage: (
<img
alt={ __( 'styles' ) }
src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A"
/>
),
}
) }
</p>
</>
),
},
] }
/>
);
}
11 changes: 11 additions & 0 deletions packages/edit-site/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-site-welcome-guide__image">
<source
srcSet={ nonAnimatedSrc }
media="(prefers-reduced-motion: reduce)"
/>
<img src={ animatedSrc } width="312" height="240" alt="" />
</picture>
);
}
33 changes: 33 additions & 0 deletions packages/edit-site/src/components/welcome-guide/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as interfaceStore } from '@wordpress/interface';

/**
* Internal dependencies
*/
import WelcomeGuideEditor from './editor';
import WelcomeGuideStyles from './styles';
import { store as editSiteStore } from '../../store';

export default function WelcomeGuide() {
const { isActive, isStylesOpen } = useSelect( ( select ) => {
const sidebar = select( interfaceStore ).getActiveComplementaryArea(
editSiteStore.name
);
const isStylesSidebar = sidebar === 'edit-site/global-styles';
const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Mamaduka I noticed that if you go into 'Styles' first (having never seen either welcome guide), the 'Welcome to Styles' welcome guide displays as expected.

You might then do some editing with the styles sidebar still open.

But then when you close the styles sidebar you also get the 'Edit your site' welcome guide, which feels out of place.

Not sure what the right solution would be here. 🤔

Maybe the 'Edit your site' welcome guide shouldn't ever show when visiting the Styles link. Or maybe when visiting the Styles link, a Welcome guide that combines both 'Edit your site' and 'Welcome to Styles' should be shown.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@talldan, I agree it's a little confusing.

I can use the query argument styles=open for this logic. Or maybe we should combine welcome guides since it's the same screen, just different entry points.

We can switch back to separate Welcome Guide modals once the "Global Styles" has a dedicated screen.

@jameskoster, @kellychoffman, what do you think?


return {
isActive: select( editSiteStore ).isFeatureActive( feature ),
isStylesOpen: isStylesSidebar,
};
}, [] );

if ( ! isActive ) {
return null;
}

return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
}
37 changes: 37 additions & 0 deletions packages/edit-site/src/components/welcome-guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.edit-site-welcome-guide {
width: 312px;

&__image {
background: #00a0d2;
margin: 0 0 $grid-unit-20;
> img {
display: block;
max-width: 100%;
object-fit: cover;
}
}

&__heading {
font-family: $default-font;
font-size: 24px;
line-height: 1.4;
margin: $grid-unit-20 0 $grid-unit-20 0;
padding: 0 $grid-unit-40;
}

&__text {
font-size: $default-font-size;
line-height: 1.4;
margin: 0 0 $grid-unit-20 0;
padding: 0 $grid-unit-40;

img {
vertical-align: bottom;
}
}

&__inserter-icon {
margin: 0 4px;
vertical-align: text-top;
}
}
Loading