Enqueue style conditionality. Renamed style.scss to make sure index.css is outputed in build folder

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'd70148a610fb16d5fa51');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '92ae1efb2b6dd584875c');

build/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '88a721d8e5a23e107f69');
+<?php return array('dependencies' => array(), 'version' => 'e336af3a8e7aaef32702');

dark-mode-toggle-block.php

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Plugin Name: Dark Mode Toggle Block
  * Description: A WordPress block for toggling between between light and dark appearances on your site.
@@ -21,12 +22,12 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function tabor_dark_mode_toggle_block_init() {
-
- register_block_type( __DIR__ . '/build' );
+function tabor_dark_mode_toggle_block_init()
+{
 
+ register_block_type(__DIR__ . '/build');
 }
-add_action( 'init', 'tabor_dark_mode_toggle_block_init' );
+add_action('init', 'tabor_dark_mode_toggle_block_init');
 
 /**
  * Enqueues inline JavaScript for handling site appearance toggling.
@@ -36,14 +37,24 @@ function tabor_dark_mode_toggle_block_init() {
  * site's theme based on that preference. It also considers the user's system's
  * dark mode preference using the `prefers-color-scheme` media query.
  */
-function tabor_dark_mode_toggle_inline_scripts() {
+function tabor_dark_mode_toggle_inline_scripts()
+{
+ // Only enqueue the inline script if the block is present on the page.
+ if (!has_block('tabor/dark-mode-toggle')) return;
 
- // Register an empty script handle to attach the inline script.
- wp_register_script( 'tabor-dark-mode-toggle-block-inline', '');
- wp_enqueue_script('tabor-dark-mode-toggle-block-inline');
+ wp_enqueue_style(
+ 'tabor-dark-mode-toggle-block-style',
+ plugins_url('build/index.css', __FILE__),
+ array(),
+ filemtime(plugin_dir_path(__FILE__) . 'build/index.css')
+ );
 
- // Inline script to set the theme based on user preference or system preference.
- $inline_script = <<<SCRIPT
+ // Register an empty script handle to attach the inline script.
+ wp_register_script('tabor-dark-mode-toggle-block-inline', '');
+ wp_enqueue_script('tabor-dark-mode-toggle-block-inline');
+
+ // Inline script to set the theme based on user preference or system preference.
+ $inline_script = <<<SCRIPT
  (function() {
  const body = document.documentElement;
  const isDarkMode = localStorage.getItem('darkMode') === 'enabled';
@@ -54,7 +65,6 @@ function tabor_dark_mode_toggle_inline_scripts() {
  })();
  SCRIPT;
 
- wp_add_inline_script('tabor-dark-mode-toggle-block-inline', $inline_script);
-
+ wp_add_inline_script('tabor-dark-mode-toggle-block-inline', $inline_script);
 }
 add_action('wp_enqueue_scripts', 'tabor_dark_mode_toggle_inline_scripts');

src/index.js

@@ -3,12 +3,12 @@
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
  */
-import { registerBlockType } from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks'
 
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/components'
 
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
@@ -17,36 +17,36 @@ import { Path, SVG } from '@wordpress/components';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './style.scss';
+import './index.scss'
 
 /**
  * Internal dependencies
  */
-import edit from './edit';
-import metadata from './block.json';
-import save from './save';
+import edit from './edit'
+import metadata from './block.json'
+import save from './save'
 
 /**
  * Every block starts by registering a new block type definition.
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
  */
-registerBlockType( metadata.name, {
+registerBlockType(metadata.name, {
  icon: (
  <SVG
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
+ width='24'
+ height='24'
+ viewBox='0 0 24 24'
+ fill='none'
+ xmlns='http://www.w3.org/2000/svg'
  >
  <Path
- d="M12.056 5.25626C12.2319 5.00102 12.2448 4.6672 12.0891 4.39911C11.9335 4.13101 11.6372 3.9767 11.3283 4.00287C7.22296 4.35074 4 7.79206 4 11.987C4 16.4125 7.58755 20 12.013 20C16.208 20 19.6495 16.777 19.9971 12.6714C20.0233 12.3625 19.869 12.0663 19.6009 11.9106C19.3328 11.755 18.999 11.768 18.7437 11.9439C17.9695 12.4776 17.0318 12.79 16.0186 12.79C13.3629 12.79 11.2099 10.637 11.2099 7.98124C11.2099 6.96821 11.5223 6.03055 12.056 5.25626Z"
- fill="currentColor"
+ d='M12.056 5.25626C12.2319 5.00102 12.2448 4.6672 12.0891 4.39911C11.9335 4.13101 11.6372 3.9767 11.3283 4.00287C7.22296 4.35074 4 7.79206 4 11.987C4 16.4125 7.58755 20 12.013 20C16.208 20 19.6495 16.777 19.9971 12.6714C20.0233 12.3625 19.869 12.0663 19.6009 11.9106C19.3328 11.755 18.999 11.768 18.7437 11.9439C17.9695 12.4776 17.0318 12.79 16.0186 12.79C13.3629 12.79 11.2099 10.637 11.2099 7.98124C11.2099 6.96821 11.5223 6.03055 12.056 5.25626Z'
+ fill='currentColor'
  />
  </SVG>
  ),
  example: {},
  edit,
- save,
-} );
+ save
+})

src/style.scss → src/index.scss

@@ -72,7 +72,7 @@
  }
 }
 
-.theme-dark .wp-block-tabor-dark-mode-toggle__input + .wp-block-tabor-dark-mode-toggle__track .wp-block-tabor-dark-mode-toggle__selector {
+.theme-dark .wp-block-tabor-dark-mode-toggle__input+.wp-block-tabor-dark-mode-toggle__track .wp-block-tabor-dark-mode-toggle__selector {
  transform: translateX(calc(var(--icon-size) * 1.25));
 }
 
@@ -89,4 +89,4 @@
  .wp-block-tabor-dark-mode-toggle__icon--dark {
  visibility: visible;
  }
-}
+}