create-child.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. const child_theme_json = `{
  2. "$schema": "https://json.schemastore.org/theme-v1.json",
  3. "version": 1,
  4. "settings": {
  5. "custom": {}
  6. },
  7. "styles": {
  8. "blocks": {}
  9. }
  10. }`;
  11. const child_package_json = `{
  12. "name": "{newtheme}",
  13. "version": "0.0.1",
  14. "description": "",
  15. "main": "style.css",
  16. "dependencies": {},
  17. "devDependencies": {
  18. "@wordpress/base-styles": "^3.4.0",
  19. "chokidar-cli": "^2.1.0",
  20. "node-sass": "^5.0.0",
  21. "node-sass-package-importer": "^5.3.2"
  22. },
  23. "scripts": {
  24. "start": "chokidar \\"**/*.scss\\" child-theme.json ../blockbase/theme.json -c \\"npm run build\\" --initial",
  25. "build": "npm run build:theme && npm run build:scss",
  26. "build:theme": "node ../blockbase/build.js {newtheme}",
  27. "build:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/theme.scss assets/theme.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
  28. },
  29. "author": "",
  30. "license": "GPLv2"
  31. }`;
  32. const style_css = `/*
  33. Theme Name: {newtheme}
  34. Theme URI:
  35. Author:
  36. Author URI:
  37. Description:
  38. Requires at least: 5.7
  39. Tested up to: 5.7
  40. Requires PHP: 5.7
  41. Version: 0.0.1
  42. License: GNU General Public License v2 or later
  43. License URI:
  44. Template: blockbase
  45. Text Domain: {newtheme}
  46. Tags:
  47. */`;
  48. const theme_scss = `
  49. // Custom CSS should be added here. It will be compiled to /assets/theme.css.
  50. `;
  51. const functions_php = `<?php
  52. /**
  53. * Add Editor Styles
  54. */
  55. function {newtheme}_editor_styles() {
  56. // Enqueue editor styles.
  57. add_editor_style(
  58. array(
  59. '/assets/theme.css',
  60. )
  61. );
  62. }
  63. add_action( 'after_setup_theme', '{newtheme}_editor_styles' );
  64. /**
  65. *
  66. * Enqueue scripts and styles.
  67. */
  68. function {newtheme}_scripts() {
  69. wp_enqueue_style( '{newtheme}-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blockbase-ponyfill' ), wp_get_theme()->get( 'Version' ) );
  70. }
  71. add_action( 'wp_enqueue_scripts', '{newtheme}_scripts' );
  72. `;
  73. const block_templates_index_html = `
  74. <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
  75. <!-- wp:paragraph -->
  76. <p>Populate this /block-templates/INDEX.html template (and other templates) with your block markup.</p>
  77. <!-- /wp:paragraph -->
  78. `;
  79. const block_template_parts_header = `
  80. <!-- wp:paragraph -->
  81. <p>Populate this /block-template-parts/header.html template part (and other template parts) with your block markup.</p>
  82. <!-- /wp:paragraph -->
  83. `;
  84. const success_message = `
  85. Success creating new theme {newtheme}!
  86. `;
  87. const fs = require( 'fs' );
  88. const execSync = require( 'child_process' ).execSync;
  89. const childThemeName = process.argv[ 2 ];
  90. if ( ! childThemeName ) {
  91. console.log( 'Please provide the slug of the child theme to create.' );
  92. } else {
  93. createChild( childThemeName );
  94. }
  95. function createChild( name ) {
  96. //TODO: Santatize theme name/slug
  97. try {
  98. fs.mkdirSync( `../${ name }` );
  99. fs.mkdirSync( `../${ name }/sass` );
  100. fs.mkdirSync( `../${ name }/block-templates` );
  101. fs.mkdirSync( `../${ name }/block-template-parts` );
  102. fs.writeFileSync(
  103. `../${ name }/child-theme.json`,
  104. child_theme_json.replace( /{newtheme}/g, name )
  105. );
  106. fs.writeFileSync(
  107. `../${ name }/package.json`,
  108. child_package_json.replace( /{newtheme}/g, name )
  109. );
  110. fs.writeFileSync(
  111. `../${ name }/style.css`,
  112. style_css.replace( /{newtheme}/g, name )
  113. );
  114. fs.writeFileSync(
  115. `../${ name }/functions.php`,
  116. functions_php.replace( /{newtheme}/g, name )
  117. );
  118. fs.writeFileSync(
  119. `../${ name }/sass/theme.scss`,
  120. theme_scss.replace( /{newtheme}/g, name )
  121. );
  122. fs.writeFileSync(
  123. `../${ name }/block-templates/index.html`,
  124. block_templates_index_html.replace( /{newtheme}/g, name )
  125. );
  126. fs.writeFileSync(
  127. `../${ name }/block-template-parts/header.html`,
  128. block_template_parts_header.replace( /{newtheme}/g, name )
  129. );
  130. execSync( `cd ../${ name }/ && npm install && npm run build`, {
  131. stdio: 'inherit',
  132. } );
  133. console.log( success_message.replace( /{newtheme}/g, name ) );
  134. } catch ( err ) {
  135. console.log( 'child theme creation failed: ' + err );
  136. }
  137. }