Blocks not showing up in Wordpress editor

[jaredcbaum]

Description

I took your blocks example and hooked it up to my site, but I'm unable to see blocks show up in the Gutenberg editor after running faust blockset. I am hosting on Kinsta and running PHP Version 8.2 and Wordpress Version 6.5.2

Steps to reproduce

npx create-next-app \
-e https://github.com/wpengine/faustjs/tree/canary \
--example-path examples/next/block-support \
--use-npm

2. cd into repo
3. npm i and add environment variables hooking up site to Faustjs

Additional context

Plugins installed

WPGraphQL Version 1.23.0
WPGraphQL for ACF Version 2.2.0
Advanced Custom Fields Version 6.2.9
Faust.js™ Version 1.2.3

@faustwp/core Version

3.0.1

@faustwp/cli Version

3.0.1

FaustWP Plugin Version

1.2.3

WordPress Version

6.5.2

Additional environment details

Output of npm run blockset command:

npm info using [email protected]
npm info using [email protected]
npm verb title npm exec wp-scripts start --no-watch --webpack-src-dir=wp-blocks --output-path=/Users/myusername/Documents/Repos/block-support/.faust/build
npm verb argv "exec" "wp-scripts" "start" "--package" "@wordpress/scripts" "--loglevel" "verbose" "--" "--no-watch" "--webpack-src-dir=wp-blocks" "--output-path=/Users/myusername/Documents/Repos/block-support/.faust/build"
npm verb logfile logs-max:10 dir:/Users/myusername/.npm/_logs/2024-04-19T16_21_01_049Z-
npm verb logfile /Users/myusername/.npm/_logs/2024-04-19T16_21_01_049Z-debug-0.log
assets by path block-a/ 18.5 KiB
  assets by chunk 17 KiB (name: block-a/index)
    asset block-a/index.js 15.9 KiB [emitted] (name: block-a/index) 1 related asset
    asset block-a/index.css 993 bytes [emitted] (name: block-a/index) 1 related asset
    asset block-a/index.asset.php 134 bytes [emitted] (name: block-a/index)
  asset block-a/style-index.css 1.03 KiB [emitted] (name: block-a/style-index) (id hint: style) 1 related asset
  asset block-a/block.json 453 bytes [emitted] [from: wp-blocks/block-a/block.json] [copied]
assets by path block-b/ 189 KiB
  assets by chunk 187 KiB (name: block-b/index)
    asset block-b/index.js 187 KiB [emitted] (name: block-b/index) 1 related asset
    asset block-b/index.asset.php 152 bytes [emitted] (name: block-b/index)
  asset block-b/style-index.css 1.06 KiB [emitted] (name: block-b/style-index) (id hint: style) 1 related asset
  asset block-b/block.json 690 bytes [emitted] [from: wp-blocks/block-b/block.json] [copied]
Entrypoint block-a/index 18.1 KiB (12.4 KiB) = block-a/style-index.css 1.03 KiB block-a/index.css 993 bytes block-a/index.js 15.9 KiB block-a/index.asset.php 134 bytes 3 auxiliary assets
Entrypoint block-b/index 188 KiB (174 KiB) = block-b/style-index.css 1.06 KiB block-b/index.js 187 KiB block-b/index.asset.php 152 bytes 2 auxiliary assets
orphan modules 1.05 MiB (javascript) 937 bytes (runtime) [orphan] 266 modules
runtime modules 8.61 KiB 20 modules
built modules 133 KiB (javascript) 756 bytes (css/mini-extract) [built]
  modules by path ./node_modules/ 127 KiB
    modules by path ./node_modules/@faustwp/block-editor-utils/dist/mjs/ 14 KiB 19 modules
    modules by path ./node_modules/graphql/ 92.7 KiB 18 modules
    ./node_modules/graphql-tag/lib/index.js 4.28 KiB [built] [code generated]
    ./node_modules/tslib/tslib.es6.mjs 15.9 KiB [built] [code generated]
  modules by path ./wp-blocks/ 5.47 KiB (javascript) 756 bytes (css/mini-extract)
    modules by layer 5.47 KiB 10 modules
    css modules 756 bytes
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./wp-blocks/block-a/style.scss 262 bytes [built] [code generated]
      + 2 modules
  + 6 modules
webpack 5.91.0 compiled successfully in 714 ms

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

• Yes

[ilyaAshurok]

Hi, I have the same issue on the same versions. npm run blockset works properly and creates block inside uploads/faustwp/blocks, but this error appears in block editor console:

Uncaught TypeError: Cannot read properties of undefined (reading 'blocks')
    at @wordpress/blocks (external window ["wp","blocks"]:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/@faustwp/block-editor-utils/dist/mjs/registerFaustBlock.js (index.js:2:31)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/@faustwp/block-editor-utils/dist/mjs/index.js (registerControl.js:9:32)
    at __webpack_require__ (bootstrap:19:1)
    at ./wp-blocks/my-first-block/index.js (MyFirstBlock.jsx:15:28)
    at __webpack_require__ (bootstrap:19:1)
    at startup:4:1
    at __webpack_require__.O (chunk loaded:23:1)

Seems like registerFaustBlock fires before wp.blocks have been created?

[theodesp]

cc @josephfusco

[theodesp]

Hey @jaredcbaum I was able to reproduce but it does not make sense.

I tried to load a block using the https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/ and while I was having it loaded together with the blocks that I register using blockset command the blocks were loaded correctly:

As long as I have a dummy block there loaded the blocks load correctly. @josephfusco any ideas why?

[jan-clockworkwp]

Hi @theodesp my experience is that since WordPress core 6.5, I had to apply this dirty tweak #1706 (comment) to be able to see custom blocks generated via faust blockset script in WordPress admin, despite the fact that the script is emitting blocks were generated successfully. Obviously this is not the way to solve this issue and as #1706 issue is already closed and there is no feedback to my comment nor to #1706 (comment) , I am wondering if this issue could have a bit more attention, or at least if you/anyone could bring some light into why since WP core 6.5 we need to add as well index.asets.php file, why it is removed by faust blockset, what is the best way to go about it and if this issue will be addresses in next package release? Really appreciate any input, many thanks!

@jaredcbaum worth trying if this helps you to see blocks again in WP admin as temporary workaround.

[theodesp]

Hey @jan-clockworkwp. Indeed, we remove any php files before uploading to WordPress because of security concerns because we upload files into the wp-uploads folder since some providers like WP Engine have filters that block this operation while unzipping php files.

[jan-clockworkwp]

Hey @theodesp, thanks for the heads up on the reason why. It makes sense. My question is, what can we do about it? The problem of not seeing the custom block within the Gutenberg editor still persists if index.asset.php is not present in the FaustWP custom WordPress block upload folder etc. uploads/faustwp/blocks/your-custom-block/.

[theodesp]

Hey @jan-clockworkwp sorry for the late response. We are currently looking at some new relevant updates committed in WordPress develop regarding the optional index.asset.php here: WordPress/wordpress-develop#5799

[theodesp]

@jan-clockworkwp @jaredcbaum the latest plugin update @faustwp/[email protected] version contains a fix for this issue. I'm closing this ticket but feel free to comment back if you still any problems.

[jan-clockworkwp]

@theodesp Perfect, sounds great. I have tried the updated package version 1.3.2 on WP Core v6.5.5, and indeed, custom blocks are now working in WP admin even if the index.asset.php file is not present.

Note: Just FYI, if someone tries to test it the way I did initially by renaming index.asset.php to index.asset.php-bckp, it will throw a PHP fatal error. If the file is not present, all works as expected. Thank you.