> 8 | 9 |
10 | {{/isDynamicVariant}} 11 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-comments.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .wp-block-comments { 4 | margin: get-margin('xlarge') 0; 5 | } 6 | 7 | .wp-block-comment-content { 8 | padding-top: get-padding('small'); 9 | font-style: italic; 10 | } 11 | 12 | .comment-reply-link { 13 | @include button; 14 | @include button-primary; 15 | @include button-small; 16 | } 17 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_post-card.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .c-post-card { 4 | display: flex; 5 | flex-direction: column; 6 | gap: get-gap('normal'); 7 | width: 100%; 8 | padding: get-padding('normal'); 9 | background-color: get-color('white'); 10 | border: 1px solid get-color('grey-100'); 11 | border-radius: get-border-radius('small'); 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/styles/elements/_links.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #LINKS 3 | ========================================================================== */ 4 | 5 | a { 6 | color: $color-link; 7 | font-weight: 500; 8 | text-decoration: underline; 9 | 10 | &:hover { 11 | color: $color-hover; 12 | 13 | strong { 14 | color: $color-bright-sun; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/render.php: -------------------------------------------------------------------------------- 1 | get_block_wrapper_attributes(), 7 | 'attributes' => $attributes, 8 | 'content' => $content, 9 | 'block' => $block, 10 | ); 11 | 12 | Blocks::render_twig_file( $block->name, $context ); 13 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/wp-editor/_index.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable 2 | // This file is auto generated. Do not edit directly. 3 | 4 | @use '_block-edit-selector.scss'; 5 | @use '_block-sidebar.scss'; 6 | @use '_core-button.scss'; 7 | @use '_core-pagination.scss'; 8 | @use '_core-spacer.scss'; 9 | @use '_editor.scss'; 10 | @use '_render-appender.scss'; 11 | @use '_swiper-sliders.scss'; 12 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/inc/Enums/BlocksType.php: -------------------------------------------------------------------------------- 1 | { 12 | console.log(`Running yarn link in ${dir}`); 13 | execa.sync('npm', ['link'], { cwd: dir, stdio: 'inherit' }); 14 | console.log(); 15 | }); 16 | -------------------------------------------------------------------------------- /docs/content/docs/structure.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project structure 3 | excerpt: Before starting actual development, get familiar with the project structure generated by Chisel 4 | order: 700 5 | --- 6 | 7 | The project structure is files and folders generated by Chisel in your project. The structure is similar for WordPress website and static website: 8 | 9 | - [WordPress website structure](/docs/structure/wordpress) 10 | - [Static website structure](/docs/structure/static) 11 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | const chiselConfig = require('./chisel.config.js'); 2 | 3 | module.exports = { 4 | presets: [ 5 | [ 6 | 'babel-preset-chisel', 7 | { 8 | // global automatic polyfills: 9 | // yarn add core-js then uncomment 10 | // useBuiltIns: 'usage', 11 | }, 12 | ], 13 | chiselConfig.react && ['babel-preset-chisel/react', { hot: true }], 14 | // ['babel-preset-chisel/preact'], 15 | ].filter(Boolean), 16 | }; 17 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/wp-editor/_swiper-sliders.scss: -------------------------------------------------------------------------------- 1 | @use '../components/slider'; 2 | 3 | .b-slider { 4 | .swiper { 5 | opacity: 1; 6 | transition: get-transition('slow'); 7 | } 8 | 9 | .swiper-wrapper { 10 | display: flex; 11 | } 12 | 13 | .swiper-slide { 14 | width: 100%; 15 | flex: 1 0 100%; 16 | 17 | &:nth-child(n+2) { 18 | display: none; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-details.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | @use '../../blocks/accordion/style' as *; 3 | 4 | .wp-block-details { 5 | @extend .b-accordion__item; 6 | 7 | summary { 8 | @extend .b-accordion__item-header; 9 | 10 | + * { 11 | margin-top: get-padding('small'); 12 | } 13 | } 14 | 15 | *:not(summary) { 16 | padding-inline: get-padding('small'); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/elements/_html.scss: -------------------------------------------------------------------------------- 1 | @use '../../design/settings'; 2 | 3 | html { 4 | box-sizing: border-box; 5 | min-height: 100%; 6 | overflow-y: scroll; 7 | font-size: settings.$root-font-size; 8 | 9 | &.is-locked { 10 | min-height: 50%; 11 | 12 | body { 13 | height: 80vh; 14 | overflow: hidden; 15 | } 16 | } 17 | 18 | --scrollbar-width: #{settings.$scrollbar-width}; 19 | } 20 | -------------------------------------------------------------------------------- /docs/src/styles/elements/_blockquote.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #BLOCKQUOTES 3 | ========================================================================== */ 4 | 5 | blockquote { 6 | quotes: '“' '”' '‘' '’'; 7 | font-style: italic; 8 | 9 | p:first-child { 10 | &::before { 11 | content: open-quote; 12 | } 13 | } 14 | 15 | p:last-child { 16 | &::after { 17 | content: close-quote; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/src/styles/elements/_lists.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #LISTS 3 | ========================================================================== */ 4 | 5 | li { 6 | margin-bottom: 0.5rem; 7 | 8 | > ul, 9 | > ol { 10 | margin-bottom: 0; 11 | margin-left: 1rem; 12 | margin-top: 0.5rem; 13 | } 14 | } 15 | 16 | dt { 17 | font-weight: bold; 18 | } 19 | 20 | dd { 21 | margin-bottom: 1rem; 22 | margin-left: 1rem; 23 | } 24 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/widgets/_nav-menu.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable selector-class-pattern */ 2 | 3 | @use '~design' as *; 4 | 5 | .widget_nav_menu { 6 | ul { 7 | padding: 0; 8 | margin: 0; 9 | list-style-type: none; 10 | } 11 | 12 | .menu-item { 13 | margin: 0 0 get-margin('little'); 14 | } 15 | 16 | .sub-menu { 17 | padding-left: get-padding('little'); 18 | margin: get-margin('little') 0 0; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_layout.scss: -------------------------------------------------------------------------------- 1 | @function get-flex-col-width($column_no, $layout-gutter) { 2 | $layout-col-width: calc(((100 / 12) * $column_no) * 1%); 3 | $layout-gap-divider: calc(12 / $column_no); 4 | $layout-gutter-width: calc($layout-gutter - ($layout-gutter / $layout-gap-divider)); 5 | 6 | @if $column_no == 12 { 7 | $layout-gutter-width: 0%; 8 | } 9 | 10 | @return calc($layout-col-width - $layout-gutter-width); 11 | } 12 | -------------------------------------------------------------------------------- /docs/src/styles/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #BOX-SIZING 3 | ========================================================================== */ 4 | 5 | /** 6 | * More sensible default box-sizing: 7 | * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 8 | */ 9 | 10 | html { 11 | box-sizing: border-box; 12 | } 13 | 14 | * { 15 | &, 16 | &::before, 17 | &::after { 18 | box-sizing: inherit; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/vendor/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | @use '../../design/settings/' as *; 3 | 4 | .c-breadcrumbs { 5 | position: relative; 6 | margin: get-margin('small') 0; 7 | font-size: get-font-size('small'); 8 | 9 | span { 10 | span { 11 | display: inline-block; 12 | margin-inline: get-margin('tiny'); 13 | 14 | &:first-child { 15 | margin-inline-start: 0; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/src/styles/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ALIGN 3 | ========================================================================== */ 4 | 5 | .u-float-left { 6 | float: left; 7 | } 8 | 9 | .u-float-right { 10 | float: right; 11 | } 12 | 13 | .u-clear { 14 | clear: both; 15 | } 16 | 17 | .u-text-center { 18 | text-align: center; 19 | } 20 | 21 | .u-text-left { 22 | text-align: left; 23 | } 24 | 25 | .u-text-right { 26 | text-align: right; 27 | } 28 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-group.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .wp-block-group-is-layout-constrained { 4 | > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { 5 | max-width: get-layout-size('content'); 6 | margin-left: auto !important; 7 | margin-right: auto !important; 8 | padding-inline: get-padding('normal'); 9 | } 10 | } 11 | 12 | :where(.wp-block-group.has-background.alignfull) { 13 | padding: get-padding('small') 0; 14 | } 15 | -------------------------------------------------------------------------------- /docs/src/styles/components/_post.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #POST 3 | ========================================================================== */ 4 | 5 | .c-post { 6 | display: flex; 7 | flex-direction: column-reverse; 8 | width: 100%; 9 | 10 | @include bp('large') { 11 | flex-direction: row; 12 | } 13 | } 14 | 15 | .c-post__article { 16 | display: flex; 17 | flex-direction: column; 18 | 19 | @include bp('large') { 20 | max-width: 58%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .c-sidebar { 4 | padding-bottom: get-padding('large'); 5 | 6 | .c-post & { 7 | padding-top: get-padding('large'); 8 | } 9 | 10 | &--left { 11 | order: -1; 12 | } 13 | } 14 | 15 | .c-sidebar__inner { 16 | padding: get-padding('normal'); 17 | background-color: get-color('white'); 18 | border: 1px solid get-color('grey-100'); 19 | border-radius: get-border-radius('small'); 20 | } 21 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .o-wrapper { 4 | box-sizing: border-box; 5 | width: 100%; 6 | margin-inline: auto; 7 | } 8 | 9 | .o-wrapper * { 10 | box-sizing: border-box; 11 | } 12 | 13 | .o-wrapper__inner { 14 | width: 100%; 15 | max-width: get-layout-size('content'); 16 | padding-inline: get-padding('normal'); 17 | margin-inline: auto; 18 | 19 | &--wide { 20 | max-width: get-layout-size('wide'); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/style.chisel-tpl.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Theme Name: <%= app.name %> 3 | * Theme URI: https://www.getchisel.co/ 4 | * Author: <%= app.author %> 5 | * Description: Chisel Wordpress Starter Theme based on Timber library. 6 | * Version: 2.2.2 7 | * License: GNU General Public License v2 or later 8 | * License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | * Tags: chisel, custom, starter, theme, WordPress 10 | * Text Domain: chisel 11 | * Domain Path: /languages 12 | */ 13 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/index.js: -------------------------------------------------------------------------------- 1 | const Creator = require('./Creator'); 2 | 3 | const createCommand = async ({ args, cmd }) => { 4 | const creator = new Creator(undefined, { args, cmd }); 5 | 6 | if (cmd.devcontainer) { 7 | await creator.loadCreator('devcontainer'); 8 | } else { 9 | if (!cmd.devcontainerComplete) { 10 | await creator.loadCreator('init'); 11 | } 12 | 13 | await creator.loadCreator('app'); 14 | } 15 | 16 | return creator.run(); 17 | }; 18 | 19 | module.exports = createCommand; 20 | -------------------------------------------------------------------------------- /docs/src/assets/images/favicons/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/src/templates/components/sidebar.twig: -------------------------------------------------------------------------------- 1 | {% if sidebar is not empty %} 2 | 12 | {% endif %} 13 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/inc/Interfaces/HooksInterface.php: -------------------------------------------------------------------------------- 1 | { 5 | const icons = chiselEditorScripts?.icons || null; 6 | 7 | if (!icons) { 8 | return []; 9 | } 10 | 11 | const choices = []; 12 | 13 | Object.entries(icons).forEach(([value, label]) => { 14 | choices.push({ 15 | label, 16 | value, 17 | }); 18 | }); 19 | 20 | return choices; 21 | }; 22 | } 23 | 24 | export default new Utils(); 25 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | process.env.CHISEL_CONTEXT = __dirname; 2 | const chiselConfig = require('./chisel.config.js'); 3 | 4 | let extend = 'chisel'; 5 | 6 | if (chiselConfig.react) { 7 | extend = 'chisel/react'; 8 | } 9 | 10 | module.exports = { 11 | root: true, 12 | 13 | extends: extend, 14 | 15 | settings: { 16 | 'import/resolver': { 17 | node: {}, 18 | [require.resolve( 19 | 'chisel-plugin-code-style/eslint-import-resolver-webpack', 20 | )]: { 21 | config: require.resolve('chisel-scripts/webpack.config-sync.js'), 22 | }, 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/header.php: -------------------------------------------------------------------------------- 1 | *:nth-last-child(1) { 16 | margin-bottom: 0; 17 | } 18 | } 19 | } 20 | 21 | .b-accordion__item-title { 22 | margin: 0 !important; 23 | font-size: get-font-size('medium') !important; 24 | } 25 | -------------------------------------------------------------------------------- /packages/chisel-shared-utils/lib/package-manager.js: -------------------------------------------------------------------------------- 1 | let $hasYarn; 2 | function hasYarn() { 3 | return false; // v2 is always using npm 4 | if ($hasYarn !== undefined) return $hasYarn; 5 | 6 | const commandExists = require('command-exists'); 7 | $hasYarn = commandExists.sync('yarn'); 8 | return $hasYarn; 9 | } 10 | 11 | module.exports.hasYarn = hasYarn; 12 | 13 | function installDependencies(opts = {}) { 14 | const execa = require('execa'); 15 | 16 | return execa(hasYarn() ? 'yarn' : 'npm', ['install'], { 17 | stdio: 'inherit', 18 | ...opts, 19 | }); 20 | } 21 | 22 | module.exports.installDependencies = installDependencies; 23 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/inc/Helpers/AssetsHelpers.php: -------------------------------------------------------------------------------- 1 | ID ) ) { 16 | Timber::render( 'single-password.twig', $context, CacheHelpers::expiry() ); 17 | } else { 18 | Timber::render( array( 'single-' . $timber_post->ID . '.twig', 'single-' . $timber_post->post_type . '.twig', 'single.twig' ), $context, CacheHelpers::expiry() ); 19 | } 20 | -------------------------------------------------------------------------------- /docs/content/docs/development/twig.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Twig 3 | excerpt: Chisel uses Twig templating engine. 4 | order: 1300 5 | --- 6 | 7 | In WordPress projects, Twig is implemented via [Timber](https://www.upstatement.com/timber/). In front-end projects, Twig is supported via its JavaScript implementation, [Twig.js](https://github.com/twigjs/twig.js). 8 | 9 | Twig syntax is very intuitive and flexible. For more details on how to work with it, check out the [documentation](https://twig.symfony.com/doc/2.x/). 10 | 11 | When writing Twig templates, follow official [Twig coding standards](https://twig.symfony.com/doc/2.x/coding_standards.html). 12 | -------------------------------------------------------------------------------- /packages/chisel-scripts/lib/commands/wp.js: -------------------------------------------------------------------------------- 1 | const { runWithExit } = require('chisel-shared-utils'); 2 | 3 | module.exports = (api) => { 4 | api.registerCommand( 5 | 'wp', 6 | (command) => 7 | command 8 | .description('run WP-CLI command') 9 | .allowUnknownOption() 10 | .helpOption('--chisel-help'), 11 | async () => { 12 | const path = require('path'); 13 | 14 | const args = process.argv.slice(3); 15 | const wpCliPath = path.resolve(__dirname, '../..', 'wp-cli.phar'); 16 | 17 | await runWithExit(['php', wpCliPath, '--color', ...args], { 18 | cwd: api.resolveRoot(), 19 | }); 20 | }, 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/components/footer.twig: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /docs/content/docs/setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project setup 3 | excerpt: Learn how to setup Chisel project from the command line 4 | order: 400 5 | --- 6 | 7 | Once you [installed Chisel](/docs/installation), you can setup a project by running the following command on the command line: 8 | 9 | ```bash 10 | chisel create 11 | ``` 12 | 13 | Chisel asks you a few questions about your project and allows you to choose the project type. You can set up two different types of project: 14 | 15 | - [WordPress Website Setup](/docs/setup/wordpress) 16 | - [Static Website Setup](/docs/setup/static) 17 | 18 | Chisel then creates all required files for your project and installs the necessary software. 19 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/woo/_product.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .woocommerce div.product { 4 | .woocommerce-tabs ul.tabs li { 5 | color: get-color('primary'); 6 | background-color: get-color('grey-100'); 7 | } 8 | } 9 | 10 | .woocommerce-product-gallery { 11 | overflow: hidden; 12 | background-color: get-color('white'); 13 | border: 1px solid get-color('grey-100'); 14 | border-radius: get-border-radius('small'); 15 | } 16 | 17 | .c-product__gallery { 18 | position: relative; 19 | } 20 | 21 | .c-product-linked { 22 | gap: get-gap('small'); 23 | margin-bottom: get-margin('large'); 24 | } 25 | -------------------------------------------------------------------------------- /docs/src/styles/components/_why-chisel.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WHY-CHISEL 3 | ========================================================================== */ 4 | 5 | .c-why-chisel__title { 6 | font-size: 3.4rem; 7 | text-align: center; 8 | } 9 | 10 | .c-why-chisel__feature-item { 11 | & + & { 12 | margin-top: 10rem; 13 | 14 | @include bp('medium') { 15 | margin-top: 18rem; 16 | } 17 | } 18 | } 19 | 20 | .c-why-chisel__cta { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | } 25 | 26 | .c-why-chisel__cta-text { 27 | font-weight: 500; 28 | margin: 0 8px; 29 | } 30 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/inc/Helpers/CommentsHelpers.php: -------------------------------------------------------------------------------- 1 | ' ); 24 | } 25 | 26 | return ''; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/chisel-scripts/lib/commands/composer.js: -------------------------------------------------------------------------------- 1 | const { runWithExit } = require('chisel-shared-utils'); 2 | 3 | module.exports = (api) => { 4 | api.registerCommand( 5 | 'composer', 6 | (command) => 7 | command 8 | .description('run Composer command') 9 | .allowUnknownOption() 10 | .helpOption('--chisel-help'), 11 | async () => { 12 | const path = require('path'); 13 | 14 | const args = process.argv.slice(3); 15 | const composerPath = path.resolve(__dirname, '../..', 'composer.phar'); 16 | 17 | await runWithExit(['php', composerPath, '--ansi', ...args], { 18 | cwd: api.resolve(), 19 | }); 20 | }, 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /docs/src/styles/utilities/_hide.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #HIDE 3 | ========================================================================== */ 4 | 5 | /** 6 | * Hide only visually, but have it available for screen readers: 7 | * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 8 | */ 9 | 10 | .u-hidden-visually { 11 | @include hidden-visually(); 12 | } 13 | 14 | /** 15 | * Hide visually and from screen readers. 16 | */ 17 | 18 | .u-hidden { 19 | display: none !important; 20 | } 21 | 22 | .u-hidden\@small { 23 | display: none; 24 | 25 | @include bp(medium) { 26 | display: block; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/components/slider.twig: -------------------------------------------------------------------------------- 1 | {% set slider_params = slider_prepare_params(params) %} 2 | 3 | 13 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/page.php: -------------------------------------------------------------------------------- 1 | ID ) ) { 16 | Timber::render( 'single-password.twig', $context, CacheHelpers::expiry() ); 17 | } else { 18 | $templates = array( 'page-' . $timber_post->post_name . '.twig', 'page.twig' ); 19 | 20 | if ( is_front_page() ) { 21 | array_unshift( $templates, 'front-page.twig' ); 22 | } 23 | 24 | Timber::render( $templates, $context, CacheHelpers::expiry() ); 25 | } 26 | -------------------------------------------------------------------------------- /docs/src/styles/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #HEADINGS 3 | ========================================================================== */ 4 | 5 | /** 6 | * Simple default styles for headings 1 through 6. Anything more opinionated 7 | * than simple font-size changes should likely be applied via classes (see: 8 | * http://csswizardry.com/2016/02/managing-typography-on-large-apps/). 9 | */ 10 | 11 | h1 { 12 | font-size: 2.25rem; 13 | } 14 | 15 | h2 { 16 | font-size: 1.75rem; 17 | } 18 | 19 | h3 { 20 | font-size: 1.5rem; 21 | } 22 | 23 | h4 { 24 | font-size: 1.25rem; 25 | } 26 | 27 | h5 { 28 | font-size: 1.125rem; 29 | } 30 | 31 | h6 { 32 | font-size: 1rem; 33 | } 34 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-spacer.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .wp-block-spacer { 4 | padding: get-margin('normal') 0; 5 | margin: 0 !important; 6 | margin-block-start: 0 !important; 7 | 8 | &.is-style { 9 | &-tiny { 10 | padding: get-margin('tiny') 0; 11 | } 12 | 13 | &-small { 14 | padding: get-margin('small') 0; 15 | } 16 | 17 | &-medium { 18 | padding: get-margin('medium') 0; 19 | } 20 | 21 | &-large { 22 | padding: get-margin('large') 0; 23 | } 24 | 25 | &-xlarge { 26 | padding: get-margin('xlarge') 0; 27 | } 28 | 29 | &-big { 30 | padding: get-margin('big') 0; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/template/.devcontainer/post-create-command.sh.chisel-tpl: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -eux 4 | 5 | sudo chown "$USER:$USER" node_modules vendor 6 | touch .use-devcontainer 7 | 8 | pushd ../../.. 9 | 10 | sudo chown "$USER:$USER" . index.php wp-config.php 11 | if [ -d .git ] ; then sudo chown "$USER:$USER" .git ; fi 12 | chmod +x .devcontainer/compose .devcontainer/exec 13 | <% if (app.devcontainer) { %> 14 | { 15 | npx --yes generator-chisel@<%= chiselVersion %> --devcontainer-complete <%= app.responsesAsBase64 %> 16 | exit 17 | } 18 | <% } %> 19 | popd 20 | <% if (!app.devcontainer) { %> 21 | npm install 22 | npm run wp-config -- --devcontainer 23 | npm run composer install 24 | npm run build<% } %> 25 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/priorities.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | HELLO: 10, 3 | CHECK_UPDATE: 20, 4 | CHECK_EXIST: 30, 5 | 6 | // Basic: 7 | PROMPT: 100, 8 | 9 | // we can copy wp files here 10 | // downloading WP seems to preserve files created earlier 11 | COPY: 500, 12 | 13 | // UPDATE_CONFIG: 900, 14 | 15 | INSTALL_DEPENDENCIES: 1000, 16 | 17 | // we need chisel-scripts and plugins installed to run wp commands 18 | // we separate different steps as future proofing 19 | WP_DOWNLOAD: 1100, 20 | WP_CONFIG: 1200, 21 | WP_INSTALL: 1300, 22 | WP_INSTALL_PLUGINS: 1400, 23 | WP_THEME_ACTIVATE: 1500, 24 | WP_PLUGINS: 1600, 25 | 26 | FORMAT: 2500, 27 | 28 | BUILD: 3000, 29 | 30 | END_MESSAGE: 5000, 31 | }; 32 | -------------------------------------------------------------------------------- /docs/src/styles/generic/_shared.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SHARED 3 | ========================================================================== */ 4 | 5 | /** 6 | * Shared declarations for certain elements. 7 | */ 8 | 9 | /** 10 | * Always declare margins in the same direction: 11 | * csswizardry.com/2012/06/single-direction-margin-declarations 12 | */ 13 | 14 | address, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | blockquote, 22 | p, 23 | pre, 24 | dl, 25 | ol, 26 | ul, 27 | figure, 28 | hr, 29 | table, 30 | fieldset { 31 | margin-bottom: 1.3rem; 32 | } 33 | 34 | /** 35 | * Consistent indentation for lists. 36 | */ 37 | 38 | dd, 39 | ol, 40 | ul { 41 | margin-left: 1rem; 42 | } 43 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_badge.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | .c-badge { 4 | display: inline-block; 5 | padding: get-padding('tiny') get-padding('small'); 6 | font-size: px-rem(12); 7 | font-weight: 700; 8 | color: get-color('white'); 9 | text-decoration: none; 10 | text-transform: uppercase; 11 | background-color: get-color('foreground'); 12 | border-radius: get-border-radius('little'); 13 | transition: get-transition('normal'); 14 | 15 | &:hover { 16 | color: get-color('white'); 17 | background-color: get-color('primary'); 18 | } 19 | 20 | .is-disabled & { 21 | color: get-color('grey-900'); 22 | background-color: get-color('grey-100'); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/woocommerce/linked-products.twig: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/template/.devcontainer/Dockerfile: -------------------------------------------------------------------------------- 1 | ARG BASE_IMAGE_VERSION 2 | FROM wordpress:${BASE_IMAGE_VERSION} 3 | 4 | ARG CHISEL_PORT=3000 5 | 6 | # Install MariaDB Client 7 | RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ 8 | && apt-get -y install --no-install-recommends mariadb-client 9 | 10 | # Install WP CLI 11 | RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \ 12 | && chmod +x wp-cli.phar \ 13 | && mv wp-cli.phar /usr/local/bin/wp 14 | 15 | # Update port 16 | RUN sed -i 's/80/${CHISEL_PORT}/' /etc/apache2/ports.conf 17 | 18 | # Use wordpress user to run apache 19 | ENV APACHE_RUN_USER wordpress 20 | ENV APACHE_RUN_GROUP wordpress 21 | ENV CHISEL_PORT=${CHISEL_PORT} 22 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/elements/_shared.scss: -------------------------------------------------------------------------------- 1 | @use '~design' as *; 2 | 3 | p, 4 | ul, 5 | ol, 6 | li, 7 | address, 8 | pre, 9 | fieldset, 10 | hr, 11 | dl, 12 | blockquote, 13 | table, 14 | figure { 15 | margin-top: 0; 16 | margin-bottom: get-margin('normal'); 17 | } 18 | 19 | fieldset { 20 | padding: 0; 21 | } 22 | 23 | li { 24 | margin-bottom: get-margin('tiny'); 25 | 26 | > ul, 27 | > ol { 28 | margin-top: get-margin('tiny'); 29 | } 30 | } 31 | 32 | ul, 33 | ol { 34 | padding-left: get-padding('medium'); 35 | } 36 | 37 | hr { 38 | display: block; 39 | } 40 | 41 | mark { 42 | font-weight: 700; 43 | background-color: transparent; 44 | } 45 | 46 | strong { 47 | font-weight: 700; 48 | } 49 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/twig_cs.php: -------------------------------------------------------------------------------- 1 | in( __DIR__ . '/views' ); 7 | $finder_2 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks' ); 8 | $finder_3 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks-acf' ); 9 | 10 | return Twigcs\Config\Config::create() 11 | ->addFinder( $finder_1 ) 12 | ->addFinder( $finder_2 ) 13 | ->addFinder( $finder_3 ) 14 | ->setName( 'chisel' ) 15 | ->setSeverity( 'warning' ) 16 | ->setDisplay( Twigcs\Config\ConfigInterface::DISPLAY_BLOCKING ) 17 | // ->setReporter( 'json' ) phpcs:ignore 18 | ->setRuleSet( Twigcs\Ruleset\Official::class ); 19 | -------------------------------------------------------------------------------- /docs/src/templates/components/block.twig: -------------------------------------------------------------------------------- 1 | {% if loop.first == false %} 2 | 3 | {% endif %} 4 | }})
21 | 14 | {{ args.ctaLink }} 15 |
16 | 17 |{'Example Block – hello from the saved content!'}
; 20 | } 21 | -------------------------------------------------------------------------------- /docs/content/tutorials.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tutorials 3 | excerpt: Get inspired with our tutorials on how to effectively develop websites with Chisel. 4 | order: 00 5 | --- 6 | 7 | ## [Chisel Recipes](https://github.com/xfiveco/chisel-recipes) 8 | 9 | Collection of solutions and tips for developing Chisel projects. 10 | 11 | ## [Craft perfect websites with Chisel](https://www.xfive.co/blog/craft-perfect-websites-chisel/) 12 | 13 | A detailed comparison of old-school and modern web development workflows. Find out how tools like Chisel can make your life easier. 14 | 15 | ## [An MVC-like WordPress Development with ACF and Timber](https://www.xfive.co/blog/mvc-like-wordpress-development-acf-timber/) 16 | 17 | Improve your WordPress themes with ACF, Timber, and a grain of inspiration from the MVC pattern. 18 | 19 | ## [Easy-to-use Code Blocks in WordPress](https://www.xfive.co/blog/easy-use-code-blocks-wordpress/) 20 | 21 | Create easy-to-use code blocks in WordPress with ACF, Timber, and Prism.js 22 | -------------------------------------------------------------------------------- /docs/src/styles/objects/_icons.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ICONS 3 | ========================================================================== */ 4 | 5 | .o-icons::before, 6 | %o-icons::before { 7 | content: ''; 8 | background-size: contain; 9 | background-repeat: no-repeat; 10 | display: block; 11 | } 12 | 13 | .o-icons--star::before { 14 | width: 33px; 15 | height: 33px; 16 | background-image: url('~assets/images/star.svg'); 17 | } 18 | 19 | .o-icons--play::before { 20 | background-image: url('~assets/images/play.svg'); 21 | height: 50px; 22 | width: 50px; 23 | border-radius: 100%; 24 | } 25 | 26 | .o-icons--arrow::before { 27 | background-image: url('~assets/images/arrow.svg'); 28 | width: 28px; 29 | height: 17px; 30 | border-radius: 100%; 31 | } 32 | 33 | %o-icons--checkmark::before { 34 | background-image: url('~assets/images/checkmark.svg'); 35 | width: 17px; 36 | height: 17px; 37 | } 38 | -------------------------------------------------------------------------------- /packages/chisel-scripts/lib/commands/create-block/templates/acf/block/view.js.mustache: -------------------------------------------------------------------------------- 1 | /** 2 | * Use this file for JavaScript code that you want to run in the front-end 3 | * on posts/pages that contain this block. 4 | * 5 | * When this file is defined as the value of the `viewScript` property 6 | * in `block.json` it will be enqueued on the front end of the site. 7 | * 8 | * Example: 9 | * 10 | * ```js 11 | * { 12 | * "viewScript": "file:./view.js" 13 | * } 14 | * ``` 15 | * 16 | * If you're not making any changes to this file because your project doesn't need any 17 | * JavaScript running in the front-end, then you should delete this file and remove 18 | * the `viewScript` property from `block.json`. 19 | * 20 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script 21 | */ 22 | 23 | /* eslint-disable no-console */ 24 | console.log("Hello World! (from {{namespace}}-{{slug}} block)"); 25 | /* eslint-enable no-console */ 26 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/inc/Helpers/CacheHelpers.php: -------------------------------------------------------------------------------- 1 | cache_everything ) { 28 | return 0; 29 | } 30 | 31 | return $custom_expiry ?? (int) $cache->cache_expiry; 32 | } 33 | 34 | /** 35 | * Clear twig environment cache. 36 | * 37 | * @return void 38 | */ 39 | public static function clear_environment_cache(): void { 40 | $loader = new Loader(); 41 | $loader->clear_cache_twig(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/editor/mods/blocks-alignment.js: -------------------------------------------------------------------------------- 1 | /* global chiselEditorScripts */ 2 | 3 | import { addFilter } from '@wordpress/hooks'; 4 | import { createHigherOrderComponent } from '@wordpress/compose'; 5 | import { useEffect } from '@wordpress/element'; 6 | 7 | const chiselBlocksDefaultAlignment = createHigherOrderComponent((BlockEdit) => { 8 | return (props) => { 9 | const { setAttributes, isSelected, name } = props; 10 | 11 | useEffect(() => { 12 | if (isSelected) { 13 | const alignment = chiselEditorScripts?.blocksDefaultAlignment?.[name]; 14 | 15 | if (alignment) { 16 | setAttributes({ 17 | align: alignment, 18 | }); 19 | } 20 | } 21 | }, []); 22 | 23 | return{{ post.data.excerpt }}
17 |{{ post.excerpt({words: 20, read_more: __('Keep reading', 'chisel'), end: '...', force: true}) }}
12 | 13 | {% if post.tags %} 14 | 19 | {% endif %} 20 |