them-es / starter-fse Goto Github PK

View Code? Open in Web Editor NEW

75.0 9.0 17.0 151 KB

Block-based "FSE" WordPress Starter Theme.

Home Page: https://them.es/starter-fse

License: GNU General Public License v2.0

JavaScript 9.54% SCSS 28.25% HTML 40.51% PHP 18.09% CSS 3.61%

sass wordpress-theme full-site-editing block-based-themes wordpress

starter-fse's Introduction

them.es Starter Full Site Editing (FSE) Theme

them.es Starter is a WordPress Starter Theme built for the new Full Site Editing experience. Please note that the Source files are only recommended for WordPress Developers who are searching for a simple, solid, proved and tested Full Site Editing Starter Theme to build upon. Don't expect a ready-to-use WordPress Theme!

If you want to see it in action or want to download a customized Theme for free, check out https://them.es/starter-fse

What's included?

WordPress Theme
Full Site Editing configuration: Templates, Template parts, theme.json and Sass Source files
webpack configuration
2 Menus

Task Automation

This Theme comes with a built in webpack task automation. Sass files will be compiled if changed, vendor prefixes will be added automatically and the CSS will be minified. JS source files will be bundled and minified.

Prerequisites: Node.js (NPM) needs to be installed on your system
Open the Project directory / in Terminal and install the required Node.js dependencies: webpack, Sass-Compiler, Autoprefixer, etc.
$ npm install
Run the watch script
$ npm run watch
Modify /theme.json (Global settings for the block editor including the CSS variables), /assets/main.scss and /assets/main.js

Test the Theme
Run the build script
$ npm run build

(Optional) Include blocks in the theme

Download or fork WordPress Blocks Starter
Reference it via functions.php as described in Setup
Build your custom blocks

Technology

Copyright & License

Code and Documentation © them.es

Code released under GPLv2+

starter-fse's People

Contributors

Stargazers

Watchers

Forkers

takeshi81 xarop itowhid06 hitesh97 xstaticwebdev lgmchessfan philbraun ironlady mnabrdalik dexit ellcreativejoris kbalicki anthonylpg albertalbs fullstack65 mayukojpn jbro-here

starter-fse's Issues

Can we add tailwind ?

hi,
Great repo, thanks
It would be great if you can add tailwind :)

Error: Cannot find module '@wordpress/scripts/config/webpack.config'

I try to run 'npm run watch' but it doesn't work I got the following errors

Error: Cannot find module 'webpack-remove-empty-scripts'
I solved it with
npm install webpack-remove-empty-scripts --save-dev

Then I get the following error

Error: Cannot find module '@wordpress/scripts/config/webpack.config'
And try to solve with the following command but it doesn't work

npm i webpack-dev-server

I also saw many outdated packages when installing it

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated    
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, 
upgrade your dependencies to the actual version of core-js.

added 657 packages, and audited 658 packages in 27s

57 packages are looking for funding
  run `npm fund` for details

33 vulnerabilities (1 low, 6 high, 26 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Missing webpack.config.js

The webpack.config.js is missing from the repo but is included in the .zip when you get a copy of the theme from your website.
without it , the "npm run watch" script fails.

Overriding webpack config : Blocks are not added in the build directory

Hi thanks for your work, discovering the power of FSE !

I've added your wordpress block1 starter in a new src directory in the theme and just ran npm run start but the block doesn't end up in the build directory.

When I delete the webpack.config.js the block ends up in build but all the other cool stuff like enjoying global js and scss don't work anymore.

What am I missing out ?

Cheers

Is gulp required ?

When i type: npm install, i get this error:
Local gulp not found in ~/Local Sites/

NB: I get this when i generate a theme using https://them.es/starter-fse/

Individual SASS/CSS files for blocks

Hey,
great starter theme, but it would be amazing to add support to be able to add individual block level SASS/CSS files to the theme.

So adding
"style": [ "file:./myblock.css" ],
works when adding a "myblocks.scss" file to the blocks/myblock/ directory.

Thanks,
Michael