learnwebcode / brads-boilerplate-wordpress Goto Github PK

Hi,
I was trying your boilerplate theme without tailwind but it seems that the react build that is build with npm run preview or npm start is a production build and not a development build. When I console log process.env.NODE_ENV it logs development. I followed the readme for installation on a mac and a desktop and the same issue came up on both. Is there any way to change the build type to development?

This is an excellent framework! I'm trying to create multiple react apps that will be plugins to a WordPress website. My issue is, when I make a copy of the brads-boilerplate-block plugin folder and change up the files to make a second react-based plugin, I can activated both plugins on the Plugins menu, but only one plugin will show up in the Post editor. How do we add more than one plugin to the project?

For example add lg:bg-amber-300 to your frontend.js. It won't work.
But if we add in browser with inspector
@media (min-width: 1024px) .my-unique-plugin-wrapper-class .lg\:bg-black {
we added ".my-unique-plugin-wrapper-class".
It will work.

There is no solve with usual tailwind!

I feel like i'm maybe missing something, but is it critical for your approach to use useEffect and the fetch call in the Banner EditComponent function?

I didn't understand why we were doing this so I just changed it to use setAttributes() and it seems to work the same.

our-blocks/banner.js

import apiFetch from "@wordpress/api-fetch"
import { Button, PanelBody, PanelRow } from "@wordpress/components"
import { InnerBlocks, InspectorControls, MediaUpload, MediaUploadCheck } from "@wordpress/block-editor"
import { registerBlockType } from "@wordpress/blocks"
import { useEffect } from "@wordpress/element"

registerBlockType("ourblocktheme/banner", {
  title: "Banner",
  supports: {
    align: ["full"]
  },
  attributes: {
    align: { type: "string", default: "full" },
    imageId: { type: "number" },
    imageUrl: { type: "string", default: banner.fallbackimage }
  },
  edit: EditComponent,
  save: SaveComponent
})

function EditComponent({ attributes, setAttributes, isSelected }) {
  function onFileSelect(image) {
    setAttributes({ 
      imageId: image.id,
      imageUrl: image.url
    })
  }

  return (
    <>
      <InspectorControls>
        <PanelBody title="Background" initialOpen={true}>
          <PanelRow>
            <MediaUploadCheck>
              <MediaUpload
                onSelect={onFileSelect}
                value={attributes.imageId}
                render={({ open }) => {
                  return <Button onClick={open} className="is-primary">Choose Image</Button>
                }}
              />
            </MediaUploadCheck>
          </PanelRow>
        </PanelBody>
      </InspectorControls>
      <div className="page-banner">
        <div className="page-banner__bg-image" style={{ backgroundImage: `url('${attributes.imageUrl}')` }}></div>
        <div className="page-banner__content container t-center c-white">
          <InnerBlocks allowedBlocks={["ourblocktheme/genericheading", "ourblocktheme/genericbutton"]} />
        </div>
      </div>
    </>
  )
}

function SaveComponent() {
  return <InnerBlocks.Content />
}

Updating to WP 6.4 brakes placeholder blocks using WP core functions like have_posts() and the_post(); in blocks like singlepost.php
This results in all template data inside the while loop not being output on the page.

header.php works on the homepage and sample page but not on posts. Template data of header.php is completely ommitted on posts.

Hi Brad,

Creating an issue here so it helps others as well. I basically have Windows 11 running with WSL2 enabled and Ubuntu LTS installed. I have the WP site running with Localwp. However, when I run the command yarn run preview I see the following but the http://localhost:3000 seems to have stuck. It wouldn't load anything on the browser. Just keeps spinning.

I personally think this issue is related to WSL2.

Do you have any insights on this?

I tried this code for some time since saving the React code will remove all event handling (or javascript in general) if I use the default "npx @wordpress/create-block".

Looking at the frontend.js code it looks like it uses dom manipulation with ReactDOM to replace the pre-element with the base React component, this doesn't work at all in the frontend. Looking at the readme it also looks like you're using the default react localhost:3000 while wp-env uses localhost:8888, something I find confusing.

I'll have to look for some other solution. The Edit-component works just fine, but the ReactDOM just results in a white screen. It seems to replace the pre-element with json, but building the React-component fails.

I made a component react, but it's not working in production only in preview.

PS: I'm a bit new to programming.

Hello, Thank you very much for sharing.
I'm about to publish a project :)
Since I am weak in javascript,
I want to ask a question about brads-boilerplate-theme-tailwind
I'm starting a new project, I want to use the swiper and glightbox packages.
In the previous project, I added and used it with traditional methods.
I don't know if there is a difference between methods, affecting performance vs. :)
It works when added as below in Sage 10.

import { Swiper, Navigation, Pagination, Scrollbar, EffectCoverflow, Thumbs } from 'swiper';
Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow, Thumbs]);
import GLightbox from 'glightbox';
import 'flowbite';

var swiper = new Swiper(".mySwiper", {
  speed: 600,
  parallax: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

const lightbox = GLightbox({
  selector: '.glightbox',
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});

For different reasons, I don't want to use sage.
In this project, how can we import npm packages.
Thanks

I try to use tailwind with block template, I follow the video steps then use this boilerplate but my styles don't work. Do I miss something?

That's for creating this boiler plate, it looks really useful.

I have a question about where to put image files. I have background images in the scss and webpack handles them and they end up in the build/images folder, as expected. My question though is where should I put images that are referenced in an img tag in a php file, index.php for example? Should I create a separate static images folder for these outside my src/images folder, but that will mean two locations for images, or perhaps I could move my src/images folder up a level and keep all images in one folder?

I suppose at the end of the day I could do either but I'm wondering if I'm missing something or there is a preferred way?

Thanks
Bryan

When I copy the theme or plugin to the appropriate folder and activate it, everything works fine. But after I run 'npm run start' the custom elements disappear. The review revealed that the /build folder is now empty. Tested in WP 5.7.2 and 5.9.3

I tried to use it, but it looks like that the component in frontend.js (OurComponent) never gets rendered in this repo.
in the index.js the save function returns nothing
save: function () { return null }

which would explain why the block in the frontend is empty.

If you made this into a plugin classes developer can use add new blocks to your plugin I gave it a try, and make my own block to expand it functional

How to create more than 1 different block in tailwind plugin? if we use frontend.js we can pass here only one block. but if we want to create file with different name it won't be in the build falder whatever we will do.

i have install it 1:1 up to yor YT video, but the tailwind dont show the changes like background color changes ? anybod can help ?