├── .nvmrc ├── assets ├── global-scripts │ └── .gitkeep ├── images │ └── block-previews │ │ ├── .gitkeep │ │ ├── quotes-preview.jpg │ │ ├── tabs-preview.jpg │ │ ├── carousel-preview.jpg │ │ ├── accordion-preview.jpg │ │ ├── logo-grid-preview.jpg │ │ ├── side-by-side-preview.jpg │ │ ├── call-to-action-preview.jpg │ │ └── cards-repeater-preview.jpg ├── admin.js ├── frontend.js └── global-styles │ ├── tailwind.config.js │ ├── admin-styles.scss │ └── frontend-styles.scss ├── .stylelintignore ├── src ├── blocks │ ├── hero │ │ ├── editor.scss │ │ ├── editor.js │ │ ├── script.js │ │ ├── tailwind.config.js │ │ ├── style.scss │ │ ├── block.json │ │ └── hero.php │ ├── tabs │ │ ├── editor.js │ │ ├── editor.scss │ │ ├── tailwind.config.js │ │ ├── style.scss │ │ ├── block.json │ │ ├── tabs.php │ │ └── script.js │ ├── accordion │ │ ├── editor.js │ │ ├── editor.scss │ │ ├── tailwind.config.js │ │ ├── block.json │ │ ├── style.scss │ │ ├── script.js │ │ └── accordion.php │ ├── carousel │ │ ├── editor.js │ │ ├── editor.scss │ │ ├── tailwind.config.js │ │ ├── block.json │ │ ├── script.js │ │ ├── style.scss │ │ └── carousel.php │ ├── logo-grid │ │ ├── editor.js │ │ ├── script.js │ │ ├── editor.scss │ │ ├── tailwind.config.js │ │ ├── style.scss │ │ ├── block.json │ │ └── logo-grid.php │ ├── quotes │ │ ├── editor.js │ │ ├── script.js │ │ ├── editor.scss │ │ ├── style.scss │ │ ├── tailwind.config.js │ │ ├── block.json │ │ └── quotes.php │ ├── call-to-action │ │ ├── editor.scss │ │ ├── editor.js │ │ ├── script.js │ │ ├── tailwind.config.js │ │ ├── style.scss │ │ ├── block.json │ │ └── call-to-action.php │ ├── cards-repeater │ │ ├── editor.js │ │ ├── script.js │ │ ├── editor.scss │ │ ├── style.scss │ │ ├── tailwind.config.js │ │ ├── block.json │ │ └── cards-repeater.php │ └── side-by-side │ │ ├── editor.js │ │ ├── script.js │ │ ├── editor.scss │ │ ├── tailwind.config.js │ │ ├── style.scss │ │ ├── block.json │ │ └── side-by-side.php ├── modules │ ├── badges.php │ ├── search.php │ ├── tabs.php │ ├── figure.php │ ├── accordion.php │ ├── call-to-action-left.php │ ├── call-to-action-center.php │ ├── call-to-action-right.php │ ├── meta.php │ ├── hero.php │ ├── card.php │ ├── carousel-slide.php │ ├── notification.php │ └── breadcrumbs.php └── elements │ ├── eyebrow.php │ ├── label.php │ ├── content.php │ ├── blockquote.php │ ├── anchor.php │ ├── heading.php │ ├── input.php │ ├── icon.php │ ├── textarea.php │ ├── select.php │ ├── logo.php │ ├── badge.php │ ├── button.php │ └── image.php ├── wpcli └── block-starter │ ├── editor.scss │ ├── style.scss │ ├── editor.js │ ├── block.php │ ├── script.js │ ├── tailwind.config.js │ └── block.json ├── .prettierignore ├── acf-json ├── index.php ├── group_59416d894b7c7.json ├── group_61f3ff5b52cc3.json ├── group_61e58e490f037.json ├── group_61f413242c50a.json ├── group_61f444f22e304.json ├── group_624daa038b614.json ├── group_6346c08d323e8.json ├── group_5cc9ad45ed8c9.json ├── group_6361413178825.json ├── group_61e5c3849235d.json └── group_61e709c7963b1.json ├── env-example.json ├── .vscode ├── snipsnap.code-snippets ├── settings.json └── extensions.json ├── changelog.md ├── .prettierrc.js ├── .github ├── dependabot.yml ├── PULL_REQUEST_TEMPLATE.md ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md ├── inc ├── helpers │ ├── register-block-category.php │ ├── dependency.php │ ├── get-post-content.php │ ├── print-module.php │ ├── print-element.php │ ├── get-acf-fields.php │ ├── scripts.php │ ├── get-block-classes.php │ ├── print-post-author.php │ ├── print-post-date.php │ ├── get-formatted-args.php │ ├── print-svg.php │ ├── get-formatted-atts.php │ ├── allowed-blocks.php │ ├── setup-block-defaults.php │ ├── get-attachment-id-from-url.php │ ├── print-post-taxonomies.php │ ├── print-block.php │ └── get-svg.php └── hooks.php ├── .editorconfig ├── .gitignore ├── .stylelintrc.json ├── webpack.global.js ├── documentation ├── WP-CLI.md ├── Modules.md ├── Scripts.md ├── Functions.md ├── Blocks.md └── Philosophy.md ├── composer.json ├── postcss.config.js ├── package.json ├── phpcs.xml.dist ├── wds-acf-blocks.php └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /assets/global-scripts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/block-previews/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | vendor/ 3 | !.*.js 4 | -------------------------------------------------------------------------------- /src/blocks/hero/editor.scss: -------------------------------------------------------------------------------- 1 | // Editor styles. 2 | -------------------------------------------------------------------------------- /src/blocks/tabs/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /wpcli/block-starter/editor.scss: -------------------------------------------------------------------------------- 1 | // Editor styles. 2 | -------------------------------------------------------------------------------- /src/blocks/accordion/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/carousel/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/logo-grid/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/logo-grid/script.js: -------------------------------------------------------------------------------- 1 | import './style.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/quotes/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/quotes/script.js: -------------------------------------------------------------------------------- 1 | import './style.scss'; 2 | -------------------------------------------------------------------------------- /wpcli/block-starter/style.scss: -------------------------------------------------------------------------------- 1 | // Frontend styles. 2 | -------------------------------------------------------------------------------- /src/blocks/call-to-action/editor.scss: -------------------------------------------------------------------------------- 1 | // Editor styles. 2 | -------------------------------------------------------------------------------- /src/blocks/cards-repeater/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/cards-repeater/script.js: -------------------------------------------------------------------------------- 1 | import './style.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/side-by-side/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/side-by-side/script.js: -------------------------------------------------------------------------------- 1 | import './style.scss'; 2 | -------------------------------------------------------------------------------- /src/blocks/hero/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | 3 | // Editor JS here. 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | vendor/ 4 | style.css 5 | README.md 6 | -------------------------------------------------------------------------------- /wpcli/block-starter/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | 3 | // Editor JS here. 4 | -------------------------------------------------------------------------------- /src/blocks/call-to-action/editor.js: -------------------------------------------------------------------------------- 1 | import './editor.scss'; 2 | 3 | // Editor JS here. 4 | -------------------------------------------------------------------------------- /acf-json/index.php: -------------------------------------------------------------------------------- 1 | 2 | 404 Not Found 3 | 4 |

404 Not Found

5 |
nginx
6 | 7 | 8 | -------------------------------------------------------------------------------- /src/blocks/quotes/style.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Quotes, FRONTEND 3 | //---------------------------------------- 4 | 5 | .wds-block-quotes { 6 | @apply container; 7 | } 8 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [2.0.0] 4 | 5 | Update to utilize Portable Blocks & `block.json` for block registration. Requires ACF 6.0+, WordPress 5.8+ 6 | 7 | ## [1.0.0] 8 | 9 | Initial Release 10 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require( '@wordpress/prettier-config' ), 3 | overrides: [ 4 | { 5 | files: '*.scss', 6 | options: { 7 | singleQuote: true, 8 | }, 9 | }, 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /src/blocks/side-by-side/editor.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Side by Side, EDITOR 3 | //---------------------------------------- 4 | 5 | .wds-block-side-by-side { 6 | .wds-module-card { 7 | @apply p-8; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: 'npm' 4 | directory: '/' 5 | schedule: 6 | interval: 'daily' 7 | - package-ecosystem: 'composer' 8 | directory: '/' 9 | schedule: 10 | interval: 'daily' 11 | -------------------------------------------------------------------------------- /src/blocks/cards-repeater/editor.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Card Repeater, EDITOR 3 | //---------------------------------------- 4 | 5 | .wds-block-cards-repeater { 6 | .wds-module-card { 7 | @apply border border-black p-4; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "phpsab.executablePathCS": "./vendor/bin/phpcs", 3 | "phpsab.executablePathCBF": "./vendor/bin/phpcbf", 4 | "editor.formatOnSave": true, 5 | "scss.validate": false, 6 | "[javascriptreact]": { 7 | "editor.defaultFormatter": "esbenp.prettier-vscode" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/blocks/accordion/editor.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Accordion Styles, EDITOR 3 | //---------------------------------------- 4 | .wds-block-accordion { 5 | .wds-module-accordion { 6 | .accordion-item { 7 | @apply border border-black mb-4; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "bradlc.vscode-tailwindcss", 4 | "davidanson.vscode-markdownlint", 5 | "dbaeumer.vscode-eslint", 6 | "editorconfig.editorconfig", 7 | "esbenp.prettier-vscode", 8 | "snipsnapdev.snipsnap-vscode", 9 | "stylelint.vscode-stylelint", 10 | "valeryanm.vscode-phpsab" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /assets/global-styles/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../postcss.config' ); 2 | const directoryFiles = [ `./assets/global-styles/*.scss` ]; 3 | 4 | module.exports = { 5 | presets: [ require( tailwindPreset ) ], 6 | content: directoryFiles, 7 | theme: { 8 | extend: {}, 9 | }, 10 | variants: { 11 | extend: {}, 12 | }, 13 | plugins: [], 14 | }; 15 | -------------------------------------------------------------------------------- /src/blocks/tabs/editor.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Tabs Styles, EDITOR 3 | //---------------------------------------- 4 | .wds-block-tabs { 5 | .wds-module-tabs { 6 | nav { 7 | .tab-title { 8 | @apply border border-black; 9 | } 10 | } 11 | 12 | .tabs-content { 13 | @apply border border-black p-12 relative z-10 bg-white; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/blocks/hero/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'hero'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/quotes/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'quotes'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/carousel/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'carousel'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/tabs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | 3 | const blockName = 'tabs'; 4 | 5 | const directoryFiles = [ 6 | `./src/blocks/${ blockName }/*.php`, 7 | `./src/blocks/${ blockName }/*.scss`, 8 | `./src/blocks/${ blockName }/*.js`, 9 | ]; 10 | 11 | module.exports = { 12 | presets: [ require( tailwindPreset ) ], 13 | content: directoryFiles, 14 | }; 15 | -------------------------------------------------------------------------------- /inc/helpers/register-block-category.php: -------------------------------------------------------------------------------- 1 | 'WDS', 15 | 'title' => 'WebDevStudios Blocks', 16 | ); 17 | 18 | return $categories; 19 | } 20 | ); 21 | -------------------------------------------------------------------------------- /src/blocks/accordion/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'accordion'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/logo-grid/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'logo-grid'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/cards-repeater/style.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Card Repeater, FRONTEND 3 | //---------------------------------------- 4 | 5 | .wds-block-cards-repeater { 6 | @apply container; 7 | 8 | .card-wrap { 9 | @apply wds-grid; 10 | 11 | .wds-module-card { 12 | @apply col-span-12; 13 | @screen tablet-portrait { 14 | @apply col-span-4; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/blocks/side-by-side/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'side-by-side'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /wpcli/block-starter/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | 3 | const blockName = '{{blockName}}'; 4 | 5 | const directoryFiles = [ 6 | `./src/blocks/${ blockName }/*.php`, 7 | `./src/blocks/${ blockName }/*.scss`, 8 | `./src/blocks/${ blockName }/*.js`, 9 | ]; 10 | 11 | module.exports = { 12 | presets: [ require( tailwindPreset ) ], 13 | content: directoryFiles, 14 | }; 15 | -------------------------------------------------------------------------------- /src/blocks/call-to-action/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'call-to-action'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/cards-repeater/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { tailwindPreset } = require( '../../../postcss.config' ); 2 | const blockName = 'cards-repeater'; 3 | 4 | const directoryFiles = [ 5 | `./src/blocks/${ blockName }/*.php`, 6 | `./src/blocks/${ blockName }/*.scss`, 7 | `./src/blocks/${ blockName }/*.js`, 8 | ]; 9 | 10 | module.exports = { 11 | presets: [ require( tailwindPreset ) ], 12 | content: directoryFiles, 13 | }; 14 | -------------------------------------------------------------------------------- /src/blocks/side-by-side/style.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Side by Side 3 | //---------------------------------------- 4 | 5 | .wds-block-side-by-side { 6 | @apply container; 7 | 8 | .wds-grid { 9 | > * { 10 | @apply col-span-12; 11 | 12 | @screen tablet-portrait { 13 | @apply col-span-6; 14 | } 15 | } 16 | 17 | .card-first { 18 | @apply -order-1; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Closes #__ 2 | 3 | ### DESCRIPTION ### 4 | - What did you do? Give us some context... 5 | 6 | ### SCREENSHOTS ### 7 | ![screenshot](https://dl.dropbox.com/s/8k8xh3tuj3g5340/abs-pr-template.jpg?dl=0) 8 | 9 | ### OTHER ### 10 | - [ ] Is this issue accessible? (Section 508/WCAG 2.0AA) 11 | - [ ] Does this issue pass all the linting? (PHPCS, ESLint, SassLint) 12 | - [ ] Does this pass CBT? 13 | 14 | ### STEPS TO VERIFY ### 15 | How do we test this? 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.yml] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /inc/helpers/dependency.php: -------------------------------------------------------------------------------- 1 | 15 | */ 16 | function is_portable() { 17 | 18 | if ( ! function_exists( 'acf' ) || 6 > absint( acf()->version ) ) : 19 | return false; 20 | endif; 21 | 22 | return true; 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # os 2 | *~ 3 | .DS_* 4 | .svn/ 5 | .cvs/ 6 | .hg/ 7 | *.bak 8 | *.swp 9 | Thumbs.db 10 | 11 | # node 12 | .env 13 | .env.local 14 | logs 15 | *.log 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | node_modules/ 20 | 21 | # composer 22 | vendor/ 23 | 24 | .idea/ 25 | .sass-cache 26 | *.sublime-project 27 | .htaccess 28 | compass_app_log.txt 29 | .AppleDouble 30 | .LSOverride 31 | vendor/ 32 | build/ 33 | dist/ 34 | 35 | # tailwind config files 36 | /fallbackPreset.js 37 | /env.json 38 | -------------------------------------------------------------------------------- /src/blocks/hero/style.scss: -------------------------------------------------------------------------------- 1 | // Frontend styles. 2 | .wds-block-hero { 3 | @apply container; 4 | 5 | .wds-module-hero { 6 | @apply h-[400px]; 7 | 8 | .background { 9 | @apply relative; 10 | 11 | .wds-element-image, 12 | .overlay { 13 | @apply absolute w-full h-[400px] object-cover; 14 | } 15 | 16 | .overlay { 17 | @apply z-10; 18 | } 19 | } 20 | 21 | .hero-content { 22 | @apply relative z-20 h-full flex items-center justify-center flex-col text-white; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/blocks/logo-grid/style.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Logo Grid, FRONTEND 3 | //---------------------------------------- 4 | 5 | .wds-block-logo-grid { 6 | @apply container; 7 | 8 | .acf-innerblocks-container { 9 | @apply col-span-full; 10 | } 11 | 12 | .wds-grid { 13 | @apply grid-cols-2 gap-32; 14 | 15 | @screen tablet-portrait { 16 | @apply grid-cols-4; 17 | } 18 | 19 | @screen tablet-landscape { 20 | @apply grid-cols-6; 21 | } 22 | } 23 | 24 | .wds-module-figure { 25 | @apply col-span-1; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /inc/helpers/get-post-content.php: -------------------------------------------------------------------------------- 1 | [ 'wds-module', 'wds-module-badges' ], 16 | 'badges' => [], 17 | ]; 18 | 19 | $abs_args = get_formatted_args( $args, $abs_defaults ); 20 | 21 | // Set up element attributes. 22 | $abs_atts = get_formatted_atts( [ 'class' ], $abs_args ); 23 | ?> 24 |
> 25 | 33 |
34 | -------------------------------------------------------------------------------- /src/blocks/accordion/style.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Block - Accordion Styles, FRONTEND 3 | //---------------------------------------- 4 | .wds-block-accordion { 5 | @apply container; 6 | 7 | .wds-module-accordion { 8 | .accordion-item { 9 | @apply mb-8 rounded-md border border-gray-300; 10 | } 11 | 12 | .accordion-title { 13 | @apply mb-0 px-24 py-12 flex w-full justify-between items-center rounded-none; 14 | 15 | &:hover, 16 | &:focus { 17 | @apply bg-gray-200; 18 | } 19 | 20 | &[aria-expanded='false'] { 21 | ~ div { 22 | @apply hidden; 23 | } 24 | } 25 | 26 | &[aria-expanded='true'] { 27 | ~ div { 28 | @apply block; 29 | } 30 | 31 | svg { 32 | @apply rotate-180 transform transition-all; 33 | } 34 | } 35 | } 36 | 37 | .accordion-content { 38 | @apply px-24 py-12; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /inc/helpers/get-acf-fields.php: -------------------------------------------------------------------------------- 1 | 17 | */ 18 | function get_acf_fields( $fields = [], $block_id = false ) { 19 | 20 | if ( ! function_exists( 'get_field' ) ) : 21 | return; 22 | endif; 23 | 24 | $block_id = $block_id ? $block_id : get_the_ID(); 25 | $return_fields = []; 26 | foreach ( $fields as $field ) : 27 | $value = get_field( $field, $block_id ); 28 | $return_fields[ $field ] = $value; 29 | endforeach; 30 | 31 | return $return_fields; 32 | } 33 | -------------------------------------------------------------------------------- /src/elements/eyebrow.php: -------------------------------------------------------------------------------- 1 | [ 'wds-element', 'wds-element-eyebrow' ], 17 | 'text' => false, 18 | ]; 19 | 20 | $abs_args = get_formatted_args( $args, $abs_defaults ); 21 | 22 | // Make sure element should render. 23 | if ( $abs_args['text'] ) : 24 | 25 | // Set up element attributes. 26 | $abs_atts = get_formatted_atts( [ 'class' ], $abs_args ); 27 | 28 | ?> 29 | > 30 | 31 | -------------------------------------------------------------------------------- /inc/helpers/scripts.php: -------------------------------------------------------------------------------- 1 | [ 'wds-element', 'wds-element-button' ], 17 | 'text' => false, 18 | 'for' => false, 19 | ]; 20 | 21 | $abs_args = get_formatted_args( $args, $abs_defaults ); 22 | 23 | // Make sure element should render. 24 | if ( $abs_args['text'] ) : 25 | 26 | // Set up element attributes. 27 | $abs_atts = get_formatted_atts( [ 'for', 'class' ], $abs_args ); 28 | 29 | ?> 30 | 31 | 32 | -------------------------------------------------------------------------------- /acf-json/group_59416d894b7c7.json: -------------------------------------------------------------------------------- 1 | { 2 | "key": "group_59416d894b7c7", 3 | "title": "Field: Button (to clone)", 4 | "fields": [ 5 | { 6 | "key": "field_5c794a29fdd20", 7 | "label": "Button", 8 | "name": "button", 9 | "type": "link", 10 | "instructions": "Determine the button url, button text, and if the link opens in a new tab.", 11 | "required": 0, 12 | "conditional_logic": 0, 13 | "wrapper": { 14 | "width": "", 15 | "class": "", 16 | "id": "" 17 | }, 18 | "return_format": "array" 19 | } 20 | ], 21 | "location": [ 22 | [ 23 | { 24 | "param": "post_type", 25 | "operator": "==", 26 | "value": "post" 27 | } 28 | ] 29 | ], 30 | "menu_order": 0, 31 | "position": "normal", 32 | "style": "default", 33 | "label_placement": "top", 34 | "instruction_placement": "label", 35 | "hide_on_screen": "", 36 | "active": false, 37 | "description": "", 38 | "show_in_rest": 0, 39 | "modified": 1642447370 40 | } 41 | -------------------------------------------------------------------------------- /documentation/Modules.md: -------------------------------------------------------------------------------- 1 | # Modules 2 | 3 | [Documentation Navigation](#documentation-navigation) 4 | 5 | Modules are simply a collection of Elements; they are intended to be used as a means of speeding up development. 6 | 7 | Use them to build out a variety of designed components faster - for example, a site may have 3 styles of accordions, 2 types of carousel and 5 designs of cards. Simply duplicate (and name appropriately) a module to create a new version, then use `print_module()` to render that new version. This is simpler and faster than using logic to render a particular variant and also helps to avoid merge conflicts when several developers are building using the same component. 8 | 9 | ## Documentation Navigation 10 | 11 | - [Overview](Home.md) 12 | - [Philosophy](Philosophy.md) 13 | - [Functions](Functions.md) 14 | - [Blocks](Blocks.md) 15 | - [Modules](Modules.md) 16 | - [Elements](Elements.md) 17 | - [Scripts](Scripts.md) 18 | - [WP-CLI](WP-CLI.md) 19 | -------------------------------------------------------------------------------- /src/elements/content.php: -------------------------------------------------------------------------------- 1 | [ 'wds-element', 'wds-element-content' ], 17 | 'id' => '', 18 | 'content' => false, 19 | ]; 20 | 21 | $abs_args = get_formatted_args( $args, $abs_defaults ); 22 | 23 | // Make sure element should render. 24 | if ( $abs_args['content'] ) : 25 | 26 | // Set up element attributes. 27 | $abs_atts = get_formatted_atts( [ 'class', 'id' ], $abs_args ); 28 | 29 | ?> 30 |
>
31 | 32 | -------------------------------------------------------------------------------- /src/elements/blockquote.php: -------------------------------------------------------------------------------- 1 | [ 'wds-element', 'wds-element-blockquote' ], 17 | 'id' => '', 18 | 'cite' => false, 19 | 'quote' => false, 20 | ]; 21 | 22 | $abs_args = get_formatted_args( $args, $abs_defaults ); 23 | 24 | // Make sure element should render. 25 | if ( $abs_args['quote'] ) : 26 | 27 | // Set up element attributes. 28 | $abs_atts = get_formatted_atts( [ 'class', 'id' ], $abs_args ); 29 | ?> 30 |
31 |

32 | 33 |
34 | 35 | -------------------------------------------------------------------------------- /src/blocks/carousel/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File carousel/script.js 3 | * 4 | */ 5 | import './style.scss'; 6 | import Swiper, { Navigation, Pagination, A11y, Keyboard, Lazy } from 'swiper'; 7 | 8 | // Make sure everything is loaded first. 9 | if ( 10 | ( 'complete' === document.readyState || 11 | 'loading' !== document.readyState ) && 12 | ! document.documentElement.doScroll 13 | ) { 14 | wdsCarousel(); 15 | } else { 16 | document.addEventListener( 'DOMContentLoaded', wdsCarousel ); 17 | } 18 | 19 | /** 20 | * Start Carousel function 21 | * 22 | */ 23 | function wdsCarousel() { 24 | new Swiper( '.swiper', { 25 | modules: [ Navigation, Pagination, A11y, Keyboard, Lazy ], 26 | pagination: { 27 | el: '.swiper-pagination', 28 | clickable: true, 29 | }, 30 | navigation: { 31 | nextEl: '.swiper-button-next', 32 | prevEl: '.swiper-button-prev', 33 | }, 34 | loop: true, 35 | a11y: true, 36 | preloadImages: false, 37 | lazy: true, 38 | keyboard: true, 39 | } ); 40 | } 41 | -------------------------------------------------------------------------------- /inc/helpers/get-block-classes.php: -------------------------------------------------------------------------------- 1 | esc_html__( 'by', 'abs' ), 24 | ]; 25 | 26 | // Parse args. 27 | $args = wp_parse_args( $args, $defaults ); 28 | 29 | ?> 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | [ 'wds-element', 'wds-element-anchor' ], 17 | 'text' => false, 18 | 'href' => false, 19 | 'target' => false, 20 | ]; 21 | 22 | $abs_args = get_formatted_args( $args, $abs_defaults ); 23 | 24 | // Make sure element should render. 25 | if ( $abs_args['href'] && $abs_args['text'] ) : 26 | 27 | // Set up element attributes. 28 | $abs_atts = get_formatted_atts( [ 'href', 'target', 'class' ], $abs_args ); 29 | 30 | ?> 31 | > 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/elements/heading.php: -------------------------------------------------------------------------------- 1 | [ 'wds-element', 'wds-element-heading' ], 17 | 'id' => '', 18 | 'text' => false, 19 | 'level' => 2, 20 | ]; 21 | 22 | $abs_args = get_formatted_args( $args, $abs_defaults ); 23 | 24 | // Make sure element should render. 25 | if ( $abs_args['text'] ) : 26 | 27 | // Set up element attributes. 28 | $abs_atts = get_formatted_atts( [ 'class', 'id' ], $abs_args ); 29 | ?> 30 | >> 31 | 32 | -------------------------------------------------------------------------------- /inc/helpers/print-post-date.php: -------------------------------------------------------------------------------- 1 | esc_html__( 'Posted on', 'abs' ), 24 | 'date_format' => get_option( 'date_format' ), 25 | ]; 26 | 27 | // Parse args. 28 | $args = wp_parse_args( $args, $defaults ); 29 | ?> 30 | 31 | 32 | 33 | 34 | [ 'wds-element', 'wds-element-button' ], 17 | 'type' => 'text', 18 | 'name' => '', 19 | 'value' => '', 20 | 'placeholder' => false, 21 | 'disabled' => false, 22 | 'required' => false, 23 | ]; 24 | 25 | 26 | $abs_args = get_formatted_args( $args, $abs_defaults ); 27 | 28 | // Add ID for