From 7c6b236cd9b3269163a5868a209811f8489fc567 Mon Sep 17 00:00:00 2001 From: Anne McCarthy Date: Tue, 6 Oct 2026 19:29:40 +0000 Subject: [PATCH 1/3] Pattern creator: surface submission guidelines in the welcome guide Contributors only saw the submission standards at publish time, after they had already designed a pattern. Add a guidelines page to the editor's welcome guide, positioned second so it is seen before any design work starts, with a condensed checklist and a link to the full handbook guidelines. Widen the guide from 320px to 480px so the list fits inside the 575px max-height that @wordpress/components caps guides at. See https://github.com/WordPress/pattern-directory/issues/751 Co-Authored-By: Claude Opus 5 (1M context) --- .../src/components/welcome-guide/images.js | 41 ++++++++++++++ .../src/components/welcome-guide/index.js | 55 ++++++++++++++++++- .../src/components/welcome-guide/style.scss | 18 +++++- 3 files changed, 111 insertions(+), 3 deletions(-) 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 58a06e2d1..835b047d1 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,47 @@ 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 d85acaaf6..4c616ba14 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,55 @@ 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 bf1dd7cba..3fe735965 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,25 @@ 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-20; + 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; } .pattern-creator-welcome-guide .components-guide__footer > button { From 1b7e988ba1be4da256f8aaffbf3eb3a7a50de833 Mon Sep 17 00:00:00 2001 From: Anne McCarthy Date: Tue, 6 Oct 2026 20:50:02 +0000 Subject: [PATCH 2/3] Pattern creator: satisfy Stylelint and Prettier in the guidelines page Add the empty line Stylelint's comment-empty-line-before requires before the comment opening the list rule, and reformat the new JSX at the repository's printWidth of 115 rather than the 80 of the shared @wordpress/prettier-config default. Co-Authored-By: Claude Opus 5 (1M context) --- .../src/components/welcome-guide/images.js | 14 ++------------ .../src/components/welcome-guide/index.js | 9 ++------- .../src/components/welcome-guide/style.scss | 1 + 3 files changed, 5 insertions(+), 19 deletions(-) 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 835b047d1..9496d988a 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 @@ -87,18 +87,8 @@ export const GuidelinesImage = () => ( { /* Faint geometric field behind the card, matching the other guide pages. */ } - - + + 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 4c616ba14..fd0a829d0 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 @@ -90,14 +90,9 @@ export default function WelcomeGuide() { 'wporg-patterns' ) } -
  • - { __( 'Use only content you have the rights to.', 'wporg-patterns' ) } -
    • +
  • { __( 'Use only content you have the rights to.', 'wporg-patterns' ) }
    • - + { __( 'Read the full guidelines', 'wporg-patterns' ) } 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 3fe735965..521cda4d7 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 @@ -47,6 +47,7 @@ } .pattern-creator-welcome-guide__list { + /* Extra left padding keeps the list markers inside the guide's gutter. */ margin: 0 0 $grid-unit-20; padding-right: $grid-unit-40; From 813af5e9ab567a00b292526245045895a42f2baa Mon Sep 17 00:00:00 2001 From: Boro Sitnikovski Date: Thu, 8 Oct 2026 15:30:10 +0200 Subject: [PATCH 3/3] Pattern creator: keep guide navigation reachable and open guidelines in a new tab The guidelines page was 3px taller than the 575px cap @wordpress/components puts on guides, so it scrolled even in English, and longer translations pushed Previous/Next out of view. Tighten the list's bottom margin so the English page fits, and make the guide footer sticky so navigation stays visible when a locale does overflow. Let the guidelines illustration's grid background tile across the full 480px width instead of the 312px viewBox. The submission modal's "Check the guidelines" link opened in the same tab, prompting contributors to leave the editor and lose their pattern (#751). Render it as an ExternalLink so it opens in a new tab. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../src/components/submission-modal/index.js | 6 +++--- .../src/components/welcome-guide/images.js | 4 ++-- .../src/components/welcome-guide/style.scss | 21 ++++++++++++++++++- 3 files changed, 25 insertions(+), 6 deletions(-) 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 ba9d70c4a..b7db05c07 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 @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n'; import { addQueryArgs } from '@wordpress/url'; import apiFetch from '@wordpress/api-fetch'; -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'; @@ -108,8 +108,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 9496d988a..f4c977537 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 @@ -85,13 +85,13 @@ export const ImageCollectionImage = () => ( export const GuidelinesImage = () => ( <> { /* Faint geometric field behind the card, matching the other guide pages. */ } - + - + 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 521cda4d7..6f9028353 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 @@ -49,7 +49,7 @@ .pattern-creator-welcome-guide__list { /* Extra left padding keeps the list markers inside the guide's gutter. */ - margin: 0 0 $grid-unit-20; + margin: 0 0 $grid-unit-10; padding-right: $grid-unit-40; padding-left: $grid-unit-60; list-style: disc; @@ -68,6 +68,25 @@ 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 { padding: $grid-unit-10 $grid-unit-15; }