Merge pull request #9 from WP-Performance/feat/admin-script

add scripts for admin and clean code

admin/README.md

@@ -0,0 +1,4 @@
+This dir is used for create admin scripts and styles :
+
+- The script is used only for gutenberg editor.
+- The style for all admin.

admin/assets/css/custom-login.css

@@ -0,0 +1,45 @@
+body {
+  background: #232634;
+}
+
+/* Logo */
+#login h1 a,
+.login h1 a {
+  background-image: url('../media/icon.svg');
+  background-size: contain;
+}
+
+#login form,
+.login form {
+  background-color: #232634;
+  border: 0;
+}
+
+#login form label,
+.login form label {
+  color: #bbbfce;
+}
+
+/* Bouton */
+.wp-core-ui .button-primary {
+  background: rgb(190, 24, 93);
+  border-color: rgb(190, 24, 93);
+}
+
+.wp-core-ui .button-primary:hover {
+  background: rgb(156, 17, 75);
+  border-color: rgb(163, 19, 79);
+}
+
+/* Liens */
+.login #backtoblog a,
+.login #nav a,
+.privacy-policy-page-link a {
+  color: #bbbfce;
+}
+
+.login #backtoblog a:hover,
+.login #nav a:hover,
+.privacy-policy-page-link a:hover {
+  color: rgb(190, 24, 93);
+}

admin/assets/css/styles.css

@@ -0,0 +1,3 @@
+.edit-post-visual-editor__content-area .is-desktop-preview {
+  background: #000 !important;
+}

admin/assets/js/scripts.js

@@ -0,0 +1,27 @@
+wp.domReady(() => {
+  // exemple for add styles to block image
+  // wp.blocks.registerBlockStyle('core/image', {
+  //   name: 'bottom-right',
+  //   label: 'Bottom Right',
+  // })
+  // wp.blocks.registerBlockStyle('core/image', {
+  //   name: 'bottom-left',
+  //   label: 'Bottom Left',
+  // })
+  // wp.blocks.registerBlockStyle('core/image', {
+  //   name: 'center',
+  //   label: 'Center',
+  // })
+
+  // sometime unregister don't work without that
+  window._wpLoadBlockEditor.then(() => {
+    console.log('Gutenberg ready !')
+    // remove styles
+    wp.blocks.unregisterBlockStyle('core/button', [
+      'default',
+      'fill',
+      'outline',
+    ])
+    wp.blocks.unregisterBlockStyle('core/image', ['rounded'])
+  })
+})

admin/main.js

@@ -0,0 +1,4 @@
+// get styles
+import './assets/css/styles.css'
+// get scripts
+import './assets/js/scripts.js'

admin/vite.config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import react from '@vitejs/plugin-react'
+import viteConfig from '../vite.config'
+import getThemeDir from '../inc/js-helpers/getThemeDir.js'
+
+const viteAdminConfig = {
+  ...viteConfig,
+  ...{
+    // add react for use jsx and extends gutenberg blocks :)
+    plugins: [...viteConfig.plugins, react()],
+    base:
+      process.env.APP_ENV === 'development'
+        ? `/wp-content/themes/${getThemeDir()}/admin/`
+        : `/wp-content/themes/${getThemeDir()}/admin/dist/`,
+    build: {
+      ...viteConfig.build,
+      ...{
+        outDir: resolve(__dirname, 'dist'),
+        rollupOptions: {
+          input: resolve(__dirname, 'main.js'),
+        },
+      },
+    },
+    server: {
+      ...viteConfig.server,
+      ...{
+        port: 4444,
+        hmr: {
+          ...viteConfig.server.hmr,
+          ...{ port: 4444 },
+        },
+      },
+    },
+  },
+}
+
+export default defineConfig(viteAdminConfig)

composer.json

@@ -0,0 +1,13 @@
+{
+    "name": "patrickfaramaz/press-wind",
+    "description": "starter theme WordPress with Vite.js and Tailwind",
+    "authors": [
+        {
+            "name": "ipatate",
+            "email": "faramazpat@gmail.com"
+        }
+    ],
+    "require-dev": {
+        "phpunit/phpunit": "^10.0"
+    }
+}

functions.php

@@ -6,15 +6,14 @@
   define('WP_ENV', 'development');
 }
 
-// core
-require_once dirname(__FILE__) . '/inc/core/disable/index.php';
-require_once dirname(__FILE__) . '/inc/core/assets.php';
+// include core files (don't touch this files !)
+require_once dirname(__FILE__) . '/inc/core/core.php';
 
-// inc
+// inc, you can modify this files like you want
 require_once dirname(__FILE__) . '/inc/disable.php';
 require_once dirname(__FILE__) . '/inc/gutenberg.php';
 
-// pwa icons
+// pwa icons injected in head
 if (file_exists(dirname(__FILE__) . '/inc/pwa_head.php')) {
   include dirname(__FILE__) . '/inc/pwa_head.php';
 }

inc/core/.README

@@ -1 +1 @@
-## Please, don't modify this files !
+## Please, don't modify files in core folder !

inc/core/admin-assets.php

@@ -0,0 +1,103 @@
+<?php
+
+namespace PressWind\inc\core;
+
+require_once(dirname(__FILE__) . '/helpers/getManifest.php');
+require_once(dirname(__FILE__) . '/helpers/getTokenName.php');
+
+/**
+ * Enqueue scripts.
+ *
+ */
+function add_admin_script()
+{
+  // for theme
+  $path = get_template_directory_uri();
+
+  if (WP_ENV !== 'development') {
+    // get files name list from manifest
+    $config = helpers\getManifest('admin/dist/manifest.json');
+
+    if (!$config) return;
+    // load others files
+    $files = get_object_vars($config);
+    // order files
+    $ordered = helpers\orderManifest($files);
+
+    // loop for enqueue script
+    foreach ($ordered as $key => $value) {
+      wp_enqueue_script('press-wind-theme-' . $key, $path . '/admin/dist/' . $value->file, ['wp-blocks', 'wp-dom'], $key, true);
+    }
+  } else {
+    // development
+    wp_enqueue_script('press-wind-theme', 'http://localhost:4444/admin/main.js', ['wp-blocks', 'wp-dom'], strtotime('now'), true);
+  }
+}
+
+
+/**
+ * Register the JavaScript for the public-facing side of the site.
+ */
+function enqueue_admin_scripts()
+{
+  // update script tag with module attribute
+  add_filter('script_loader_tag', function ($tag, $handle, $src) {
+    if (strpos($handle, 'press-wind-theme') === false) {
+      return $tag;
+    }
+    // change the script tag by adding type="module" and return it.
+    $tag = '<script type="module" crossorigin src="' . esc_url($src) . '"></script>';
+    return $tag;
+  }, 10, 3);
+
+  add_action('enqueue_block_editor_assets', __NAMESPACE__ . '\add_admin_script');
+}
+
+
+/**
+ * Register the CSS
+ */
+function enqueue_admin_styles()
+{
+  if (!file_exists(dirname(__FILE__) . '/../../admin/dist/manifest.json')) return;
+  add_action(
+    'admin_enqueue_scripts',
+    function () {
+      // theme path
+      $path = get_template_directory_uri();
+
+      if (WP_ENV !== 'development') {
+        // get file name from manifest
+        $config = helpers\getManifest('admin/dist/manifest.json');
+        if (!$config) return;
+        $files = get_object_vars($config);
+        // order files
+        $ordered = helpers\orderManifest($files);
+        // search css key
+        foreach ($ordered as $key => $value) {
+          // only entry and css
+          if (property_exists($value, 'css') === false) continue;
+          $css = $value->css;
+          // $css is array
+          foreach ($css as $file) {
+            // get token file
+            $token = helpers\getTokenName($file);
+            wp_enqueue_style(
+              'press-wind-theme-' . $key,
+              $path . '/admin/dist/' . $file,
+              array(),
+              $key,
+              'all'
+            );
+          }
+        }
+      }
+    }
+  );
+}
+
+
+
+
+add_action('init', __NAMESPACE__ . '\enqueue_admin_scripts');
+add_action('init', __NAMESPACE__ . '\enqueue_admin_styles');