7 |
8 |
9 |
10 | 
124 |
--------------------------------------------------------------------------------
/assets/src/css/core-navigation.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Custom styles required for the core Navigatino block.
3 | */
4 |
--------------------------------------------------------------------------------
/assets/src/css/styles.scss:
--------------------------------------------------------------------------------
1 | // The global styles for the theme.
2 | pre {
3 | overflow-x: auto;
4 | }
5 |
--------------------------------------------------------------------------------
/assets/src/js/core-navigation.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Custom script required for the core Navigation block.
3 | */
4 |
5 | /**
6 | * Internal dependencies
7 | */
8 | import '../css/core-navigation.scss';
9 |
--------------------------------------------------------------------------------
/assets/src/js/modules/media-text.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Custom module script required for the media text interactive pattern.
3 | */
4 |
5 | /**
6 | * WordPress dependencies
7 | */
8 | import { store, getContext, getElement } from '@wordpress/interactivity';
9 |
10 | store( 'elementary/media-text', {
11 | actions: {
12 | /**
13 | * Update the video play state.
14 | *
15 | * @return {void}
16 | */
17 | play() {
18 | const context = getContext();
19 | context.isPlaying = true;
20 | },
21 | },
22 | callbacks: {
23 | /**
24 | * Play the video.
25 | *
26 | * @return {void}
27 | */
28 | playVideo() {
29 | const context = getContext();
30 | const { ref } = getElement();
31 | if ( context.isPlaying ) {
32 | ref.querySelector( 'video' )?.play();
33 | context.isPlaying = false;
34 | }
35 | },
36 | },
37 | } );
38 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | const defaultConfig = require( '@wordpress/babel-preset-default' );
5 |
6 | module.exports = function( api ) {
7 | const config = defaultConfig( api );
8 |
9 | return {
10 | ...config,
11 | plugins: [
12 | ...config.plugins,
13 | // Add your own plugins here
14 | ],
15 | sourceMaps: true,
16 | env: {
17 | production: {
18 | plugins: [
19 | ...config.plugins,
20 | // Add your own plugins here
21 | ],
22 | },
23 | },
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/bin/init.js:
--------------------------------------------------------------------------------
1 | #! /usr/bin/env node
2 |
3 | /* eslint no-console: 0 */
4 |
5 | /**
6 | * External dependencies
7 | */
8 | const fs = require( 'fs' );
9 | const path = require( 'path' );
10 | const readline = require( 'readline' );
11 | const { promisify } = require( 'util' );
12 | const { execSync } = require( 'child_process' );
13 |
14 | /**
15 | * Define Constants
16 | */
17 | const rl = readline.createInterface( {
18 | input: process.stdin,
19 | output: process.stdout,
20 | } );
21 |
22 | const info = {
23 | error: ( message ) => {
24 | return `\x1b[31m${ message }\x1b[0m`;
25 | },
26 | success: ( message ) => {
27 | return `\x1b[32m${ message }\x1b[0m`;
28 | },
29 | warning: ( message ) => {
30 | return `\x1b[33m${ message }\x1b[0m`;
31 | },
32 | message: ( message ) => {
33 | return `\x1b[34m${ message }\x1b[0m`;
34 | },
35 | };
36 |
37 | /**
38 | * Return root directory
39 | *
40 | * @return {string} root directory
41 | */
42 | const getRoot = () => {
43 | return path.resolve( __dirname, '../' );
44 | }
45 |
46 | let fileContentUpdated = false;
47 | let fileNameUpdated = false;
48 | let themeCleanup = false;
49 | let isGitInitialized = false;
50 |
51 | const args = process.argv.slice( 2 );
52 |
53 | if ( 0 === args.length ) {
54 | rl.question( 'Would you like to setup the theme? (y/n) ', ( answer ) => {
55 |
56 | if ( 'n' === answer.toLowerCase() ) {
57 | console.log( info.warning( '\nTheme Setup Cancelled.\n' ) );
58 | rl.close();
59 | }
60 |
61 | rl.question( 'Enter theme name (shown in WordPress admin)*: ', ( themeName ) => {
62 |
63 | const themeInfo = renderThemeDetails( themeName );
64 |
65 | rl.question( 'Confirm the Theme Details (y/n) ', ( confirm ) => {
66 |
67 | if ( 'n' === confirm.toLowerCase() ) {
68 | console.log( info.warning( '\nTheme Setup Cancelled.\n' ) );
69 | rl.close();
70 | }
71 |
72 | initTheme( themeInfo );
73 |
74 | rl.question( 'Would you like to initialize git (Note: It will delete any `.git` folder already in current directory)? (y/n) ', async ( initialize ) => {
75 | if ( 'n' === initialize.toLowerCase() ) {
76 | console.log( info.warning( '\nExiting without initializing GitHub.\n' ) );
77 | await askQuestionForHuskyInstallation();
78 | } else {
79 | await initializeGit()
80 | }
81 | themeCleanupQuestion();
82 | } );
83 | } );
84 | } );
85 | } );
86 | } else if ( ( args.includes( '--clean' ) || args.includes( '-c' ) ) && 1 === args.length ) {
87 | themeCleanupQuestion();
88 | } else {
89 | console.log( info.error( '\nInvalid arguments.\n' ) );
90 | rl.close();
91 | }
92 | rl.on( 'close', () => {
93 | process.exit( 0 );
94 | } );
95 |
96 | /**
97 | * Update composer.json file.
98 | *
99 | * @return {void}
100 | */
101 | const updateComposerJson = () => {
102 | console.log( info.message( '\nRemoving post-install-cmd script from the composer.json...' ) );
103 | const composerJsonPath = path.resolve( getRoot(), 'composer.json' );
104 |
105 | try {
106 | if ( ! fs.existsSync( composerJsonPath ) ) {
107 | return;
108 | }
109 |
110 | const composerJson = JSON.parse( fs.readFileSync( composerJsonPath ) );
111 |
112 | // Remove scripts.
113 | delete composerJson.scripts['post-install-cmd'];
114 |
115 | // Commit the changes to file.
116 | fs.writeFileSync( composerJsonPath, JSON.stringify( composerJson, null, 2 ) );
117 | console.log( info.success( '\ncomposer.json updated successfully!' ), '✨' );
118 | } catch ( error ) {
119 | console.log( info.error( `Error while updating composer.json: ${ error.message }` ) );
120 | console.log( info.message( 'Please remove post-install-cmd script from the composer.json file manually.' ) );
121 | }
122 | }
123 |
124 | /**
125 | * Update package.json file.
126 | *
127 | * @return {void}
128 | */
129 | const updatePackageJson = () => {
130 | console.log( info.message( '\nRemoving init script from the package.json...' ) );
131 | const packageJsonPath = path.resolve( getRoot(), 'package.json' );
132 |
133 | try {
134 | if ( ! fs.existsSync( packageJsonPath ) ) {
135 | return;
136 | }
137 |
138 | const packageJson = JSON.parse( fs.readFileSync( packageJsonPath ) );
139 |
140 | delete packageJson.scripts['init'];
141 |
142 | if ( ! packageJson.scripts['prepare'] ) {
143 | return;
144 | }
145 |
146 | const prepareScript = packageJson.scripts['prepare'];
147 |
148 | // Check if 'npm run init' is part of the prepare script.
149 | if ( ! prepareScript.includes( 'npm run init' ) ) {
150 | return;
151 | }
152 |
153 | // Split the prepare script into an array of individual scripts.
154 | const prepareScriptArray = prepareScript.split( '&&' ).map( ( script ) => script.trim() );
155 |
156 | // Find the index of 'npm run init' in the array.
157 | const initScriptIndex = prepareScriptArray.indexOf( 'npm run init' );
158 |
159 | // Remove 'npm run init' from the array if it exists.
160 | if ( -1 !== initScriptIndex ) {
161 | prepareScriptArray.splice( initScriptIndex, 1 );
162 | }
163 | // Join the array back into a string and update the 'prepare' script in packageJson.
164 | packageJson.scripts['prepare'] = prepareScriptArray.join( ' && ' );
165 |
166 | // Commit the changes to file.
167 | fs.writeFileSync( packageJsonPath, JSON.stringify( packageJson, null, 2 ) );
168 | console.log( info.success( '\npackage.json updated successfully!' ), '✨' );
169 | } catch ( error ) {
170 | console.log( info.error( `Error while updating package.json: ${ error.message }` ) );
171 | console.log( info.message( 'Please remove init script and remove npm run init command from the prepare script from the package.json file manually.' ) );
172 | }
173 | }
174 |
175 | /**
176 | * Ask theme claenup question.
177 | *
178 | * @return {void}
179 | */
180 | function themeCleanupQuestion() {
181 | rl.question( 'Would you like to run the theme cleanup? (y/n) ', ( cleanup ) => {
182 | if ( 'n' === cleanup.toLowerCase() ) {
183 | console.log( info.warning( '\nExiting without running theme cleanup.\n' ) );
184 | } else {
185 | updateComposerJson();
186 | updatePackageJson();
187 | runThemeCleanup();
188 | }
189 | rl.close();
190 | } );
191 | }
192 |
193 | /**
194 | * Initialize Git.
195 | *
196 | * @return {void}
197 | */
198 | const initializeGit = async () => {
199 | // Initialize git.
200 | console.log( info.success( '\nInitializing git...' ) );
201 |
202 | // Check if .git file exists.
203 | const gitDir = path.resolve( getRoot(), '.git' );
204 | try {
205 | if ( fs.existsSync( gitDir ) ) {
206 | // Remove .git directory.
207 | fs.rmSync( gitDir, {
208 | recursive: true,
209 | } );
210 | }
211 | } catch ( error ) {
212 |
213 | }
214 |
215 | const pathToRoot = path.resolve( getRoot() );
216 | const gitInitCommand = `git init '${ pathToRoot }'`;
217 | const pathToAllFiles = path.resolve( getRoot(), '.' );
218 | const gitAddCommand = `git add '${ pathToAllFiles }'`;
219 | // Apply --no-verify flag to skip husky pre-commit hook.
220 | const gitCommit = `git commit -m 'Initialize project using https://github.com/rtCamp/theme-elementary' --no-verify`;
221 |
222 | try {
223 | // Execute git init command in the root directory.
224 | execSync( gitInitCommand );
225 | console.log( info.success( '\nGit initialized successfully!' ), '✨' );
226 | isGitInitialized = true;
227 |
228 | await askQuestionForHuskyInstallation();
229 |
230 | // Execute git add command in the root directory.
231 | execSync( gitAddCommand );
232 |
233 | // Execute git commit command in the root directory.
234 | execSync( gitCommit );
235 | } catch ( error ) {
236 | console.log( info.error( 'Error while installing Git. Please check above for the logs.' ) );
237 | }
238 | };
239 |
240 | /**
241 | * Ask Question for Husky Installation.
242 | *
243 | * @return {void}
244 | */
245 | const askQuestionForHuskyInstallation = async () => {
246 |
247 | // Promisify the question function for this instance only as this question is in between another question so code after this was getting executed before this is completed.
248 | // There is readlinePromises Interface introduced in v17.0.0 and is in Experimental phase so we are using promisify for now.
249 | // In future we can use readlinePromises Interface.
250 | const question = promisify( rl.question ).bind( rl );
251 | const install = await question( 'Would you like to install Husky? (y/n) ' );
252 | if ( 'n' === install.toLowerCase() ) {
253 | console.log(info.warning('\nExiting without installing Husky.\n'));
254 | return;
255 | }
256 | installHusky();
257 | }
258 |
259 | /**
260 | * Install Husky.
261 | *
262 | * @return {void}
263 | */
264 | const installHusky = () => {
265 |
266 | // Search if .git directory exists.
267 | const gitDir = path.resolve( getRoot(), '.git' );
268 | if ( ! fs.existsSync( gitDir ) ) {
269 | console.log( info.warning( '\nGit is not initialized. Please initialize git first.\n' ) );
270 | return;
271 | }
272 |
273 | // Install Husky.
274 | console.log( info.success( '\nInstalling Husky...' ) );
275 |
276 | const pathToRoot = path.resolve( getRoot() );
277 | const huskyInstallCommand = `npm install husky@9.0.1 --save-dev --prefix '${ pathToRoot }'`;
278 |
279 | try {
280 | // Execute Husky install command in the root directory.
281 | execSync( huskyInstallCommand );
282 |
283 | const pathToPackageJson = path.resolve( getRoot(), 'package.json' );
284 |
285 | let prepareScript = '';
286 |
287 | // Extracting the prepare script from package.json before husky installation ovrwrites it.
288 | if ( fs.existsSync( pathToPackageJson ) ) {
289 | const packageJson = JSON.parse( fs.readFileSync( pathToPackageJson ) );
290 |
291 | if ( packageJson.scripts && packageJson.scripts.prepare ) {
292 | prepareScript = packageJson.scripts.prepare;
293 | }
294 | }
295 |
296 | execSync( 'npx husky init' );
297 | execSync( 'echo "npm run lint:staged" > .husky/pre-commit' );
298 |
299 | if ( '' === prepareScript ) {
300 | return;
301 | }
302 |
303 | // Update the prepare script with the old prepare script after husky installation overwrites it.
304 | if ( fs.existsSync( pathToPackageJson ) ) {
305 | const packageJson = JSON.parse( fs.readFileSync( pathToPackageJson ) );
306 |
307 | if ( packageJson.scripts && packageJson.scripts.prepare ) {
308 | packageJson.scripts.prepare += ` && ${ prepareScript }`;
309 |
310 | fs.writeFileSync( pathToPackageJson, JSON.stringify( packageJson, null, 2 ) );
311 | }
312 | }
313 |
314 | console.log( info.success( '\nHusky installed successfully!' ), '✨' );
315 | } catch ( error ) {
316 | console.log( error );
317 | console.log( info.error( 'Error while installing husky. Please check above for the logs.' ) );
318 | }
319 | }
320 |
321 | /**
322 | * Renders the theme setup modal with all necessary information related to the search-replace.
323 | *
324 | * @param {string} themeName
325 | *
326 | * @return {Object} themeInfo
327 | */
328 | const renderThemeDetails = ( themeName ) => {
329 | console.log( info.success( '\nFiring up the theme setup...' ) );
330 |
331 | // Ask theme name.
332 | if ( ! themeName ) {
333 | console.log( info.error( '\nTheme name is required.\n' ) );
334 | process.exit( 0 );
335 | }
336 |
337 | // Generate theme info.
338 | const themeInfo = generateThemeInfo( themeName );
339 |
340 | const themeDetails = {
341 | 'Theme Name: ': `${ themeInfo.themeName }`,
342 | 'Theme Version: ': '1.0.0',
343 | 'Text Domain: ': themeInfo.kebabCase,
344 | 'Package: ': themeInfo.trainCase,
345 | 'Namespace: ': themeInfo.pascalSnakeCase,
346 | 'Function Prefix: ': themeInfo.snakeCaseWithUnderscoreSuffix,
347 | 'CSS Class Prefix: ': themeInfo.kebabCaseWithHyphenSuffix,
348 | 'PHP Variable Prefix: ': themeInfo.snakeCaseWithUnderscoreSuffix,
349 | 'Version Constant: ': `${ themeInfo.macroCase }_VERSION`,
350 | 'Theme Directory Constant: ': `${ themeInfo.macroCase }_TEMP_DIR`,
351 | 'Theme Build Directory Constant: ': `${ themeInfo.macroCase }_BUILD_DIR`,
352 | 'Theme Build Directory URI Constant: ': `${ themeInfo.macroCase }_BUILD_URI`,
353 | };
354 |
355 | const biggestStringLength = themeDetails[ 'Theme Build Directory URI Constant: ' ].length + 'Theme Build Directory URI Constant: '.length;
356 |
357 | console.log( info.success( '\nTheme Details:' ) );
358 | console.log(
359 | info.warning( '┌' + '─'.repeat( biggestStringLength + 2 ) + '┐' ),
360 | );
361 | Object.keys( themeDetails ).forEach( ( key ) => {
362 | console.log(
363 | info.warning( '│' + ' ' + info.success( key ) + info.message( themeDetails[ key ] ) + ' ' + ' '.repeat( biggestStringLength - ( themeDetails[ key ].length + key.length ) ) + info.warning( '│' ) ),
364 | );
365 | } );
366 | console.log(
367 | info.warning( '└' + '─'.repeat( biggestStringLength + 2 ) + '┘' ),
368 | );
369 |
370 | return themeInfo;
371 | };
372 |
373 | /**
374 | * Initialize new theme
375 | *
376 | * @param {Object} themeInfo
377 | */
378 | const initTheme = ( themeInfo ) => {
379 | const chunksToReplace = {
380 | 'rtcamp/elementary': themeInfo.packageName, // Specifically targets composer.json file.
381 | 'elementary theme': themeInfo.themeNameLowerCase,
382 | 'Elementary Theme': themeInfo.themeName,
383 | 'ELEMENTARY THEME': themeInfo.themeNameCobolCase,
384 | 'elementary-theme': themeInfo.kebabCase,
385 | 'Elementary-Theme': themeInfo.trainCase,
386 | 'ELEMENTARY-THEME': themeInfo.cobolCase,
387 | elementary_theme: themeInfo.snakeCase,
388 | Elementary_Theme: themeInfo.pascalSnakeCase,
389 | ELEMENTARY_THEME: themeInfo.macroCase,
390 | 'elementary-theme-': themeInfo.kebabCaseWithHyphenSuffix,
391 | 'Elementary-Theme-': themeInfo.trainCaseWithHyphenSuffix,
392 | 'ELEMENTARY-THEME-': themeInfo.cobolCaseWithHyphenSuffix,
393 | elementary_theme_: themeInfo.snakeCaseWithUnderscoreSuffix,
394 | Elementary_Theme_: themeInfo.pascalSnakeCaseWithUnderscoreSuffix,
395 | ELEMENTARY_THEME_: themeInfo.macroCaseWithUnderscoreSuffix,
396 | };
397 |
398 | const files = getAllFiles( getRoot() );
399 |
400 | // File name to replace in.
401 | const fileNameToReplace = {};
402 | files.forEach( ( file ) => {
403 | const fileName = path.basename( file );
404 | Object.keys( chunksToReplace ).forEach( ( key ) => {
405 | if ( fileName.includes( key ) ) {
406 | fileNameToReplace[ fileName ] = fileName.replace( key, chunksToReplace[ key ] );
407 | }
408 | } );
409 | } );
410 |
411 | // Replace files contents.
412 | console.log( info.success( '\nUpdating theme details in file(s)...' ) );
413 | Object.keys( chunksToReplace ).forEach( ( key ) => {
414 | replaceFileContent( files, key, chunksToReplace[ key ] );
415 | } );
416 |
417 | if ( ! fileContentUpdated ) {
418 | console.log( info.error( 'No file content updated.\n' ) );
419 | }
420 |
421 | // Replace file names
422 | console.log( info.success( '\nUpdating theme file(s) name...' ) );
423 | Object.keys( fileNameToReplace ).forEach( ( key ) => {
424 | replaceFileName( files, key, fileNameToReplace[ key ] );
425 | } );
426 | if ( ! fileNameUpdated ) {
427 | console.log( info.error( 'No file name updated.\n' ) );
428 | }
429 |
430 | if ( fileContentUpdated || fileNameUpdated ) {
431 | console.log( info.success( '\nYour new theme is ready to go!' ), '✨' );
432 | // Docs link
433 | console.log( info.success( '\nFor more information on how to use this theme, please visit the following link: ' + info.warning( 'https://github.com/rtCamp/theme-elementary/blob/main/README.md\n' ) ) );
434 | } else {
435 | console.log( info.warning( '\nNo changes were made to your theme.\n' ) );
436 | }
437 |
438 | try {
439 | const result = execSync( 'composer dump-autoload' );
440 | console.log( info.success( result ) );
441 | } catch ( error ) {
442 | console.log( info.error( `Error while executing composer dump-autoload: ${error}` ) );
443 | }
444 | };
445 |
446 | /**
447 | * Get all files in a directory
448 | *
449 | * @param {Array} dir - Directory to search
450 | */
451 | const getAllFiles = ( dir ) => {
452 | const dirOrFilesIgnore = [
453 | '.git',
454 | '.github',
455 | 'node_modules',
456 | 'vendor',
457 | ];
458 |
459 | try {
460 | let files = fs.readdirSync( dir );
461 | files = files.filter( ( fileOrDir ) => ! dirOrFilesIgnore.includes( fileOrDir ) );
462 |
463 | const allFiles = [];
464 | files.forEach( ( file ) => {
465 | const filePath = path.join( dir, file );
466 | const stat = fs.statSync( filePath );
467 | if ( stat.isDirectory() ) {
468 | allFiles.push( ...getAllFiles( filePath ) );
469 | } else {
470 | allFiles.push( filePath );
471 | }
472 | } );
473 | return allFiles;
474 | } catch ( err ) {
475 | console.log( info.error( err ) );
476 | }
477 | };
478 |
479 | /**
480 | * Replace content in file
481 | *
482 | * @param {Array} files Files to search
483 | * @param {string} chunksToReplace String to replace
484 | * @param {string} newChunk New string to replace with
485 | */
486 | const replaceFileContent = ( files, chunksToReplace, newChunk ) => {
487 | files.forEach( ( file ) => {
488 | const filePath = path.resolve( getRoot(), file );
489 |
490 | try {
491 | let content = fs.readFileSync( filePath, 'utf8' );
492 | const regex = new RegExp( chunksToReplace, 'g' );
493 | content = content.replace( regex, newChunk );
494 | if ( content !== fs.readFileSync( filePath, 'utf8' ) ) {
495 | fs.writeFileSync( filePath, content, 'utf8' );
496 | console.log( info.success( `Updated [${ info.message( chunksToReplace ) }] ${ info.success( 'to' ) } [${ info.message( newChunk ) }] ${ info.success( 'in file' ) } [${ info.message( path.basename( file ) ) }]` ) );
497 | fileContentUpdated = true;
498 | }
499 | } catch ( err ) {
500 | console.log( info.error( `\nError: ${ err }` ) );
501 | }
502 | } );
503 | };
504 |
505 | /**
506 | * Change File Name
507 | *
508 | * @param {Array} files Files to search
509 | * @param {string} oldFileName Old file name
510 | * @param {string} newFileName New file name
511 | */
512 | const replaceFileName = ( files, oldFileName, newFileName ) => {
513 | files.forEach( ( file ) => {
514 | if ( oldFileName !== path.basename( file ) ) {
515 | return;
516 | }
517 | const filePath = path.resolve( getRoot(), file );
518 | const newFilePath = path.resolve( getRoot(), file.replace( oldFileName, newFileName ) );
519 | try {
520 | fs.renameSync( filePath, newFilePath );
521 | console.log( info.success( `Updated file [${ info.message( path.basename( filePath ) ) }] ${ info.success( 'to' ) } [${ info.message( path.basename( newFilePath ) ) }]` ) );
522 | fileNameUpdated = true;
523 | } catch ( err ) {
524 | console.log( info.error( `\nError: ${ err }` ) );
525 | }
526 | } );
527 | };
528 |
529 | /**
530 | * Generate Theme Info from Theme Name
531 | *
532 | * @param {string} themeName
533 | */
534 | const generateThemeInfo = ( themeName ) => {
535 | const themeNameLowerCase = themeName.toLowerCase();
536 |
537 | const kebabCase = themeName.replace( /\s+/g, '-' ).toLowerCase();
538 | const packageName = `rtcamp/${ kebabCase }`;
539 | const snakeCase = kebabCase.replace( /\-/g, '_' );
540 | const kebabCaseWithHyphenSuffix = kebabCase + '-';
541 | const snakeCaseWithUnderscoreSuffix = snakeCase + '_';
542 |
543 | const trainCase = kebabCase.replace( /\b\w/g, ( l ) => {
544 | return l.toUpperCase();
545 | } );
546 | const themeNameTrainCase = trainCase.replace( /\-/g, ' ' );
547 | const pascalSnakeCase = trainCase.replace( /\-/g, '_' );
548 | const trainCaseWithHyphenSuffix = trainCase + '-';
549 | const pascalSnakeCaseWithUnderscoreSuffix = pascalSnakeCase + '_';
550 |
551 | const cobolCase = kebabCase.toUpperCase();
552 | const themeNameCobolCase = themeNameTrainCase.toUpperCase();
553 | const macroCase = snakeCase.toUpperCase();
554 | const cobolCaseWithHyphenSuffix = cobolCase + '-';
555 | const macroCaseWithUnderscoreSuffix = macroCase + '_';
556 |
557 | return {
558 | themeName,
559 | packageName,
560 | themeNameLowerCase,
561 | kebabCase,
562 | snakeCase,
563 | kebabCaseWithHyphenSuffix,
564 | snakeCaseWithUnderscoreSuffix,
565 | trainCase,
566 | themeNameTrainCase,
567 | pascalSnakeCase,
568 | trainCaseWithHyphenSuffix,
569 | pascalSnakeCaseWithUnderscoreSuffix,
570 | cobolCase,
571 | themeNameCobolCase,
572 | macroCase,
573 | cobolCaseWithHyphenSuffix,
574 | macroCaseWithUnderscoreSuffix,
575 | };
576 | };
577 |
578 | /**
579 | * Run theme cleanup to delete files and directories
580 | *
581 | * It will remove following directories and files:
582 | * 1. .git
583 | * 2. .github
584 | * 3. bin
585 | * 4. languages
586 | */
587 | const runThemeCleanup = () => {
588 | const deleteDirs = [
589 | '.github',
590 | 'bin/init.js',
591 | 'languages',
592 | ];
593 |
594 | if ( ! isGitInitialized ) {
595 | deleteDirs.push( '.git' );
596 | }
597 |
598 | deleteDirs.forEach( ( dir ) => {
599 | const dirPath = path.resolve( getRoot(), dir );
600 | try {
601 | if ( fs.existsSync( dirPath ) ) {
602 | let isDirectory = false;
603 |
604 | if ( true === fs.lstatSync( dirPath ).isDirectory() ) {
605 | isDirectory = true;
606 | }
607 |
608 | // rmSync function introduced in Node v14.14.0. It can delete files and directories recursively.
609 | fs.rmSync( dirPath, {
610 | recursive: true,
611 | } );
612 |
613 | if ( isDirectory ) {
614 | console.log( info.success( `Removed directory [${ info.message( dir ) }]` ) );
615 | } else {
616 | console.log( info.success( `Removed file [${ info.message( dir ) }]` ) );
617 | }
618 | themeCleanup = true;
619 | }
620 | } catch ( err ) {
621 | console.log( info.error( `\nError: ${ err }` ) );
622 | }
623 | } );
624 |
625 | if ( themeCleanup ) {
626 | console.log( info.success( '\nTheme cleanup completed!' ), '✨' );
627 | } else {
628 | console.log( info.warning( '\nNo theme cleanup required!\n' ) );
629 | }
630 | };
631 |
--------------------------------------------------------------------------------
/bin/phpcbf.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /**
4 | * External dependencies
5 | */
6 | const { join } = require( 'node:path' );
7 | const { argv } = require( 'node:process' );
8 | const { spawn } = require( 'node:child_process' );
9 | const { accessSync, constants } = require( 'node:fs' );
10 |
11 | const args = argv.slice( 2 );
12 | const scriptPath = join( __dirname, '..', 'vendor', 'bin', 'phpcbf' );
13 |
14 | try {
15 | accessSync( scriptPath, constants.F_OK );
16 | } catch (e) {
17 | // eslint-disable-next-line no-console
18 | console.error(
19 | '\x1b[31m%s\x1b[0m',
20 | 'Error: vendor/bin/phpcbf is not found or not executable. Please run `composer install` first.'
21 | );
22 | process.exit( 1 );
23 | }
24 |
25 | const phpcbfProcess = spawn( scriptPath, args );
26 |
27 | phpcbfProcess.stdout.on( 'data', ( data ) => {
28 | process.stdout.write( data );
29 | });
30 |
31 | phpcbfProcess.stderr.on( 'data', ( data ) => {
32 | process.stderr.write( data );
33 | });
34 |
35 | process.on( 'SIGINT', () => {
36 | phpcbfProcess.kill();
37 | });
38 |
39 | process.on( 'SIGTERM', () => {
40 | phpcbfProcess.kill();
41 | });
42 |
43 | phpcbfProcess.on( 'exit', ( code ) => {
44 | process.exit( 1 === code ? 0 : code );
45 | });
46 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rtcamp/elementary",
3 | "description": "A starter theme that facilitates a quick head start for developing new block-based themes along with a bunch of developer-friendly features.",
4 | "type": "wordpress-theme",
5 | "homepage": "https://rtcamp.com/",
6 | "license": "GPL-2.0-or-later",
7 | "require": {
8 | "php": ">=8.2"
9 | },
10 | "require-dev": {
11 | "wp-coding-standards/wpcs": "^2.3",
12 | "phpcompatibility/phpcompatibility-wp": "^2.1",
13 | "automattic/vipwpcs": "^2.3",
14 | "dealerdirect/phpcodesniffer-composer-installer": "1.0.0",
15 | "sirbrillig/phpcs-variable-analysis": "^2.11.3",
16 | "phpunit/phpunit": "^9.5",
17 | "wp-phpunit/wp-phpunit": "^6.0",
18 | "yoast/phpunit-polyfills": "^3.0",
19 | "wp-cli/i18n-command": "^2.4"
20 | },
21 | "minimum-stability": "dev",
22 | "prefer-stable": true,
23 | "config": {
24 | "allow-plugins": {
25 | "dealerdirect/phpcodesniffer-composer-installer": true
26 | }
27 | },
28 | "autoload": {
29 | "classmap": [
30 | "inc/"
31 | ],
32 | "files": [
33 | "inc/helpers/custom-functions.php"
34 | ]
35 | },
36 | "autoload-dev": {
37 | "psr-4": {
38 | "Elementary_Theme\\Tests\\": "tests/php/"
39 | }
40 | },
41 | "scripts": {
42 | "phpcs": "@php ./vendor/bin/phpcs",
43 | "phpcs:fix": "@php ./vendor/bin/phpcbf",
44 | "post-install-cmd": [
45 | "npm i"
46 | ],
47 | "pot": "wp i18n make-pot . ./languages/elementary-theme.pot --domain=elementary-theme --include=\"inc,patterns,assets/build/js\""
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/docs/asset-building-process.md:
--------------------------------------------------------------------------------
1 | # Asset Building Process
2 |
3 | This document outlines the process of building and managing assets (CSS, JS, and modules) within the theme. It also explains how to add new scripts or modules into the build process.
4 |
5 | ## Overview
6 |
7 | Our asset pipeline is managed by **Webpack**, using the configuration provided by WordPress and some additional optimizations. The build process involves the following steps:
8 |
9 | 1. **JS and CSS Files** are processed, concatenated, and minified for production.
10 | 2. **Modules** are handled separately to ensure they're loaded correctly.
11 | 3. **CSS/SCSS files** are extracted and moved to a dedicated `css` directory.
12 |
13 | ### Key Configuration Files
14 |
15 | - **webpack.config.js**: This is the main configuration file for building assets.
16 | - **package.json**: Contains the scripts and dependencies necessary for the build process.
17 |
18 | ### Directory Structure
19 |
20 | - **assets/src/js**: Contains JavaScript files.
21 | - **assets/src/css**: Contains CSS/SCSS files.
22 | - **assets/src/js/modules**: Contains modular JavaScript files that are handled separately.
23 | - **assets/build/js**: Where built JavaScript files are output.
24 | - **assets/build/css**: Where built CSS files are output.
25 |
26 | ---
27 |
28 | ## How the Asset Building Works
29 |
30 | ### JS and CSS Build Process
31 |
32 | 1. **CSS Files**: All `.css` or `.scss` files in the `assets/src/css` directory are collected into the build process. They are extracted into a separate CSS file in the `assets/build/css` folder.
33 |
34 | - The main `webpack.config.js` file uses the `MiniCssExtractPlugin` to extract the CSS.
35 | - The extracted CSS files are minified using `CssMinimizerPlugin` in production builds.
36 |
37 | 2. **JS Files**: The JavaScript files are bundled into a single file or multiple files (for split chunks). The `assets/src/js` folder contains files like `core-navigation.js`, which are part of the main entry point.
38 |
39 | - JavaScript files are processed using Babel to ensure compatibility with different browsers.
40 | - We use `webpack-remove-empty-scripts` to remove any empty JavaScript files that do not have content.
41 |
42 | 3. **Modules**: Files located in `assets/src/js/modules` are treated as separate entry points. These are compiled into separate files and stored in the `assets/build/js/modules` directory.
43 |
44 | - The configuration for modules is handled through the `moduleScripts` entry in the `webpack.config.js`.
45 |
46 | ---
47 |
48 | ## Adding New Scripts or Modules
49 |
50 | To add a new script or module to the build process, follow these steps:
51 |
52 | ### Adding a New Script
53 |
54 | 1. Place your JavaScript file in the `assets/src/js` directory or a subdirectory.
55 |
56 | Example: `assets/src/js/my-script.js`
57 |
58 | 2. Edit the `webpack.config.js` file and add your script to the `scripts` entry object.
59 |
60 | Example:
61 | ```js
62 | entry: {
63 | 'my-new-script': path.resolve( process.cwd(), 'assets', 'src', 'js', 'my-script.js' ),
64 | },
65 | ```
66 |
67 | 3. If necessary, add any required dependencies or libraries to `assets/src/js` and import them in your new script.
68 |
69 | 4. Run the build script:
70 |
71 | ```bash
72 | npm run build:dev # For development
73 | npm run build:prod # For production
74 | ```
75 |
76 | ---
77 |
78 | ### Adding a New Module
79 |
80 | 1. Place your module JavaScript file in the `assets/src/js/modules` directory.
81 |
82 | Example: `assets/src/js/modules/my-module.js`
83 |
84 | 2. The modules will automatically be included in the Webpack build process, but if you want to make sure it is included in the final output, ensure it’s referenced correctly in the entry object for modules:
85 |
86 | ```js
87 | entry: () => readAllFileEntries( './assets/src/js/modules' ),
88 | ```
89 |
90 | 3. Add any necessary logic in your module’s JavaScript code to ensure it functions correctly within the theme. Modules are usually self-contained and independent, so make sure to export and import dependencies as needed.
91 |
92 | 4. Run the build script:
93 |
94 | ```bash
95 | npm run build:dev # For development
96 | npm run build:prod # For production
97 | ```
98 |
99 | ## Avoid Bundling Specific Files
100 |
101 | For example, if you have a file like `_my-excluded-script.js` or `_my-excluded-styles.css`, Webpack will **ignore** it when bundling and it won't be included in the final output.
102 |
103 | ### How to Exclude Files
104 |
105 | - **CSS/SCSS**: If you want to add a CSS file without bundling it, name it starting with an underscore.
106 |
107 | Example: `_my-excluded-styles.scss`
108 |
109 | - **JavaScript**: Similarly, prefix JS files with an underscore to prevent bundling.
110 |
111 | Example: `_my-excluded-script.js`
112 |
113 | By naming files with the underscore, we make sure they are excluded from the Webpack build process but can still be used elsewhere in the project.
114 |
--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
1 | get( 'Version' ) );
12 | endif;
13 |
14 | if ( ! defined( 'ELEMENTARY_THEME_TEMP_DIR' ) ) :
15 | define( 'ELEMENTARY_THEME_TEMP_DIR', untrailingslashit( get_template_directory() ) );
16 | endif;
17 |
18 | if ( ! defined( 'ELEMENTARY_THEME_BUILD_URI' ) ) :
19 | define( 'ELEMENTARY_THEME_BUILD_URI', untrailingslashit( get_template_directory_uri() ) . '/assets/build' );
20 | endif;
21 |
22 | if ( ! defined( 'ELEMENTARY_THEME_BUILD_DIR' ) ) :
23 | define( 'ELEMENTARY_THEME_BUILD_DIR', untrailingslashit( get_template_directory() ) . '/assets/build' );
24 | endif;
25 |
26 | require_once ELEMENTARY_THEME_TEMP_DIR . '/vendor/autoload.php';
27 |
28 | /**
29 | * Theme bootstrap instance.
30 | *
31 | * @since 1.0.0
32 | *
33 | * @return object Theme bootstrap instance.
34 | */
35 | function elementary_theme_instance() {
36 | return Elementary_Theme\Elementary_Theme::get_instance();
37 | }
38 |
39 | // Instantiate theme.
40 | elementary_theme_instance();
41 |
--------------------------------------------------------------------------------
/inc/classes/block-extension/class-media-text-interactive.php:
--------------------------------------------------------------------------------
1 | setup_hooks();
25 | }
26 |
27 | /**
28 | * Setup hooks.
29 | *
30 | * @return void
31 | */
32 | public function setup_hooks() {
33 |
34 | add_filter( 'render_block_core/button', array( $this, 'render_block_core_button' ), 10, 2 );
35 | add_filter( 'render_block_core/columns', array( $this, 'render_block_core_columns' ), 10, 2 );
36 | add_filter( 'render_block_core/video', array( $this, 'render_block_core_video' ), 10, 2 );
37 |
38 | }
39 |
40 | /**
41 | * Render block core/button.
42 | *
43 | * @param string $block_content Block content.
44 | * @param array $block Block.
45 | * @return string
46 | */
47 | public function render_block_core_button( $block_content, $block ) {
48 | if ( ! isset( $block['attrs']['className'] ) || ! str_contains( $block['attrs']['className'], 'elementary-media-text-interactive' ) ) {
49 | return $block_content;
50 | }
51 |
52 | $p = new WP_HTML_Tag_Processor( $block_content );
53 |
54 | $p->next_tag();
55 | $p->set_attribute( 'data-wp-on--click', 'actions.play' );
56 |
57 | return $p->get_updated_html();
58 | }
59 |
60 | /**
61 | * Render block core/columns.
62 | *
63 | * @param string $block_content Block content.
64 | * @param array $block Block.
65 | * @return string
66 | */
67 | public function render_block_core_columns( $block_content, $block ) {
68 | if ( ! isset( $block['attrs']['className'] ) || ! str_contains( $block['attrs']['className'], 'elementary-media-text-interactive' ) ) {
69 | return $block_content;
70 | }
71 |
72 | /**
73 | * Enqueue the module script, The prefix `@` is used to indicate that the script is a module.
74 | * This handle with the prefix `@` will be used in other scripts to import this module.
75 | */
76 | wp_enqueue_script_module(
77 | '@elementary/media-text',
78 | sprintf( '%s/js/modules/media-text.js', ELEMENTARY_THEME_BUILD_URI ),
79 | [
80 | '@wordpress/interactivity',
81 | ]
82 | );
83 |
84 | $p = new WP_HTML_Tag_Processor( $block_content );
85 |
86 | $p->next_tag();
87 | $p->set_attribute( 'data-wp-interactive', '{ "namespace": "elementary/media-text" }' );
88 | $p->set_attribute( 'data-wp-context', '{ "isPlaying": false }' );
89 |
90 | return $p->get_updated_html();
91 | }
92 |
93 | /**
94 | * Render block core/video.
95 | *
96 | * @param string $block_content Block content.
97 | * @param array $block Block.
98 | * @return string
99 | */
100 | public function render_block_core_video( $block_content, $block ) {
101 | if ( ! isset( $block['attrs']['className'] ) || ! str_contains( $block['attrs']['className'], 'elementary-media-text-interactive' ) ) {
102 | return $block_content;
103 | }
104 | $p = new WP_HTML_Tag_Processor( $block_content );
105 |
106 | $p->next_tag();
107 | $p->set_attribute( 'data-wp-watch', 'callbacks.playVideo' );
108 |
109 | return $p->get_updated_html();
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/inc/classes/class-assets.php:
--------------------------------------------------------------------------------
1 | setup_hooks();
27 | }
28 |
29 | /**
30 | * Setup hooks.
31 | *
32 | * @since 1.0.0
33 | */
34 | public function setup_hooks() {
35 | add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
36 | add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_assets' ] );
37 | add_filter( 'render_block', [ $this, 'enqueue_block_specific_assets' ], 10, 2 );
38 | }
39 |
40 | /**
41 | * Register assets.
42 | *
43 | * @since 1.0.0
44 | *
45 | * @action wp_enqueue_scripts
46 | */
47 | public function register_assets() {
48 |
49 | $this->register_script( 'core-navigation', 'js/core-navigation.js' );
50 | $this->register_style( 'core-navigation', 'css/core-navigation.css' );
51 | $this->register_style( 'elementary-theme-styles', 'css/styles.css' );
52 | }
53 |
54 | /**
55 | * Enqueue block specific assets.
56 | *
57 | * @param string $markup Markup of the block.
58 | * @param array $block Array with block information.
59 | *
60 | * @since 1.0.0
61 | */
62 | public function enqueue_block_specific_assets( $markup, $block ) {
63 | if ( is_array( $block ) && ! empty( $block['blockName'] ) && 'core/navigation' === $block['blockName'] ) {
64 | wp_enqueue_script( 'core-navigation' );
65 | wp_enqueue_style( 'core-navigation' );
66 | }
67 |
68 | return $markup;
69 | }
70 |
71 | /**
72 | * Get asset dependencies and version info from {handle}.asset.php if exists.
73 | *
74 | * @param string $file File name.
75 | * @param array $deps Script dependencies to merge with.
76 | * @param string $ver Asset version string.
77 | *
78 | * @return array
79 | */
80 | public function get_asset_meta( $file, $deps = [], $ver = false ) {
81 | $asset_meta_file = sprintf( '%s/js/%s.asset.php', untrailingslashit( ELEMENTARY_THEME_BUILD_DIR ), basename( $file, '.' . pathinfo( $file )['extension'] ) );
82 | $asset_meta = is_readable( $asset_meta_file )
83 | ? require $asset_meta_file
84 | : [
85 | 'dependencies' => [],
86 | 'version' => $this->get_file_version( $file, $ver ),
87 | ];
88 |
89 | $asset_meta['dependencies'] = array_merge( $deps, $asset_meta['dependencies'] );
90 |
91 | return $asset_meta;
92 | }
93 |
94 | /**
95 | * Register a new script.
96 | *
97 | * @param string $handle Name of the script. Should be unique.
98 | * @param string|bool $file script file, path of the script relative to the assets/build/ directory.
99 | * @param array $deps Optional. An array of registered script handles this script depends on. Default empty array.
100 | * @param string|bool|null $ver Optional. String specifying script version number, if not set, filetime will be used as version number.
101 | * @param bool $in_footer Optional. Whether to enqueue the script before