Hi, i have error on…

Hi, i have error on my console and I have error in my terminal when I run npm run watch
“WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main.css (284 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (484 KiB)
main.css
main.js
main.asset.php

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

How to solve this error

Starter Themes with a new build workflow

We’ve received feedback from our community that the old build workflow (using Gulp and/or webpack to generate the CSS/JS assets) included several package vulnerabilities that have not been fixed for quite a while and obviously have become unmaintained by the creators.

One could argue that this should not be problematic, as these dependencies only affect the local development system – and as long as the build process still works, there’s no need to change a running system.
But using obsolete and unsupported software can be dangerous and can break things “overnight”. Not to mention potential security risks that may arise in the web development stack.

So it was necessary to find a new simple, modern and future-proof build process for the frontend assets
Fortunately the research did not take too long. The @wordpress/scripts package from the awesome Gutenberg community already comes with a proven and tested webpack configuration specific to WordPress development, which made it a perfect candidate to try out.

After some trial-and-error the build process worked pretty well and that’s why all our Starter Themes (Full Site Editing, Bootstrap and Material Design) have been updated to include this “webpack only” workflow from WordPress. From now on Gulp (including its several internal dependencies that are outdated) is not needed anymore.

Start the development process:
$ npm run watch
Build and minify the assets:
$ npm run build

👆 Breaking change: The build directories have been moved from /assets/css and /assets/js to /build which aligns with the @wordpress configuration. If you want to include the new workflow in an existing theme, please have a look at the source code in the Github repositories of the Starter Theme and adjust the paths of the JS/CSS assets in functions.php accordingly.

WordPress Playground

Would you like to play around with an instant WordPress installation that runs in your browser? Visit https://them.es/playground – 🪄 powered by playground.wordpress.net – and give it a try.

Quickly demonstrate the WordPress dashboard to interested people or temporarily test Themes and Plugins without the need of an entire web server:

20 years WordPress

Today our favorite CMS celebrates its 20th anniversary 🎉. A special website dedicated to this event has been established by the WordPress team:

What started as a way to make a better blogging experience has grown into a vibrant open source project that powers an ever-growing percentage of the world’s websites.

https://wp20.wordpress.net

Let’s commemorate some historic milestones the WordPress project passed within two decades:

May 2003: WordPress 0.7 – The first release

January 2004: WordPress 1.0

May 2004: Support for plugins

August 2006: The first WordCamp has been organized

December 2008: Automatic upgrades with a single click

June 2010: Multisite functionality

October 2013: Automatic maintenance and security background updates

December 2015: The WP-API has been integrated

December 2018: A new block-based Editor

July 2021: theme.json

January 2022: Full Site Editing

#anniversary, #wordpress, #wp20

Hi, I’ve installed everything for…

Hi, I’ve installed everything for the bootstrap theme and trying to follow the instructions here: https://them.es/setup/
Where it says “import the provided XML”, where is this provided? I can’t find it anywhere.

Hi,

When my site is loading, this link https://tl.ytlogs.ru/timesince is running in the background.
I use this start theme for two my projects, now i have problems.

I have been trying to…

I have been trying to edit the website, from the given questionaire but, i do not have any option to change the contents of the website

I get this /#more-57 in…

I get this /#more-57 in my url from archive page on read-more link. SO how can I get rid of it?
Tnx

Problems styling bootstrap starter theme

Hello! I’m fairly new to web programming, tough I’ve been developing mobile for a long time already. I was trying to set up a WordPress page using the Bootstrap Starter Theme for WordPress.

Steps I followed before my problem:
1. I downloaded from https://them.es/starter-bootstrap/ a theme with my custom settings.
2. I added the new Theme to my WordPress page, and activated it
3. I used that same file on my local machine, and installed all the npm dependencies
4. I run the npm run watch command

After all these steps, I modify the main.scss file, for example creating a color and updating the colors map according to the documentation.

//4. Include any default map overrides here
//Create your own map
$custom-colors: (
"testcolor": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

I let watch to compile all the files correctly, and after that, I copy all the files to the “themes” folder inside my wordpress folders.

The problem is that if I try to use this new value on a page, for example using bg-testcolor in a nav, the variable won’t get used. If I inspect the code, the values that I see being used are from _root.scss, and it won’t have this new testcolor. If I continue looking at the inspector, the themes/mytheme/assets/dist/main.css will have the value correctly defined, but it is just not existing on the inspected code.

Did I forget to configure anything?

I hope I made myself clear, maybe this wasn’t asked the correct way. Thanks!

EDIT:
Seems like importing
<link rel="stylesheet" href="wp-content/themes/my_theme/assets/dist/main.css">
In my header.php‘s header makes the page indeed use the variable I want of the compiled main.css file. I’m wondering if I missed some step on the installation process and the WordPress Theme is not using the correct variables? Ehitherway, now it feels like it’s working!!

npm “global” packages

If you manage multiple themes with similar npm dependencies you should install npm packages globally and link them in your theme directories. First of all this saves a lot of disk space. But it also disburdens the upgrade process of development frameworks and toolkits that are used across projects.

1. Install packages globally by adding the “-g” flag:
$ npm install -g package_1 package_2 package_3 package_4 etc.

2. Link the packages in your local theme directory/directories:

Bootstrap-Theme
$ npm link bootstrap @popperjs/core ...

Material-Theme
$ npm link material-components-web ...

FSE-Theme
$ npm link autoprefixer css-loader sass sass-loader ...

Happy Coding!

#development, #npm, #tip