Skip to content

Commit

Permalink
feat: 調整 Tailwind 與 Number Css
Browse files Browse the repository at this point in the history
  • Loading branch information
j7-dev committed Feb 3, 2024
1 parent d6895f9 commit 5b5e27a
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 35 deletions.
13 changes: 12 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,21 @@ REDUX 會自動解析並載入 `set_extensions` 的路徑參數,所以不需
}
```

#### 4. 使用 TailwindCSS 來開發

如果你的 `WP_DEBUG``true`,那麼整個 wp-toolkit 會引入 tailwind CDN ,只需要加上前綴 `tw-` 就可以使用 tailwind 的 class

> 如果不使用前綴, tailwind 會與 WordPress 後台的 CSS 衝突
在此套件根目錄使用以下指令來打包 tailwind CSS

`npx tailwindcss -i ./inc/redux_custom_fields/bundle.css -o ./inc/redux_custom_fields/bundle-min.css --minify`

<br><br><br>

## 已經有的欄位

現有欄位可以參考 [REDUX 官網](https://devs.redux.io/core-fields/)

- [number](https://github.com/j7-dev/wp-toolkit/tree/master/inc/redux_custom_fields/number)
- [number](https://github.com/j7-dev/wp-toolkit/tree/master/inc/redux_custom_fields/number)

43 changes: 23 additions & 20 deletions inc/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,23 @@ function __construct()

\add_action('redux/construct', [$this, 'load_extensions']);

// if in dev mode, add tailwindcss to admin and frontend
if (Utils::is_dev()) {
\add_action('wp_enqueue_scripts', [$this, 'add_static_assets']);
\add_action('wp_head', [$this, 'add_tailwind_config'], 1000);
\add_filter('body_class', function ($classes) {
if (in_array('tailwindcss', $classes) === false) {
$classes[] = 'tailwindcss';
}
return $classes;
});
\add_action('admin_enqueue_scripts', [$this, 'add_static_assets']);
\add_action('admin_head', [$this, 'add_tailwind_config'], 1000);
\add_filter('admin_body_class', function ($classes) {
if (strpos($classes, 'tailwindcss') === false) {
$classes .= ' tailwindcss ';
}
return $classes;
});
}

// \add_action('wp_enqueue_scripts', [$this, 'add_static_assets']);
// \add_action('wp_head', [$this, 'add_tailwind_config'], 1000);
// \add_filter('body_class', function ($classes) {
// if (in_array('tailwindcss', $classes) === false) {
// $classes[] = 'tailwindcss';
// }
// return $classes;
// });
\add_action('admin_enqueue_scripts', [$this, 'add_static_assets']);
\add_action('admin_head', [$this, 'add_tailwind_config'], 1000);
\add_filter('admin_body_class', function ($classes) {
if (strpos($classes, 'tailwindcss') === false) {
$classes .= ' tailwindcss ';
}
return $classes;
});
}

public function load_extensions($redux_object): void
Expand All @@ -63,11 +61,16 @@ public function load_extensions($redux_object): void

public function add_static_assets($hook): void
{
\wp_enqueue_script('tailwindcss', 'https://cdn.tailwindcss.com', array(), '3.4.0');
if (!WP_DEBUG) {
\wp_enqueue_style('tailwindcss', Utils::get_plugin_url() . '/inc/redux_custom_fields/bundle-min.css', array(), Utils::get_plugin_ver());
} else {
\wp_enqueue_script('tailwindcss', 'https://cdn.tailwindcss.com', array(), '3.4.0');
}
}

public function add_tailwind_config(): void
{
if (!WP_DEBUG) return;
// WP 後台會與 tailwind css 衝突,所以要加上 prefix
?>
<script>
Expand Down
1 change: 1 addition & 0 deletions inc/redux_custom_fields/bundle-min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions inc/redux_custom_fields/bundle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
4 changes: 2 additions & 2 deletions plugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Plugin Name: WP Toolkit
* Plugin URI: https://cloud.luke.cafe/plugins/
* Description: 方便開發 WordPress 外掛的工具包。
* Version: 0.2.2
* Version: 0.3.0
* Requires at least: 5.7
* Requires PHP: 7.4
* Author: J7
Expand Down Expand Up @@ -45,7 +45,7 @@ public function __construct()
\register_activation_hook(__FILE__, [$this, 'activate']);
\register_deactivation_hook(__FILE__, [$this, 'deactivate']);

if (!Utils::is_dev()) {
if (!WP_DEBUG) {
\add_action('current_screen', [$this, 'remove_redux_banner'], 100);
\add_action('admin_menu', [$this, 'remove_redux_submenu'], 100);
}
Expand Down
13 changes: 13 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./inc/redux_custom_fields/**/*.php"],
theme: {
extend: {},
},
plugins: [],
prefix: "tw-",
important: ".tailwindcss",
corePlugins: {
preflight: false,
},
};
12 changes: 0 additions & 12 deletions utils/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,6 @@ class Utils
const DEFAULT_IMAGE = 'http://1.gravatar.com/avatar/1c39955b5fe5ae1bf51a77642f052848?s=96&d=mm&r=g';
const GITHUB_REPO = 'https://github.com/j7-dev/wp-toolkit';

public static function is_dev(): bool
{
return WP_DEBUG;
}
/**
* @deprecated 即將淘汰,請改用 is_dev()
*/
public static function get_dev_mode(): bool
{
return self::is_dev();
}

public static function debug_log($log_line): void
{
$default_path = ABSPATH . 'wp-content';
Expand Down

0 comments on commit 5b5e27a

Please sign in to comment.