forked from richtabor/dark-mode-toggle-block
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
154 lines (138 loc) · 9.14 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/**
* WordPress dependencies
*/
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerBlockType } from '@wordpress/blocks';
import { registerPlugin } from '@wordpress/plugins';
import { Path, SVG } from '@wordpress/components';
import { useCallback, useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* All files containing `style` keyword are bundled together. The code used
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
import './style.scss';
/**
* Internal dependencies
*/
import edit from './edit';
import metadata from './block.json';
import save from './save';
const DarkModeIcon = (
<SVG
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M12.0892 4.39878C12.1655 4.53014 12.203 4.6805 12.1972 4.83233C12.1914 4.98417 12.1425 5.13122 12.0563 5.25634C11.4189 6.1822 11.126 7.30208 11.2284 8.42145C11.3309 9.54081 11.8222 10.5889 12.6171 11.3837C13.4119 12.1785 14.4601 12.6697 15.5795 12.772C16.6989 12.8743 17.8187 12.5812 18.7445 11.9437C18.8695 11.8578 19.0164 11.8091 19.1681 11.8033C19.3197 11.7975 19.4699 11.8349 19.6011 11.9112C19.7324 11.9874 19.8392 12.0993 19.9093 12.2339C19.9795 12.3685 20.0099 12.5202 19.9972 12.6715C19.6493 16.7766 16.2079 20 12.013 20C7.58734 20 4 16.4127 4 11.987C4 7.79217 7.22268 4.35069 11.3286 4.00286C11.4798 3.99005 11.6316 4.02046 11.7663 4.09055C11.9009 4.16064 12.0129 4.26753 12.0892 4.39878ZM9.94684 5.91675C8.91633 6.26831 7.99235 6.87657 7.26205 7.68418C6.53175 8.49178 6.01921 9.4721 5.77277 10.5327C5.52632 11.5933 5.5541 12.6991 5.85348 13.746C6.15286 14.7929 6.71397 15.7462 7.48389 16.5161C8.25381 17.2861 9.20717 17.8472 10.254 18.1465C11.3009 18.4459 12.4068 18.4737 13.4673 18.2273C14.5279 17.9808 15.5082 17.4683 16.3159 16.738C17.1235 16.0077 17.7317 15.0837 18.0833 14.0532C16.9494 14.4394 15.7301 14.5002 14.5634 14.2288C13.3967 13.9574 12.3294 13.3646 11.4824 12.5176C10.6355 11.6706 10.0427 10.6033 9.77125 9.43664C9.49985 8.26997 9.56067 7.05061 9.94684 5.91675Z"
fill="currentColor"
/>
</SVG>
);
const LightModeIcon = (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<Path
fill="currentColor"
fillRule="evenodd"
d="M12.5 3C12.7291 3 12.9487 3.09099 13.1107 3.25295C13.2726 3.41492 13.3636 3.63459 13.3636 3.86364V4.72727C13.3636 4.95632 13.2726 5.17599 13.1107 5.33796C12.9487 5.49992 12.7291 5.59091 12.5 5.59091C12.2709 5.59091 12.0513 5.49992 11.8893 5.33796C11.7274 5.17599 11.6364 4.95632 11.6364 4.72727V3.86364C11.6364 3.63459 11.7274 3.41492 11.8893 3.25295C12.0513 3.09099 12.2709 3 12.5 3ZM5.7835 5.7835C5.94546 5.62159 6.16509 5.53064 6.39409 5.53064C6.6231 5.53064 6.84273 5.62159 7.00468 5.7835L7.61786 6.39668C7.70035 6.47635 7.76614 6.57165 7.81141 6.67701C7.85667 6.78238 7.88049 6.89571 7.88149 7.01038C7.88249 7.12505 7.86063 7.23878 7.81721 7.34491C7.77379 7.45105 7.70966 7.54748 7.62857 7.62857C7.54748 7.70966 7.45105 7.77379 7.34491 7.81721C7.23878 7.86063 7.12505 7.88249 7.01038 7.88149C6.89571 7.88049 6.78238 7.85667 6.67701 7.81141C6.57165 7.76614 6.47635 7.70035 6.39668 7.61786L5.7835 7.00468C5.62159 6.84273 5.53064 6.6231 5.53064 6.39409C5.53064 6.16509 5.62159 5.94546 5.7835 5.7835ZM19.2165 5.7835C19.3784 5.94546 19.4694 6.16509 19.4694 6.39409C19.4694 6.6231 19.3784 6.84273 19.2165 7.00468L18.6033 7.61786C18.4404 7.77518 18.2223 7.86223 17.9958 7.86026C17.7694 7.8583 17.5528 7.76747 17.3927 7.60734C17.2325 7.44722 17.1417 7.23061 17.1397 7.00416C17.1378 6.77772 17.2248 6.55957 17.3821 6.39668L17.9953 5.7835C18.1573 5.62159 18.3769 5.53064 18.6059 5.53064C18.8349 5.53064 19.0545 5.62159 19.2165 5.7835ZM10.0576 10.0576C9.72769 10.3763 9.46452 10.7575 9.28347 11.179C9.10242 11.6004 9.00712 12.0537 9.00313 12.5124C8.99915 12.9711 9.08656 13.426 9.26025 13.8506C9.43395 14.2751 9.69046 14.6608 10.0148 14.9852C10.3392 15.3095 10.7249 15.566 11.1494 15.7397C11.574 15.9134 12.0289 16.0009 12.4876 15.9969C12.9463 15.9929 13.3996 15.8976 13.821 15.7165C14.2425 15.5355 14.6237 15.2723 14.9424 14.9424C15.5716 14.2908 15.9198 13.4182 15.912 12.5124C15.9041 11.6067 15.5408 10.7402 14.9003 10.0997C14.2598 9.45922 13.3933 9.09591 12.4876 9.08804C11.5818 9.08016 10.7092 9.42836 10.0576 10.0576ZM8.83559 8.83559C9.80745 7.86373 11.1256 7.31774 12.5 7.31774C13.8744 7.31774 15.1925 7.86373 16.1644 8.83559C17.1363 9.80745 17.6823 11.1256 17.6823 12.5C17.6823 13.8744 17.1363 15.1925 16.1644 16.1644C15.1925 17.1363 13.8744 17.6823 12.5 17.6823C11.1256 17.6823 9.80745 17.1363 8.83559 16.1644C7.86373 15.1925 7.31774 13.8744 7.31774 12.5C7.31774 11.1256 7.86373 9.80745 8.83559 8.83559ZM3 12.5C3 12.2709 3.09099 12.0513 3.25295 11.8893C3.41492 11.7274 3.63459 11.6364 3.86364 11.6364H4.72727C4.95632 11.6364 5.17599 11.7274 5.33796 11.8893C5.49992 12.0513 5.59091 12.2709 5.59091 12.5C5.59091 12.7291 5.49992 12.9487 5.33796 13.1107C5.17599 13.2726 4.95632 13.3636 4.72727 13.3636H3.86364C3.63459 13.3636 3.41492 13.2726 3.25295 13.1107C3.09099 12.9487 3 12.7291 3 12.5ZM19.4091 12.5C19.4091 12.2709 19.5001 12.0513 19.662 11.8893C19.824 11.7274 20.0437 11.6364 20.2727 11.6364H21.1364C21.3654 11.6364 21.5851 11.7274 21.747 11.8893C21.909 12.0513 22 12.2709 22 12.5C22 12.7291 21.909 12.9487 21.747 13.1107C21.5851 13.2726 21.3654 13.3636 21.1364 13.3636H20.2727C20.0437 13.3636 19.824 13.2726 19.662 13.1107C19.5001 12.9487 19.4091 12.7291 19.4091 12.5ZM7.61786 17.3821C7.77977 17.5441 7.87072 17.7637 7.87072 17.9927C7.87072 18.2217 7.77977 18.4414 7.61786 18.6033L7.00468 19.2165C6.8418 19.3738 6.62364 19.4609 6.3972 19.4589C6.17076 19.4569 5.95415 19.3661 5.79402 19.206C5.6339 19.0459 5.54307 18.8292 5.5411 18.6028C5.53913 18.3764 5.62618 18.1582 5.7835 17.9953L6.39668 17.3821C6.55864 17.2202 6.77827 17.1293 7.00727 17.1293C7.23628 17.1293 7.45591 17.2202 7.61786 17.3821ZM17.3821 17.3821C17.5441 17.2202 17.7637 17.1293 17.9927 17.1293C18.2217 17.1293 18.4414 17.2202 18.6033 17.3821L19.2165 17.9953C19.3738 18.1582 19.4609 18.3764 19.4589 18.6028C19.4569 18.8292 19.3661 19.0459 19.206 19.206C19.0459 19.3661 18.8292 19.4569 18.6028 19.4589C18.3764 19.4609 18.1582 19.3738 17.9953 19.2165L17.3821 18.6033C17.2202 18.4414 17.1293 18.2217 17.1293 17.9927C17.1293 17.7637 17.2202 17.5441 17.3821 17.3821ZM12.5 19.4091C12.7291 19.4091 12.9487 19.5001 13.1107 19.662C13.2726 19.824 13.3636 20.0437 13.3636 20.2727V21.1364C13.3636 21.3654 13.2726 21.5851 13.1107 21.747C12.9487 21.909 12.7291 22 12.5 22C12.2709 22 12.0513 21.909 11.8893 21.747C11.7274 21.5851 11.6364 21.3654 11.6364 21.1364V20.2727C11.6364 20.0437 11.7274 19.824 11.8893 19.662C12.0513 19.5001 12.2709 19.4091 12.5 19.4091Z"
clipRule="evenodd"
/>
</SVG>
);
const MoonIcon = (
<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"
/>
</SVG>
);
/**
* 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, {
icon: MoonIcon,
example: {
viewportWidth: 300,
attributes: {
size: 'large',
},
},
edit,
save,
} );
function DarkModePreviewMenuItem() {
const [ isDarkMode, setDarkMode ] = useState( false );
const [ iframe, setIframe ] = useState( null );
// Separate the iframe class handling logic
const toggleDarkMode = useCallback( () => {
if ( ! iframe?.contentDocument?.body ) {
return;
}
const { classList } = iframe.contentDocument.body;
if ( isDarkMode ) {
classList.remove( 'theme-dark' );
} else {
classList.add( 'theme-dark' );
}
setDarkMode( ! isDarkMode );
}, [ iframe, isDarkMode ] );
// Find and set the iframe element
useEffect( () => {
const findIframe = () => {
const editorCanvas = document.querySelector(
'[name="editor-canvas"]'
);
if ( editorCanvas ) {
setIframe( editorCanvas );
return true;
}
return false;
};
// Try to find iframe immediately
if ( findIframe() ) {
return;
}
// Set up observer if iframe isn't immediately available
const observer = new MutationObserver( () => {
if ( findIframe() ) {
observer.disconnect();
}
} );
observer.observe( document.body, { childList: true, subtree: true } );
return () => observer.disconnect();
}, [] );
return (
<PluginPreviewMenuItem
icon={ isDarkMode ? LightModeIcon : DarkModeIcon }
onClick={ toggleDarkMode }
>
{ isDarkMode
? __( 'Preview light mode' )
: __( 'Preview dark mode' ) }
</PluginPreviewMenuItem>
);
}
registerPlugin( 'dark-mode-preview', {
render: DarkModePreviewMenuItem,
} );