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.

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

Creator: Add welcome guide on first load. #97

Merged
merged 21 commits into from
Jun 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
892af06
Add in the initial guide without the correct images.
StevenDufresne May 7, 2021
9d1207f
Add in the real svg's even though backgrounds are not working properly.
StevenDufresne May 10, 2021
19652a1
Update the close button colors to make them more visible.
StevenDufresne May 10, 2021
d26fc4b
Update the background images to the updated svgs.
StevenDufresne May 11, 2021
6be61b0
Add in the correct third panel.
StevenDufresne Jun 7, 2021
fd1a270
Move the dot controls down.
StevenDufresne Jun 7, 2021
2d43b6a
Clean up yarn.lock.
StevenDufresne Jun 8, 2021
d903c4b
Merge trunk.
StevenDufresne Jun 9, 2021
8126cc7
Integrate the welcome guide as a plugin to match new structure.
StevenDufresne Jun 9, 2021
45c65d5
Remove the editor component. No longer used.
StevenDufresne Jun 9, 2021
3bafd97
Add in the primitives library.
StevenDufresne Jun 9, 2021
0204bc1
Run the formatting.
StevenDufresne Jun 9, 2021
382afcd
Update welcome pattern guide id.
StevenDufresne Jun 9, 2021
aa7903a
Rename the guide back to welcome guide to replace the default.
StevenDufresne Jun 9, 2021
0e4a046
Improve css and namespace some of the styles.
StevenDufresne Jun 11, 2021
6a1d161
Turn off more tools and the welcome guide. Replace with ours.
StevenDufresne Jun 15, 2021
e56b5f4
Rename the gutenberg modifier to be more specific to what it does.
StevenDufresne Jun 15, 2021
8ee3f91
Remove the edit-post plugin removal, we'll remove the whole menu.
StevenDufresne Jun 16, 2021
f923f11
Merge in Trunk:
StevenDufresne Jun 28, 2021
df6eb99
Fix package.json conflict.
StevenDufresne Jun 28, 2021
4066d9e
Add back in primitives.
StevenDufresne Jun 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
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@wordpress/icons": "4.0.1",
"@wordpress/interface": "3.1.2",
"@wordpress/plugins": "3.1.1",
"@wordpress/primitives": "2.1.1",
"@wordpress/url": "3.1.1",
"classnames": "2.3.1",
"lodash": "4.17.21"
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/**
* WordPress dependencies
*/
import { Guide } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { ImageCollectionImage, PatternEditorImage, PatternsImage } from './images';
import './style.css';

/**
* Module constants
*/
export const GUIDE_ID = 'wporgWelcomeGuide';

export default function WelcomeGuide() {
const isActive = useSelect( ( select ) => select( editPostStore ).isFeatureActive( GUIDE_ID ), [] );

const { toggleFeature } = useDispatch( editPostStore );

if ( ! isActive ) {
return null;
}

return (
<Guide
className="pattern-creator-welcome-guide"
contentLabel={ __( 'Welcome to the pattern creator', 'wporg-patterns' ) }
finishButtonText={ __( 'Done', 'wporg-patterns' ) }
onFinish={ () => toggleFeature( GUIDE_ID ) }
pages={ [
{
image: (
<div className="pattern-creator-welcome-guide__image circle-background">
<PatternsImage />
</div>
),
content: (
<>
<h1 className="pattern-creator-welcome-guide__title">
{ __( 'Welcome to the pattern editor', 'wporg-patterns' ) }
</h1>
<p>
{ __(
'Mix and match WordPress blocks together to create unique and compelling designs.',
'wporg-patterns'
) }
</p>
</>
),
},
{
image: (
<div className="pattern-creator-welcome-guide__image diamond-background">
<ImageCollectionImage />
</div>
),
content: (
<>
<h1 className="pattern-creator-welcome-guide__title">
{ __( 'Use our collection of license-free images', 'wporg-patterns' ) }
</h1>
<p>
{ __(
'Don’t worry about licensing. We’ve provided a collection of worry-free images and media for you to use.',
'wporg-patterns'
) }
</p>
</>
),
},
{
image: (
<div className="pattern-creator-welcome-guide__image triangles-background">
<PatternEditorImage />
</div>
),
content: (
<>
<h1 className="pattern-creator-welcome-guide__title">
{ __( 'Submit your pattern to the directory', 'wporg-patterns' ) }
</h1>
<p>
{ __(
'Choose a category and share your pattern with the world. All patterns in the directory are available from any WordPress site.',
'wporg-patterns'
) }
</p>
</>
),
},
] }
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@

.pattern-creator-welcome-guide {
max-width: 320px;
}

.pattern-creator-welcome-guide__image {
margin-bottom: calc(var(--grid-unit) / 2); /* Pushes the dot controls away */
display: flex;
align-items: center;
justify-content: center;
background: #1d2327;
height: 240px;
overflow: hidden;
}

/* Change circle indicator color */
.pattern-creator-welcome-guide .components-guide__page-control [aria-current="step"] circle {
fill: var(--wp-admin-theme-color);
}

/* Change the close button color */
.pattern-creator-welcome-guide .components-modal__header button {
background: #000;
color: #fff;
}

/* Change the link color */
.pattern-creator-welcome-guide .components-button.components-guide__forward-button {
color: var(--wp-admin-theme-color);
}

.pattern-creator-welcome-guide__image svg {
position: absolute;
}

.pattern-creator-welcome-guide__title,
.pattern-creator-welcome-guide p {
margin: 0;
padding: 0 calc(var(--grid-unit) * 2);
}

.pattern-creator-welcome-guide__title {
margin: var(--grid-unit) 0;
font-size: 20px;
font-weight: 600;
line-height: normal;
}

.pattern-creator-welcome-guide p {
margin-bottom: var(--grid-unit);
font-size: 14px;
}

.pattern-creator-welcome-guide__link {
margin-top: calc(var(--grid-unit) / 2);
display: block;
}

.pattern-creator-welcome-guide .components-guide__footer > button {
padding: 6px 12px;
}
3 changes: 2 additions & 1 deletion public_html/wp-content/plugins/pattern-creator/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ import './plugins/category-settings-panel';
import './plugins/keyword-settings-panel';
import './plugins/block-scope-settings-panel';

import './plugins/inspector-controls-modifier';
import './plugins/gutenberg-feature-remover';
import './plugins/main-dashboard-button';
import './plugins/save-post-modifier';
import './plugins/update-inspector-panel-text';
import './plugins/viewport-header-control';
import './plugins/welcome-guide-plugin';
import './style.css';

// Set up API middleware.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { store } from '@wordpress/edit-post';
import { useEffect } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';

const InspectorControlsModifier = () => {
useEffect( () => {
const GutenbergEditorModifier = () => {
const removeDocumentPanelComponents = () => {
const { removeEditorPanel } = dispatch( store );

// We don't want the post-status control
Expand All @@ -19,11 +19,15 @@ const InspectorControlsModifier = () => {
// Turn off the custom taxonomy panels and replace with our own
removeEditorPanel( 'taxonomy-panel-wporg-pattern-category' );
removeEditorPanel( 'taxonomy-panel-wporg-pattern-keyword' );
};

useEffect( () => {
removeDocumentPanelComponents();
}, [] );

return null;
};

registerPlugin( 'inspector-controls-modifier', {
render: () => <InspectorControlsModifier />,
registerPlugin( 'gutenberg-editor-modifier', {
render: () => <GutenbergEditorModifier />,
} );
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import { dispatch, select } from '@wordpress/data';
import { registerPlugin } from '@wordpress/plugins';
import { store } from '@wordpress/edit-post';

/**
* Internal dependencies
*/
import WelcomeGuide, { GUIDE_ID } from '../components/welcome-guide';

registerPlugin( 'welcome-guide-plugin', {
render: () => {
// Turn off the default welcome guide
if ( select( store ).isFeatureActive( 'welcomeGuide' ) ) {
dispatch( store ).toggleFeature( 'welcomeGuide' );
}

const features = select( store ).getPreference( 'features' );

if ( features[ GUIDE_ID ] === undefined ) {
dispatch( store ).toggleFeature( GUIDE_ID );
}

return <WelcomeGuide />;
},
} );