Help needed creating WP blocks

Blocks
1

Hi everyone,

I am trying to build and export WordPress blocks/plugins using Pinegrow’s Web Editor. I’ve encountered a few hurdles, and if anyone can help, it would be greatly appreciated.

My workflow is as follows:

  1. I created a folder on my desktop titled Plugins.

  2. In Pinegrow, I created a new Plain HTML page/project.(I selected index.html, not index-normalize.html (I don’t know the difference between them. I searched on Pinegrow, but couldn’t find anything. Is one better than the other for building WP blocks/plugins?)

  3. I saved the file as index.html in the Plugins folder.

  4. A pop-up asked if I wanted to open the folder Plugins as a project, and I clicked the Yes button.

  5. I copied HTML and CSS code from Brackets and inserted it into the index.html and style.css files. Everything in the editor looks fine.

  6. I clicked the Activate WordPress button in the WordPress panel The Plugin Settings window opened, and I completed it, choosing Plugin, not Theme. After saving the settings, I was asked to save the page. When doing so, I was greeted by this pop-up window. What should I do here?

pinegrow-3
pinegrow-31540×811 109 KB

  1. If I Cancel, a similar pop-up appears. If I check the box and click Save Selected, another, very different pop-up window appears.

Thanks for any help you can provide.

Kind regards,

Mark

2

@MarkCarr

A simple answer to the two main questions:

index normalize gives you a starter CSS file, kind of like a reset.css, with the following benefits:

  • Preserves useful defaults, unlike many CSS resets.

  • Normalizes styles for a wide range of elements.

  • Corrects bugs and common browser inconsistencies.

  • Improves usability with subtle modifications.

Want to know more? Check out GitHub - necolas/normalize.css: A modern alternative to CSS resets

Note: Yeah, it might actually be a good idea to add a short description (or a link) right from the Pinegrow interface. (No promises or ETA, but it’s an idea to consider.)

About the second point: if I understand you correctly, your mistake is that your project folder and your export folder are the same.

To make this work you need a project folder - a master folder where you keep everything Pinegrow will edit: HTML, CSS, images, etc. In the WordPress plugin settings you should set a different export folder, preferably an empty one to start.

And usually the ideal WorkPress dev workflow with Pinegrow is to have WordPress installed locally on your computer and point the export folder to the suggested path (see screenshot below), so you can test your site live.

image
image1810×188 14.9 KB

That way Pinegrow should stop asking you, unless you go and mess with some files in the export folder so they end up out of sync with the master.

Good luck with what’s next.

3

Hi Emmanuel,

Thanks for responding to my post.

  1. Regarding the normalize.css file, perhaps I should have known better. A long time ago, I downloaded that file and incorporated parts of it in my own CSS reset. Unfortunately, I didn’t connect the dots :slightly_frowning_face:

On the subject of CSS, given that I intend to create a series of WP plugins/blocks, is referring all the blocks to the same external file (style.css) the best approach? Can you recommend a better alternative? I don’t want each block to have its own stylesheet. This is how I managed CSS when using Dreamweaver. With Bricks, I add all the custom CSS to the Child Theme, making it manageable.

  1. With respect to the export folder, when logging into my server, I see a wp-content folder. Inside are plugins and themes folders. The plugins folder includes an index.php file and a distinct folder for every plugin I built/created. And inside of each, this is what I see.

pinegrow-6
pinegrow-61231×123 15.6 KB

Inside the themes folder is a separate folder for each of the following three themes: 2025, 2024, and 2023.

My web projects are saved in the Documents folder. Unless you suggest a better alternative, that is where I will place my project folder (Plugins).

You mentioned, “In the WordPress plugin settings, you should set a different export folder, preferably an empty one to start.”

Where exactly should that folder be? Should I select an existing folder or create a new one? If the latter, should I place it inside the plugins or themes folder, and should I give it the same name or a different one?

Sorry, Emmanuel, this is all new to me, and I don’t want to start a project only to find out I erred and have to redo the blocks because the files are out of sync.

When done, I want to export the blocks in one zip file to send to clients. They will need to upload, install, and activate the plugin like every other WP plugin. As I add more blocks, I’ll send them a new .zip file. That’s the idea.

Most page builders are too busy/overwhelming to manage; yes, I know Pinegrow is not a page builder. I want to keep my clients away from the builders and allow them to modify the content using the control fields in the block editor.That’s my focus.

Thanks again, and have a terrific weekend.

Mark