learnwebcode / brads-boilerplate-wordpress Goto Github PK
View Code? Open in Web Editor NEWAn example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS
License: MIT License
An example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS
License: MIT License
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 ?
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.
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
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?
I try to modify
"scripts": {
"sync": "browser-sync start -p 'localhost/wp' --files '**/*.php' 'build/*.js' 'build/*.css'",
But after npm run sync, the URL will jump to http://localhost/%27localhost/wp%27
Weird, what did I do wrong? Thanks
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 />
}
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?
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
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
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
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!
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?
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 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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.