Patterns from the pattern directory do not show if placed in a template

[carolinan]

Description

I encountered this in a custom theme but I can also reproduce it with Twenty Twenty-Four, with no plugins installed.
I only tested on WP 6.6.1.

Twenty Twenty-Four enables these two patterns from the pattern directory in theme.json:

	"patterns": [
		"three-columns-of-services",
		"clients-section"
	],

The theme then uses the clients section pattern inside twentytwentyfour/page-about-business.

When I create a new page and select the "About" business pattern, the remote pattern displays correctly in both the editor and front.

But if I edit a template HTML file and include the clients section or any other pattern from the pattern directory, the pattern only shows in the editor.

Step-by-step reproduction instructions

These example instructions uses Twenty Twenty-Four, but it can be reproduced in other block themes.

1. Activate Twenty Twenty-Four.
2. Set reading settings to displaying the latest posts.
3. Make sure there are no template changes saved that can interfere when you edit the HTML template directly.
4. You may also want to consider enabling the theme development mode constant WP_DEVELOPMENT_MODE.
   define( 'WP_DEVELOPMENT_MODE', 'theme' ); For example in wp-config.php.
5. Open home.html in your code editor. Add the pattern to the template and save:
   <!-- wp:pattern {"slug":"clients-section"} /-->
6. Go to Appearance > Editor.
7. Confirm that the pattern is showing in the Site Editor.
8. View the homepage on the front of the site. Confirm that the pattern is not showing.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.6.1.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[HosseinKarami]

Hi @carolinan ,

I tested this locally as you suggested. It seems the issue is that the home.html is already saved in the database with its initial structure, which is why the pattern isn't visible on the frontend. If you edit and save the page, the pattern should appear.

Additionally, you can create a separate page template that includes the pattern to see if it displays correctly on the initial load.

[carolinan]

I have already made sure that there are no changes to any templates saved in the database. And I included that as part of step 3 in the testing instructions.

If I create a new page or template using the Site Editor and then insert the about page pattern on template creation, then yes, as I wrote in the issue, then the pattern works, it is technically "inserted" when the pattern is selected in the modal.

When the template is created as a HTML file with the pattern as part of the markup, it does not show on the front.

If these steps work for you, then maybe we are on different environments?

Edit: Added info from Site Health:

Env

` ### wp-core ###

version: 6.6.1
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 1
dotorg_communication: true

wp-paths-sizes

wordpress_path: /Users/carolina/LocalSites/66/app/public
wordpress_size: loading...
uploads_path: /Users/carolina/LocalSites/66/app/public/wp-content/uploads
uploads_size: loading...
themes_path: /Users/carolina/LocalSites/66/app/public/wp-content/themes
themes_size: loading...
plugins_path: /Users/carolina/LocalSites/66/app/public/wp-content/plugins
plugins_size: loading...
fonts_path: /Users/carolina/LocalSites/66/app/public/wp-content/uploads/fonts
fonts_size: loading...
database_size: loading...
total_size: loading...

wp-active-theme

name: Twenty Twenty-Four (twentytwentyfour)
version: 1.2
author: the WordPress team
author_website: https://wordpress.org
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates
theme_path: /Users/carolina/LocalSites/66/app/public/wp-content/themes/twentytwentyfour
auto_update: Disabled

wp-themes-inactive (16)

child: author: Anonymous, version: (undefined), Auto-updates disabled
new blank: author: Anonymous, version: (undefined), Auto-updates disabled
Test: author: Anonymous, version: (undefined), Auto-updates disabled
Twenty Eleven: version: 4.7, author: the WordPress team, Auto-updates disabled
Twenty Fifteen: version: 3.8, author: the WordPress team, Auto-updates disabled
Twenty Fourteen: version: 4.0, author: the WordPress team, Auto-updates disabled
Twenty Nineteen: version: 2.9, author: the WordPress team, Auto-updates disabled
Twenty Seventeen: version: 3.7, author: the WordPress team, Auto-updates disabled
Twenty Sixteen: version: 3.3, author: the WordPress team, Auto-updates disabled
Twenty Ten: version: 4.2, author: the WordPress team, Auto-updates disabled
Twenty Thirteen: version: 4.2, author: the WordPress team, Auto-updates disabled
Twenty Twelve: version: 4.3, author: the WordPress team, Auto-updates disabled
Twenty Twenty: version: 2.7, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 2.3, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Three: version: 1.5, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.8, author: the WordPress team, Auto-updates disabled

wp-plugins-inactive (5)

Create Block Theme: version: 2.3.0, author: WordPress.org, Auto-updates disabled
Gutenberg: version: 18.9.0, author: Gutenberg Team, Auto-updates disabled
WordPress Beta Tester: version: 3.5.6, author: WordPress Upgrade/Install Team, Auto-updates disabled
WordPress Reset: version: 1.4.2, author: Aristeides Stathopoulos, Matt Martz, Auto-updates disabled
Yoast SEO: version: 23.1, author: Team Yoast, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1809
imagemagick_version: ImageMagick 7.1.1-15 Q16 x86_64 98eceff6a:20230729 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 1000M
upload_max_filesize: 300M
max_effective_size: 300 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 128 GB
imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
imagick::RESOURCETYPE_FILE: 7872
imagick::RESOURCETYPE_MAP: 64 GB
imagick::RESOURCETYPE_MEMORY: 32 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, ASHLAR, AVI, AVS, BAYER, BAYERA, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUBE, CUR, CUT, DATA, DCM, DCR, DCRAW, DCX, DDS, DFONT, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FARBFELD, FAX, FF, FITS, FL32, FLV, FRACTAL, FTS, FTXT, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, JXL, K25, KDC, KERNEL, LABEL, M2V, M4V, MAC, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MPO, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORA, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PHM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, QOI, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGB565, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, STRIMG, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TM2, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YAML, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: 9.56.1

wp-server

server_architecture: Darwin 23.5.0 x86_64
httpd_software: nginx/1.16.0
php_version: 8.1.23 64bit
php_sapi: fpm-fcgi
max_input_variables: 4000
time_limit: 1200
memory_limit: 256M
max_input_time: 600
upload_max_filesize: 300M
php_post_max_size: 1000M
curl_version: 8.6.0 (SecureTransport) LibreSSL/3.3.6
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false
current: 2024-08-01T12:20:12+00:00
utc-time: Thursday, 01-Aug-24 12:20:12 UTC
server-time: 2024-08-01T12:20:10+00:00

wp-database

extension: mysqli
server_version: 8.0.16
client_version: mysqlnd 8.1.23
max_allowed_packet: 16777216
max_connections: 151

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /Users/carolina/LocalSites/66/app/public/wp-content
WP_PLUGIN_DIR: /Users/carolina/LocalSites/66/app/public/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: true
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable

`

[margarita-boomCodes]

I'm not sure if it's relevant, but I wanted to report also the following bug on a fluid theme:

If I add a new pattern in the pattern directory, it doesn't show in the block search, unless I delete the relevant transient (_site_transient_wp_theme_files_patterns-xxxx) in the options or define the 'WP_DEVELOPMENT_MODE', to 'theme', which of course is off on production sites.

[sangtlee]

I'm not sure if it's relevant, but I wanted to report also the following bug on a fluid theme:

If I add a new pattern in the pattern directory, it doesn't show in the block search, unless I delete the relevant transient (_site_transient_wp_theme_files_patterns-xxxx) in the options or define the 'WP_DEVELOPMENT_MODE', to 'theme', which of course is off on production sites.

This should be raised as a bug -- I just spent an hour trying to figure out why my custom patterns were not showing in the block picker. Deleting this DB row was the solution. TY @margarita-boomCodes

[margarita-boomCodes]

@sangtlee I've just created a new ticket for that #65335

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[Ardmark]

This may help someone: in Twenty Twenty-Five, if you add a pattern in the /patterns folder, it won't show up anywhere. Go to Tools -> Edit Themes, the pattern will show in the Theme Files pane. Select it and click 'Update file' - the pattern becomes available

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.