search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

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

Open carolinan opened 1 month ago

carolinan commented 1 month ago

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.

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

HosseinKarami commented 1 month ago

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 commented 1 month ago

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 commented 2 weeks ago

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 commented 3 days ago

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