0

I am trying to create custom plugins for WordPress using React. For context, I have been following this video:

https://www.youtube.com/watch?v=NKqogVcqDHA

Running WordPress locally on XAMPP, I have added two new plugins:

--wp-content
----plugins
---+added-plugin-one
---+added-plugin-two

Each added plugin has the same basic structure – they are React apps that have been added following the instructions in the video (in the Boilerplate Plugin section).

When I add the plugins and run npm run build, I can see them on the Plugins menu on the WordPress Dashboard. I can activate both plugins from this screen as well (see screenshot of plugins menu with “Brad’s Boilerplate Block Plugin” and “Jon’s Boilerplate Block Plugin” activated):

enter image description here

However, when I go to edit a post and try to insert these blocks, I only see one of the blocks:

enter image description here

I can deactivate either one and see the other one in the post editor, but I would like to see both plugins and be able to use both of them. Is there a reason why I might only be able to use one of them and not both? Thanks for any suggestions.

Here is a GitHub link to the plugins folder inside wp-content with the two plugins I am trying to add: https://github.com/jon424/two-react-plugins

4
  • can you include the code you used in your question? Even if people watch the video it's no guarantee that what you did and what the video did are the same. It's expected that questions are self contained, so you can link to the video for context but it can't be necessary for your question to make sense. Especially since Jons boilerplate plugin does not exist in the github repo in the video you linked to, and 99% of people will not spend 20 minutes watching the video
    – Tom J Nowell
    Dec 13, 2022 at 15:32
  • also, did you just copy paste the folder and rename the plugin folder/header so it showed up? If so there's a very high chance you're trying to register a block with the same name twice from 2 different plugins. This should also have been obvious from looking at the browser dev console, without seeing code I can't confirm. I tried to correct some terminology and formatting errors in the question too, you can't include a plugin in the inserter menu because a plugin is not a block, try to avoid calling blocks plugins as it will confuse people and lead to misunderstandings
    – Tom J Nowell
    Dec 13, 2022 at 15:37
  • These questions also apply to the github issue you raised at github.com/LearnWebCode/brads-boilerplate-wordpress/issues/14, there's more to what you did then just a copy paste of a folder, Brad would need to know what you did and didn't do to determine if you missed a step or if you did something you shouldn't have
    – Tom J Nowell
    Dec 13, 2022 at 15:41
  • Hi Tom - thanks for the reply. Here is the repo with the code: github.com/jon424/two-react-plugins
    – Jon
    Dec 13, 2022 at 16:54

1 Answer 1

3

You haven’t given each block its own name. They’re both named makeupnamespace/make-up-block-name. You need to change the name of at least one of the blocks so that they’re unique.

1
  • 1
    all the scripts and styles have the same names too makeUpANameHereScript etc, they must be unique
    – Tom J Nowell
    Dec 13, 2022 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.