Custom plugin block not working

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 the block.json file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.www.ads-software.com/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 7 months, 3 weeks 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.php

BUT 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 build

creates 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 7 months, 2 weeks 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.