Custom plugin block not working
-
Some background:
1. we are using an Astra Child custom block theme
2. we are using composer to package our filesI built a custom plugin block last month to help our UK customers pick from 33 different subscription options easily.
The plugin and block were working *ok* when I simply added it into the files through ftp access. the block editor screen was not working when opening or saving the page that had the new block on it.
Then it got a little worse today, I built the plugin into the repository, updated and installed with composer. The plugin is visible and activated on the plugins page, but the block itself is not visible to add to the page any longer.
I have looked through the debug.log file and only found complaints about namespacing, which I have now fixed. The block, however, is still not available to add to the page in the editor.
The plugin was built using the @wordpress/create-block package and primarily built with react.
Does anybody have any tips to point me in the right direction? 🙂The page I need help with: [log in to see the link]
-
Without source code, I would guess that the block.json is not included. Then the whole block is missing.
If this is not the case, show the source code, e.g. via github.
I cannot give access to the repository, unfortunately, as it is in a private work repository. The block.json is present in the src directory of the plugin.
The plugin was working just fine on the front end when I had just loaded it up to our hosting service through ftp, but we have had some consultants work for us and set up composer to load the files from our repository rather.
Here is the file structure of the plugin itself
and the /src directory

/src/block.json
{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "create-block/insurance-form", "title": "Insurance Form", "version": "0.1.0", "category": "widgets", "textdomain": "insurance-form", "keywords": ["insurance", "subscription", "product"], "description": "Insurance picker for UK - Cycler", "example": {}, "icon": "cart", "supports": { "html": false, "multiple": false, "color": { "text": true, "background": true } }, "editorScript": "file:./index.js", "editorStyle": "file:./style-index.css", "style": "file:./style-view.css", "render": "file:./render.php", "viewScript": "file:./view.js" }/composer.json
{ "name": "create-block/insurance-form", "type": "wordpress-plugin", "description": "insurance form for UK customers", "version": "1.0.0" }/insurance-form.php
<?php /** * Plugin Name: Bikefinder Insurance Form * Description: Insurance picker for UK - Cycler. * Requires at least: 6.1 * Requires PHP: 7.0 * Version: 0.1.0 * Author: skinnyK * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: bf-insurance-form * * @package create-block */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } /** * Registers the block using the metadata loaded from theblock.jsonfile. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function insurance_form_insurance_form_block_init() { register_block_type( __DIR__ . '/build' ); } add_action( 'init', 'insurance_form_insurance_form_block_init' );I appreciate any kind of help. feeling super lost after
1. it was working on the front end when loading the same files (except composer.json) through ftp
2. the plugin is visible, and activated, but the block itself is not appearing in the editor to add to the page.-
This reply was modified 1 year, 8 months ago by
skinnyk.
With
register_block_type( __DIR__. '/build' );you integrate the block. But I don’t see a build directory in your directory structure. This is normally created by npm when creating a release version.
ah yes! initially when I added it with ftp and this time through the repo where the build file is added to .gitignore silly me. will see if this helps solve the issue! thanks
unfortunately, after adjusting to both /src AND /src/block.json, it does not appear to be working still. the plugin is activated, but the block is still not present.
function insurance_form_block_init() { register_block_type( __DIR__ . '/src/block.json' ); } add_action( 'init', 'insurance_form_block_init' );I’m not sure if this works with a src directory. The files referenced in the block.json should also be there. My recommendation would be to work with a release package (where the build directory exists).
this is the part where it gets confusing for me. when I zipped the plugin using the script from the create-block package, it gives me this file structure
build _block.json _index.asset.php _index.js _render.php _style-view.css _view.asset.php _view.js insurance-form.phpBUT when using composer, it uses it’s own build process and adds /build to .gitignore . composer sounds like a great solution on paper, but it is giving me proper nightmares trying to convert my *already working* plugin block to work with it.
I know *something* is going in the right direction because I have to plugin activated. just this last step in make in the block available.Composer is not the solution here either. You have to compile the scripts with npm.
npm run buildcreates the build directory with all its contents based on what you have defined in package.json.
I understand that it may not be the best solution, but that is how the consultants set up our repository for CI/CD.
and for referense I am running the chain of:
npm ci – npm run build (or start during dev) – composer update – composer install
the build file is present, but in the root of the website repo directory it is set in .gitignore to ignore all build files. we have a specific workflow that the consultants have set up.here is the workflow that gets run as it is loaded from the repository
name: Push to stage on: workflow_dispatch: branches: - stage push: branches: - stage concurrency: group: ${{ github.workflow }} cancel-in-progress: true jobs: deploy: name: Deploy to stage server runs-on: ubuntu-latest steps: - name: Checkout source uses: actions/checkout@v3 - name: Configure Node.js version uses: actions/setup-node@v3 with: node-version: '18' cache: npm - name: Install NPM modules working-directory: ./ run: | npm ci npm run build - name: Get Composer cache directory id: composer-cache run: echo "dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT - name: Set up Composer caching uses: actions/cache@v3 env: cache-name: cache-composer-dependencies with: path: ${{ steps.composer-cache.outputs.dir }} key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }} restore-keys: | ${{ runner.os }}-composer- - name: Setup PHP environment uses: shivammathur/setup-php@v2 with: php-version: 8.1 coverage: none tools: composer, cs2pr - name: Optimize composer run: | sed -i -e 's/"symlink": true/"symlink": false/g' composer.json rm composer.lock - name: Install Composer dependencies working-directory: ./ run: composer build-for-deploy - name: Deploy to stage server working-directory: ./ run: | echo "::group::Setup Auth Keys" mkdir ~/.ssh echo "${{ secrets.ACTIONS_DEPLOYMENT_KEY_ED25519_BASE64 }}" | base64 -d > ~/.ssh/id_rsa chmod 600 ~/.ssh/id_rsa echo "::endgroup::" echo "::group::Pre-approve rsync destination" ssh-keyscan -p ${{ vars.ACTIONS_STAGE_DEPLOY_SSH_PORT }} -H "${{ vars.ACTIONS_STAGE_DEPLOY_SSH_HOSTNAME }}" > ~/.ssh/known_hosts echo "::endgroup::" echo "::group::RSync themes" rsync -avz -e "ssh -p ${{ vars.ACTIONS_PROD_DEPLOY_SSH_PORT }}" --delete ./public/wp-content/themes "${{ vars.ACTIONS_STAGE_DEPLOY_SSH_USERNAME }}@${{ vars.ACTIONS_STAGE_DEPLOY_SSH_HOSTNAME }}:${{ vars.ACTIONS_STAGE_DEPLOY_PATH }}wp-content/" echo "::endgroup::" echo "::group::RSync plugins" rsync -avz -e "ssh -p ${{ vars.ACTIONS_PROD_DEPLOY_SSH_PORT }}" --delete ./public/wp-content/plugins "${{ vars.ACTIONS_STAGE_DEPLOY_SSH_USERNAME }}@${{ vars.ACTIONS_STAGE_DEPLOY_SSH_HOSTNAME }}:${{ vars.ACTIONS_STAGE_DEPLOY_PATH }}wp-content/" echo "::endgroup::"This workflow generates the release-ready package and apparently uploads it to a target server. Why don’t you use this one?
I do. this is what is creating the issue. this is a new change. the original version of the custom plugin was uploaded before this new process was put in place.
initally I had just added the plugin zip file that was created by using the plugin-zip npm script from the “@wordpress/create-block” package. but now it needs to be configured differently.
I’ve added the composer.json, entry-files.json to the plugin directory and added the plugin to the composer.json in the root of the site directory as it should be. which is bringing up the plugin itself, but when activated the block that plugin added to the site before is not present. so.. it is HALF working.-
This reply was modified 1 year, 7 months ago by
skinnyk.
Without at least read access to the repo, it is difficult to help you here. It is best to speak to those who have provided it to you. If that doesn’t work, find someone here who can help you personally: https://jobs.wordpress.net/
I understand. thank you for trying to help. The solution was to rebuild the plugin with a slightly different file structure. The create-block npm package does not seem to function with the composer setup that we have 🙂 thanks again!
the solution involved moving the block.json from the src file (where create-block places is during the scaffolding process) out to the root of the plugin folder.I am considering this resolved as there was a solution.
-
This reply was modified 1 year, 8 months ago by
The topic ‘Custom plugin block not working’ is closed to new replies.