Pattern creator: surface submission guidelines in the welcome guide

public_html/wp-content/plugins/pattern-creator/src/components/submission-modal/index.js

@@ -8,7 +8,7 @@ import { unescape as unescapeString } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, CheckboxControl, Modal, TextControl, TextareaControl } from '@wordpress/components';
+import { Button, CheckboxControl, ExternalLink, Modal, TextControl, TextareaControl } from '@wordpress/components';
 import { createInterpolateElement, useEffect, useRef, useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
@@ -101,8 +101,8 @@ export default function SubmissionModal( { onClose, onSubmit, status } ) {
 								'wporg-patterns'
 							),
 							{
-								/* eslint-disable-next-line jsx-a11y/anchor-has-content */
-								a: <a href={ `${ wporgBlockPattern.siteUrl }/about/` } />,
+								// Open in a new tab so following the link doesn't discard the pattern.
+								a: <ExternalLink href={ `${ wporgBlockPattern.siteUrl }/about/` } />,
 							}
 						) }
 					</p>

public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js

@@ -1,21 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { Guide } from '@wordpress/components';
+import { ExternalLink, Guide } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { ImageCollectionImage, PatternEditorImage, PatternsImage } from './images';
+import { GuidelinesImage, ImageCollectionImage, PatternEditorImage, PatternsImage } from './images';
 import { store as patternStore } from '../../store';
 
 /**
  * Module constants
  */
 export const GUIDE_ID = 'patternWelcomeGuide';
 
+const GUIDELINES_URL = 'https://make.wordpress.org/handbook/pathways/design/submit-block-patterns/';
+
 export default function WelcomeGuide() {
 	const isActive = useSelect( ( select ) => select( patternStore ).isFeatureActive( GUIDE_ID ), [] );
 
@@ -52,6 +54,50 @@ export default function WelcomeGuide() {
 						</>
 					),
 				},
+				{
+					image: (
+						<div className="pattern-creator-welcome-guide__image grid-background">
+							<GuidelinesImage />
+						</div>
+					),
+					content: (
+						<>
+							<h1 className="pattern-creator-welcome-guide__title">
+								{ __( 'Follow the submission guidelines', 'wporg-patterns' ) }
+							</h1>
+							<p>
+								{ __(
+									'Every pattern is reviewed by hand. To be approved, yours should:',
+									'wporg-patterns'
+								) }
+							</p>
+							<ul className="pattern-creator-welcome-guide__list">
+								<li>
+									{ __(
+										'Be unique, not a near-copy of an existing pattern.',
+										'wporg-patterns'
+									) }
+								</li>
+								<li>
+									{ __(
+										'Be more than a single block, but less than a full page.',
+										'wporg-patterns'
+									) }
+								</li>
+								<li>
+									{ __(
+										'Have a descriptive title and work with any theme’s colors.',
+										'wporg-patterns'
+									) }
+								</li>
+								<li>{ __( 'Use only content you have the rights to.', 'wporg-patterns' ) }</li>
+							</ul>
+							<ExternalLink className="pattern-creator-welcome-guide__link" href={ GUIDELINES_URL }>
+								{ __( 'Read the full guidelines', 'wporg-patterns' ) }
+							</ExternalLink>
+						</>
+					),
+				},
 				{
 					image: (
 						<div className="pattern-creator-welcome-guide__image diamond-background">

public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/style.scss

@@ -1,6 +1,6 @@
 
 .pattern-creator-welcome-guide {
-	max-width: 320px;
+	max-width: 480px;
 }
 
 .pattern-creator-welcome-guide__image {
@@ -46,9 +46,45 @@
 	font-size: 14px;
 }
 
+.pattern-creator-welcome-guide__list {
+
+	/* Extra left padding keeps the list markers inside the guide's gutter. */
+	margin: 0 0 $grid-unit-10;
+	padding-right: $grid-unit-40;
+	padding-left: $grid-unit-60;
+	list-style: disc;
+	font-size: 14px;
+	text-align: left;
+}
+
+.pattern-creator-welcome-guide__list li {
+	margin-bottom: $grid-unit-05;
+}
+
 .pattern-creator-welcome-guide__link {
 	margin-top: $grid-unit-10;
 	display: block;
+	padding: 0 $grid-unit-40;
+	font-size: 14px;
+}
+
+/* Keep the navigation reachable when long translations make the page scroll. */
+.pattern-creator-welcome-guide .components-guide__footer {
+	position: sticky;
+	bottom: $grid-unit-30;
+	z-index: 1;
+	background: #fff;
+}
+
+/* Cover the footer's bottom margin so scrolled content doesn't show beneath it. */
+.pattern-creator-welcome-guide .components-guide__footer::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	right: 0;
+	left: 0;
+	height: $grid-unit-30;
+	background: #fff;
 }
 
 .pattern-creator-welcome-guide .components-guide__footer > button {