diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/submission-modal/index.js b/public_html/wp-content/plugins/pattern-creator/src/components/submission-modal/index.js index 0ae88c18..c3486a63 100644 --- a/public_html/wp-content/plugins/pattern-creator/src/components/submission-modal/index.js +++ b/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: , + // Open in a new tab so following the link doesn't discard the pattern. + a: , } ) }

diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/images.js b/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/images.js index 58a06e2d..f4c97753 100644 --- a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/images.js +++ b/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/images.js @@ -82,6 +82,37 @@ export const ImageCollectionImage = () => ( ); +export const GuidelinesImage = () => ( + <> + { /* Faint geometric field behind the card, matching the other guide pages. */ } + + + + + + + + + + + + + + + + + + + + + + + + + + +); + export const PatternEditorImage = () => ( <> diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js b/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js index d85acaaf..fd0a829d 100644 --- a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js +++ b/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js @@ -1,14 +1,14 @@ /** * 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'; /** @@ -16,6 +16,8 @@ import { store as patternStore } from '../../store'; */ 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: ( +
+ +
+ ), + content: ( + <> +

+ { __( 'Follow the submission guidelines', 'wporg-patterns' ) } +

+

+ { __( + 'Every pattern is reviewed by hand. To be approved, yours should:', + 'wporg-patterns' + ) } +

+ + + { __( 'Read the full guidelines', 'wporg-patterns' ) } + + + ), + }, { image: (
diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/style.scss b/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/style.scss index bf1dd7cb..6f902835 100644 --- a/public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/style.scss +++ b/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 {