06 WP Scripts, WPify Assets, WPify Plugin Utils

.nvmrc

@@ -0,0 +1 @@
+18

README.md

@@ -62,5 +62,14 @@ We want to be able to render templates easily, even in Twig. In this step, we ar
 
 Links: [WPify Templates](https://packagist.org/packages/wpify/templates)
 
+### 06 - WordPress Scripts, Assets and WPify Plugin Utils
 
-[Next step >>>](https://github.com/wpify/plugin-tutorial/tree/06-assets-utils)
+Now we have a plugin with custom block, but we need to add some scripts and styles to the plugin. In this step, we are
+adding WordPress Scripts and WPify Plugin Utils.
+
+Links: 
+[WordPress Scripts](https://www.npmjs.com/package/@wordpress/scripts), 
+[WPify Plugin Utils](https://packagist.org/packages/wpify/plugin-utils), 
+[WPify Asset](https://packagist.org/packages/wpify/asset)
+
+[Next step >>>](https://gitlab.com/wpify/bedrock-skeleton)

assets/scripts/plugin-tutorial.js

@@ -0,0 +1,3 @@
+document.addEventListener('DOMContentLoaded', function () {
+  alert('Plugin Tutorial JS');
+});

assets/styles/plugin-tutorial.scss

@@ -0,0 +1,5 @@
+.book-link {
+  border: 1px solid red;
+  border-radius: 5px;
+  padding: 10px 20px;
+}

bootstrap.php

@@ -19,6 +19,7 @@
 use WpifyPluginTutorialDeps\DI\NotFoundException;
 use WpifyPluginTutorial\Plugin;
 use WpifyPluginTutorialDeps\Wpify\Model\Manager;
+use WpifyPluginTutorialDeps\Wpify\PluginUtils\PluginUtils;
 use WpifyPluginTutorialDeps\Wpify\Templates\TwigTemplates;
 use WpifyPluginTutorialDeps\Wpify\Templates\WordPressTemplates;
 
@@ -41,6 +42,7 @@ function wpifypt_container(): Container {
 	if ( empty( $container ) ) {
 		$containerBuilder = new ContainerBuilder();
 		$containerBuilder->addDefinitions( array(
+			PluginUtils::class        => create()->constructor( __FILE__ ),
 			WordPressTemplates::class => create()->constructor( array(
 				plugin_dir_path( __FILE__ ) . 'templates',
 			) ),

composer-deps.json

@@ -4,6 +4,8 @@
         "php-di/php-di": "^7.0",
         "wpify/custom-fields": "^3.9",
         "wpify/model": "^4.0",
-        "wpify/templates": "^3.0"
+        "wpify/templates": "^3.0",
+        "wpify/plugin-utils": "^1.0",
+        "wpify/asset": "^1.2"
     }
 }

package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@wordpress/scripts": "^26.6.0"
+  },
+  "scripts": {
+    "start": "wp-scripts start",
+    "build": "wp-scripts build"
+  }
+}

src/Frontend.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace WpifyPluginTutorial;
+
+use WpifyPluginTutorialDeps\Wpify\Asset\AssetFactory;
+use WpifyPluginTutorialDeps\Wpify\PluginUtils\PluginUtils;
+
+class Frontend {
+	public function __construct( PluginUtils $utils, AssetFactory $asset ) {
+		$asset->wp_script( $utils->get_plugin_path( 'build/plugin-tutorial.js' ) );
+		$asset->wp_script( $utils->get_plugin_path( 'build/plugin-tutorial.css' ) );
+	}
+}

src/Plugin.php

@@ -20,6 +20,7 @@ public function __construct(
 		TaxonomiesManager $taxonomies_manager,
 		BlocksManager $blocks_manager,
 		RepositoriesManager $repositories_manager,
+		Frontend $frontend,
 	) {
 		// stuff to do on plugin load
 	}

templates/blocks/book-link.php

@@ -11,7 +11,7 @@
 	return;
 }
 ?>
-<h1<?= $id ? 'id="' . esc_attr( $id ) . '"' : '' ?>>
+<h1<?= $id ? 'id="' . esc_attr( $id ) . '"' : '' ?> class="book-link">
 	<?php
 	echo esc_html( $title );
 

templates/blocks/book-link.twig

@@ -1,4 +1,4 @@
-<h1 id="{{ anchor }}">
+<h1 id="{{ anchor }}" class="book-link">
 	{{ title }}
 
 	{% if isbn %}

webpack.config.js

@@ -0,0 +1,11 @@
+const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+
+module.exports = {
+  ...defaultConfig,
+  entry: {
+    'plugin-tutorial': [
+      './assets/scripts/plugin-tutorial.js',
+      './assets/styles/plugin-tutorial.scss',
+    ],
+  },
+};