├── .gitignore ├── LICENSE ├── README.md ├── brads-boilerplate-block-plugin-tailwind ├── .gitignore ├── build │ ├── block.json │ ├── frontend.asset.php │ ├── frontend.js │ ├── frontend.js.map │ ├── index.asset.php │ ├── index.js │ ├── index.js.map │ ├── render.php │ ├── style-index-rtl.css │ ├── style-index.css │ ├── style-index.css.map │ └── style.css ├── index.php ├── package.json └── src │ ├── block.json │ ├── frontend.js │ ├── index.js │ ├── render.php │ └── style.css ├── brads-boilerplate-block-plugin ├── .gitignore ├── build │ ├── block.json │ ├── frontend-rtl.css │ ├── frontend.asset.php │ ├── frontend.css │ ├── frontend.js │ ├── index-rtl.css │ ├── index.asset.php │ ├── index.css │ ├── index.js │ └── render.php ├── index.php ├── package.json └── src │ ├── block.json │ ├── frontend.js │ ├── frontend.scss │ ├── index.js │ ├── index.scss │ └── render.php ├── brads-boilerplate-theme-tailwind ├── .gitignore ├── build │ ├── index.asset.php │ ├── index.css │ ├── index.js │ └── index.js.map ├── footer.php ├── functions.php ├── header.php ├── index.php ├── package.json ├── single.php ├── src │ ├── index.css │ ├── index.js │ └── scripts │ │ ├── ExampleReactComponent.js │ │ └── Person.js └── style.css ├── brads-boilerplate-theme ├── .gitignore ├── build │ ├── index-rtl.css │ ├── index.asset.php │ ├── index.css │ └── index.js ├── footer.php ├── functions.php ├── header.php ├── index.php ├── package.json ├── src │ ├── index.js │ ├── scripts │ │ ├── ExampleReactComponent.js │ │ └── Person.js │ └── styles │ │ ├── example-react-component.scss │ │ ├── main.scss │ │ ├── mixins.scss │ │ └── variables.scss └── style.css ├── brads-fse-hybrid-theme ├── .gitignore ├── build │ ├── archive │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── banner │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── blogindex │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── container │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── eventsandblogs │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── footer │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── genericbutton │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ └── index.js.map │ ├── genericheading │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ └── index.js.map │ ├── header │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── index-rtl.css │ ├── index.asset.php │ ├── index.css │ ├── index.css.map │ ├── index.js │ ├── index.js.map │ ├── interactivity-quiz │ │ ├── block.json │ │ ├── index-rtl.css │ │ ├── index.asset.php │ │ ├── index.css │ │ ├── index.css.map │ │ ├── index.js │ │ ├── index.js.map │ │ ├── render.php │ │ ├── style-index-rtl.css │ │ ├── style-index.css │ │ ├── style-index.css.map │ │ ├── view.asset.php │ │ ├── view.js │ │ └── view.js.map │ ├── page │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── search │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── searchresults │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── singlepost │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── slide │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── slideshow │ │ ├── block.json │ │ ├── index.asset.php │ │ ├── index.js │ │ ├── index.js.map │ │ └── render.php │ ├── solved-counter │ │ ├── block.json │ │ ├── index-rtl.css │ │ ├── index.asset.php │ │ ├── index.css │ │ ├── index.css.map │ │ ├── index.js │ │ ├── index.js.map │ │ ├── render.php │ │ ├── style-index-rtl.css │ │ ├── style-index.css │ │ ├── style-index.css.map │ │ ├── view.asset.php │ │ ├── view.js │ │ └── view.js.map │ ├── style-index-rtl.css │ ├── style-index.css │ └── style-index.css.map ├── css │ ├── base │ │ ├── baseline.scss │ │ ├── utility-classes.scss │ │ └── variables.scss │ ├── modules │ │ ├── btn.scss │ │ ├── event-summary.scss │ │ ├── full-width-split.scss │ │ ├── generic-content.scss │ │ ├── headline.scss │ │ ├── hero-slider.scss │ │ ├── link-list.scss │ │ ├── login.scss │ │ ├── main-navigation.scss │ │ ├── metabox.scss │ │ ├── my-notes.scss │ │ ├── page-banner.scss │ │ ├── page-links.scss │ │ ├── post-item.scss │ │ ├── professor-card.scss │ │ ├── search-overlay.scss │ │ ├── shame.scss │ │ ├── site-footer.scss │ │ └── site-header.scss │ └── style.scss ├── functions.php ├── images │ ├── apples.jpg │ ├── barksalot.jpg │ ├── bread.jpg │ ├── bus.jpg │ ├── library-hero.jpg │ ├── meowsalot.jpg │ └── ocean.jpg ├── inc │ ├── ourColors.js │ └── search-route.php ├── index.php ├── package.json ├── screenshot.png ├── searchform.php ├── src │ ├── archive │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── banner │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── blogindex │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── container │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── eventsandblogs │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── footer │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── genericbutton │ │ ├── block.json │ │ ├── edit.js │ │ └── index.js │ ├── genericheading │ │ ├── block.json │ │ ├── edit.js │ │ └── index.js │ ├── header │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── index.js │ ├── interactivity-quiz │ │ ├── README.md │ │ ├── block.json │ │ ├── edit.js │ │ ├── editor.scss │ │ ├── index.js │ │ ├── render.php │ │ ├── style.scss │ │ └── view.js │ ├── modules │ │ ├── HeroSlider.js │ │ ├── MobileMenu.js │ │ └── Search.js │ ├── page │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── search │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── searchresults │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── singlepost │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── slide │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ ├── slideshow │ │ ├── block.json │ │ ├── edit.js │ │ ├── index.js │ │ └── render.php │ └── solved-counter │ │ ├── README.md │ │ ├── block.json │ │ ├── edit.js │ │ ├── editor.scss │ │ ├── index.js │ │ ├── render.php │ │ ├── style.scss │ │ └── view.js ├── style.css ├── template-parts │ ├── content-campus.php │ ├── content-event.php │ ├── content-page.php │ ├── content-post.php │ ├── content-professor.php │ └── content-program.php ├── templates │ ├── archive.html │ ├── emptycanvas.html │ ├── front-page.html │ ├── index.html │ ├── page-search.html │ ├── page.html │ ├── search.html │ └── single.html └── theme.json ├── classic-plugin-custom-menu ├── custom.svg ├── index.php └── styles.css ├── classic-plugin-settings-menu ├── languages │ ├── wcpdomain-es_MX.mo │ ├── wcpdomain-es_MX.po │ └── wcpdomain.pot └── our-first-unique-plugin.php ├── interactivity-block-tailwind ├── .gitignore ├── build │ ├── block.json │ ├── index.asset.php │ ├── index.js │ ├── index.js.map │ ├── render.php │ ├── style-index-rtl.css │ ├── style-index.css │ ├── style-index.css.map │ ├── style.css │ ├── view.asset.php │ ├── view.js │ └── view.js.map ├── interactivity-block.php ├── package.json └── src │ ├── block.json │ ├── edit.js │ ├── index.js │ ├── render.php │ ├── style.css │ └── view.js └── interactivity-block ├── .gitignore ├── build ├── block.json ├── index-rtl.css ├── index.asset.php ├── index.css ├── index.css.map ├── index.js ├── index.js.map ├── render.php ├── style-index-rtl.css ├── style-index.css ├── style-index.css.map ├── view.asset.php ├── view.js └── view.js.map ├── interactivity-block.php ├── package.json └── src ├── block.json ├── edit.js ├── editor.scss ├── index.js ├── render.php ├── style.scss └── view.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Brad Schiff 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Brad’s Boilerplate 2 | 3 | This repo contains different theme and plugin boilerplate folders. Here's a quick summary of what makes each one unique. 4 | 5 | ## Themes 6 | 7 | **brads-boilerplate-theme:** This is a traditional / classic (not block theme) that uses SCSS and WordPress's copy of React for public-front end JS instead of the modern Interactivity API. 8 | 9 | **brads-boilerplate-theme-tailwind:** The same as above; only it uses Tailwind CSS instead of SCSS. 10 | 11 | **brads-fse-hybrid-theme:** This is a block or Full Site Editing (FSE) theme. However, instead of using default/core WP blocks; it uses blocks that we've created as a developer. It uses PHP for (most of) the output so the blocks are dynamic. Instead of having a separate plugin for each block you need to create this theme let's you create as many of your own blocks all within one single convenient theme. 12 | 13 | ## Block Plugins 14 | 15 | **interactivity-block:** This uses the new Interactivity API in WordPress. However, the official WP example doesn't show how to work with attributes or anything useful that you'd actually spend the next hour or two trying to figure out how to do. This block showcases the basics that I feel most devs will be looking to learn about. 16 | 17 | **interactivity-block-tailwind:** The same as above; only it uses Tailwind CSS instead of SCSS. 18 | 19 | **brads-boilerplate-block-plugin:** A block but it does **not** use the Interactivity API: it uses WordPress's copy of React for public visitor JS behavior. 20 | 21 | **brads-boilerplate-block-plugin-tailwind:** The same above; only it uses Tailwind CSS instead of SCSS. 22 | 23 | # Instructions 24 | 25 | After placing one of the folders in your WordPress **themes** or **plugins** folders, you then: 26 | 27 | 1. Point your terminal towards the new example folder. 28 | 1. Run `npm install` 29 | 1. Run `npm run start` and the package will now be watching for any saved changes to your JS or SCSS files. 30 | 1. Please note; for the **brads-fse-hybrid-theme** folder in particular; you'll need to run `npm run start` in one terminal and then open a 2nd terminal and run `npm run blocks` - go ahead and leave both running. The "start" task processes your global CSS and JS while the "blocks" task processes all of your block sub-folders. The two run in perfect harmony. I've tried to use NPM packages to automatically run both tasks at the same time, but I've found that short of having two phsyically separate terminal tabs they don't play together nicely. 31 | 32 | Alternatively, you can run `npm run preview` and that will **both** start the watch task **and** start a proxy server running on `localhost:3000` that will automatically refresh the browser anytime you save a change. In order for this feature to work you will need to change the domain in `package.json` on **line #8**. In my file it mentions `myexample.local` but obviously you will have a different local dev domain that you want to proxy. 33 | 34 | Enjoy! 35 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/build/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "makeupnamespace/bradsblockreacttailwind", 5 | "version": "0.1.0", 6 | "title": "Brads Boilerplate Block Tailwind React", 7 | "category": "common", 8 | "icon": "welcome-learn-more", 9 | "attributes": { 10 | "skyColor": { 11 | "type": "string" 12 | }, 13 | "grassColor": { 14 | "type": "string" 15 | } 16 | }, 17 | "editorScript": "file:./index.js", 18 | "style": "file:./style-index.css", 19 | "render": "file:./render.php", 20 | "viewScript": "file:./frontend.js" 21 | } -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/build/frontend.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom'), 'version' => '6dbab7cb80c8f4a3f2e7'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => 'c69f2abde0de5f26c65b'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/build/render.php: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/index.php: -------------------------------------------------------------------------------- 1 | { 7 | const data = JSON.parse(div.querySelector("pre").innerText) 8 | const root = ReactDOM.createRoot(div) 9 | root.render() 10 | div.classList.remove("tailwind-update-me") 11 | }) 12 | 13 | function OurComponent(props) { 14 | const [showSkyColor, setShowSkyColor] = useState(false) 15 | const [showGrassColor, setShowGrassColor] = useState(false) 16 | 17 | return ( 18 |
19 |
20 |

21 | 27 | {showSkyColor && {props.skyColor}} 28 |

29 |

30 | 36 | {showGrassColor && {props.grassColor}} 37 |

38 |
39 |
40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/src/index.js: -------------------------------------------------------------------------------- 1 | import "./style.css" 2 | 3 | import { useBlockProps } from "@wordpress/block-editor" 4 | import { registerBlockType } from "@wordpress/blocks" 5 | import metadata from "./block.json" 6 | 7 | registerBlockType(metadata.name, { edit: EditComponent }) 8 | 9 | function EditComponent(props) { 10 | function updateSkyColor(e) { 11 | props.setAttributes({ skyColor: e.target.value }) 12 | } 13 | 14 | function updateGrassColor(e) { 15 | props.setAttributes({ grassColor: e.target.value }) 16 | } 17 | 18 | return ( 19 |
20 |
21 |
22 | 29 | 36 |
37 |
38 |
39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/src/render.php: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /brads-boilerplate-block-plugin-tailwind/src/style.css: -------------------------------------------------------------------------------- 1 | @layer theme, base, components, utilities; 2 | 3 | @import "tailwindcss/theme.css" layer(theme); 4 | 5 | .my-unique-plugin-wrapper-class { 6 | @import "tailwindcss/preflight.css" layer(base); 7 | @import "tailwindcss/utilities.css" layer(utilities); 8 | } 9 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "makeupnamespace/make-up-block-name", 5 | "version": "0.1.0", 6 | "title": "Brads Boilerplate Block", 7 | "category": "common", 8 | "icon": "welcome-learn-more", 9 | "attributes": { 10 | "skyColor": { 11 | "type": "string" 12 | }, 13 | "grassColor": { 14 | "type": "string" 15 | } 16 | }, 17 | "editorScript": "file:./index.js", 18 | "editorStyle": "file:./index.css", 19 | "style": "file:./frontend.css", 20 | "render": "file:./render.php", 21 | "viewScript": "file:./frontend.js" 22 | } -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/frontend-rtl.css: -------------------------------------------------------------------------------- 1 | .boilerplate-frontend{background-color:#ffe5b4;border:2px solid #ffda97;border-radius:5px;box-shadow:-2px 2px 2px rgba(0,0,0,.07);color:#ce9c41;margin:20px 0;padding:20px}.boilerplate-frontend p{margin:0;padding:0} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/frontend.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom'), 'version' => '3768d06322b798f82a39'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/frontend.css: -------------------------------------------------------------------------------- 1 | .boilerplate-frontend{background-color:#ffe5b4;border:2px solid #ffda97;border-radius:5px;box-shadow:2px 2px 2px rgba(0,0,0,.07);color:#ce9c41;margin:20px 0;padding:20px}.boilerplate-frontend p{margin:0;padding:0} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/frontend.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={338:(e,t,r)=>{var o=r(795);t.createRoot=o.createRoot,t.hydrateRoot=o.hydrateRoot},795:e=>{e.exports=window.ReactDOM}},t={};function r(o){var a=t[o];if(void 0!==a)return a.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,r),l.exports}(()=>{const e=window.React;var t=r(338);function o(t){const[r,o]=(0,e.useState)(!1),[a,l]=(0,e.useState)(!1);return(0,e.createElement)("div",{className:"boilerplate-frontend"},(0,e.createElement)("p",null,(0,e.createElement)("button",{onClick:()=>o((e=>!e))},"Toggle view sky color"),r&&(0,e.createElement)("span",null,t.skyColor)),(0,e.createElement)("p",null,(0,e.createElement)("button",{onClick:()=>l((e=>!e))},"Toggle view grass color"),a&&(0,e.createElement)("span",null,t.grassColor)))}document.querySelectorAll(".boilerplate-update-me").forEach((r=>{const a=JSON.parse(r.querySelector("pre").innerText);t.createRoot(r).render((0,e.createElement)(o,{...a})),r.classList.remove("boilerplate-update-me")}))})()})(); -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/index-rtl.css: -------------------------------------------------------------------------------- 1 | .makeUpYourBlockTypeName{background-color:#b8c9f8;border:1px solid #94a9e2;border-radius:5px;box-sizing:border-box;padding:20px} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '5041e37a4996df986cea'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/index.css: -------------------------------------------------------------------------------- 1 | .makeUpYourBlockTypeName{background-color:#b8c9f8;border:1px solid #94a9e2;border-radius:5px;box-sizing:border-box;padding:20px} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/index.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";const e=window.React,t=window.wp.blockEditor,o=window.wp.blocks,a=JSON.parse('{"UU":"makeupnamespace/make-up-block-name"}');(0,o.registerBlockType)(a.UU,{edit:function(o){return(0,e.createElement)("div",{...(0,t.useBlockProps)()},(0,e.createElement)("div",{className:"makeUpYourBlockTypeName"},(0,e.createElement)("input",{type:"text",value:o.attributes.skyColor,onChange:function(e){o.setAttributes({skyColor:e.target.value})},placeholder:"sky color..."}),(0,e.createElement)("input",{type:"text",value:o.attributes.grassColor,onChange:function(e){o.setAttributes({grassColor:e.target.value})},placeholder:"grass color..."})))}})})(); -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/build/render.php: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/index.php: -------------------------------------------------------------------------------- 1 | { 8 | const data = JSON.parse(div.querySelector("pre").innerText) 9 | const root = ReactDOM.createRoot(div) 10 | root.render() 11 | div.classList.remove("boilerplate-update-me") 12 | }) 13 | 14 | function OurComponent(props) { 15 | const [showSkyColor, setShowSkyColor] = useState(false) 16 | const [showGrassColor, setShowGrassColor] = useState(false) 17 | 18 | return ( 19 |
20 |

21 | 22 | {showSkyColor && {props.skyColor}} 23 |

24 |

25 | 26 | {showGrassColor && {props.grassColor}} 27 |

28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/src/frontend.scss: -------------------------------------------------------------------------------- 1 | .boilerplate-frontend { 2 | border-radius: 5px; 3 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07); 4 | background-color: #ffe5b4; 5 | border: 2px solid #ffda97; 6 | color: #ce9c41; 7 | padding: 20px; 8 | margin: 20px 0; 9 | 10 | p { 11 | margin: 0; 12 | padding: 0; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/src/index.js: -------------------------------------------------------------------------------- 1 | import "./index.scss" 2 | 3 | import { useBlockProps } from "@wordpress/block-editor" 4 | import { registerBlockType } from "@wordpress/blocks" 5 | import metadata from "./block.json" 6 | 7 | registerBlockType(metadata.name, { edit: EditComponent }) 8 | 9 | function EditComponent(props) { 10 | function updateSkyColor(e) { 11 | props.setAttributes({ skyColor: e.target.value }) 12 | } 13 | 14 | function updateGrassColor(e) { 15 | props.setAttributes({ grassColor: e.target.value }) 16 | } 17 | 18 | return ( 19 |
20 |
21 | 27 | 33 |
34 |
35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/src/index.scss: -------------------------------------------------------------------------------- 1 | .makeUpYourBlockTypeName { 2 | background-color: #b8c9f8; 3 | border: 1px solid #94a9e2; 4 | border-radius: 5px; 5 | padding: 20px; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /brads-boilerplate-block-plugin/src/render.php: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom'), 'version' => '47f3c18493653e124caa'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/footer.php: -------------------------------------------------------------------------------- 1 |
2 |
Your footer content here.
3 |
4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/functions.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | 5 | 6 | 7 | 8 | > 9 |
10 |
11 |

Welcome To Our Header!

12 |
13 |
-------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/index.php: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 | 8 |
9 | 10 | 11 |
12 | 15 |
16 |

17 | 18 |
19 | 21 |
22 |
23 | 24 | 4 | 5 |
6 | 9 |
10 |

11 | 12 |
13 | 15 |
16 | 17 | ) 10 | } 11 | -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/src/scripts/ExampleReactComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | 3 | function ExampleReactComponent() { 4 | const [clickCount, setClickCount] = useState(0) 5 | 6 | return ( 7 |
setClickCount(prev => prev + 1)} 10 | > 11 |

Hello from React!

12 |

13 | You have clicked on this component{" "} 14 | {clickCount} times. 15 |

16 |
17 | ) 18 | } 19 | 20 | export default ExampleReactComponent 21 | -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/src/scripts/Person.js: -------------------------------------------------------------------------------- 1 | class Person { 2 | constructor(name) { 3 | this.name = name 4 | this.greet() 5 | } 6 | 7 | greet() { 8 | console.log(`Hello, my name is ${this.name}.`) 9 | } 10 | } 11 | 12 | export default Person -------------------------------------------------------------------------------- /brads-boilerplate-theme-tailwind/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Brad’s Boilerplate Theme Tailwind 3 | Author: Brad 4 | Author URI: https://github.com/LearnWebCode 5 | */ 6 | 7 | /* This file only exists for the sake of WordPress recognizing our theme / theme name etc... */ 8 | 9 | /* We do not include CSS here and also WordPress will not load this file on the front-end */ 10 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /brads-boilerplate-theme/build/index-rtl.css: -------------------------------------------------------------------------------- 1 | .example-react-component{background-color:#2d7cf1;border-radius:5px;color:#fff;margin:15px 0;padding:20px}.example-react-component h1{font-size:1.2rem;font-weight:400;margin:0;padding:0}.example-react-component p{font-size:.88rem;margin:0}body,html{background-color:#fff}body{color:#333;font-family:sans-serif;font-size:.9rem}@media screen and (min-width:520px){body{font-size:1.1rem;padding:20px}}@media screen and (min-width:768px){body{font-size:1.2rem;padding:60px}}a:link,a:visited{color:#2d7cf1}a:hover{color:#f07} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom'), 'version' => 'd163fd5f9752314def24'); 2 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/build/index.css: -------------------------------------------------------------------------------- 1 | .example-react-component{background-color:#2d7cf1;border-radius:5px;color:#fff;margin:15px 0;padding:20px}.example-react-component h1{font-size:1.2rem;font-weight:400;margin:0;padding:0}.example-react-component p{font-size:.88rem;margin:0}body,html{background-color:#fff}body{color:#333;font-family:sans-serif;font-size:.9rem}@media screen and (min-width:520px){body{font-size:1.1rem;padding:20px}}@media screen and (min-width:768px){body{font-size:1.2rem;padding:60px}}a:link,a:visited{color:#2d7cf1}a:hover{color:#f07} 2 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/build/index.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={338:(e,t,r)=>{var o=r(795);t.createRoot=o.createRoot,t.hydrateRoot=o.hydrateRoot},795:e=>{e.exports=window.ReactDOM}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var a=t[o]={exports:{}};return e[o](a,a.exports,r),a.exports}(()=>{const e=window.React;var t=r(338);new class{constructor(e){this.name=e,this.greet()}greet(){console.log(`Hello, my name is ${this.name}.`)}}("Brad"),t.createRoot(document.querySelector("#render-react-example-here")).render((0,e.createElement)((function(){const[t,r]=(0,e.useState)(0);return(0,e.createElement)("div",{className:"example-react-component",onClick:()=>r((e=>e+1))},(0,e.createElement)("h1",null,"Hello from React!"),(0,e.createElement)("p",null,"You have clicked on this component ",t," times."))}),null))})()})(); -------------------------------------------------------------------------------- /brads-boilerplate-theme/footer.php: -------------------------------------------------------------------------------- 1 | Your footer content here. 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/functions.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | 5 | 6 | 7 | 8 | > 9 | Your header content here. -------------------------------------------------------------------------------- /brads-boilerplate-theme/index.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
7 | 8 | 9 | 12 |
13 |

14 | 15 |
16 | ) 10 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/scripts/ExampleReactComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | 3 | function ExampleReactComponent() { 4 | const [clickCount, setClickCount] = useState(0) 5 | 6 | return ( 7 |
setClickCount(prev => prev + 1)}> 8 |

Hello from React!

9 |

You have clicked on this component {clickCount} times.

10 |
11 | ) 12 | } 13 | 14 | export default ExampleReactComponent 15 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/scripts/Person.js: -------------------------------------------------------------------------------- 1 | class Person { 2 | constructor(name) { 3 | this.name = name 4 | this.greet() 5 | } 6 | 7 | greet() { 8 | console.log(`Hello, my name is ${this.name}.`) 9 | } 10 | } 11 | 12 | export default Person -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/styles/example-react-component.scss: -------------------------------------------------------------------------------- 1 | .example-react-component { 2 | margin: 15px 0; 3 | background-color: $primaryColor; 4 | color: #fff; 5 | padding: 20px; 6 | border-radius: 5px; 7 | 8 | h1 { 9 | font-weight: normal; 10 | font-size: 1.2rem; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | p { 16 | margin: 0; 17 | font-size: 0.88rem; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import 'variables.scss'; 2 | @import 'mixins.scss'; 3 | @import 'example-react-component.scss'; 4 | 5 | html, body { 6 | background-color: #FFF; 7 | } 8 | 9 | body { 10 | color: #333; 11 | font-family: sans-serif; 12 | font-size: .9rem; 13 | @include atSmall { 14 | padding: 20px; 15 | font-size: 1.1rem; 16 | } 17 | @include atMedium { 18 | padding: 60px; 19 | font-size: 1.2rem; 20 | } 21 | } 22 | 23 | a:link, a:visited { 24 | color: $primaryColor; 25 | } 26 | 27 | a:hover { 28 | color: $secondaryColor; 29 | } -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/styles/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin atSmall { 2 | @media screen and (min-width: 520px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin atMedium { 8 | @media screen and (min-width: 768px) { 9 | @content; 10 | } 11 | } -------------------------------------------------------------------------------- /brads-boilerplate-theme/src/styles/variables.scss: -------------------------------------------------------------------------------- 1 | $primaryColor: #2d7cf1; 2 | $secondaryColor: #ff0077; 3 | -------------------------------------------------------------------------------- /brads-boilerplate-theme/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Brad’s Boilerplate Theme 3 | Author: Brad 4 | Author URI: https://github.com/LearnWebCode 5 | */ 6 | 7 | /* This file only exists for the sake of WordPress recognizing our theme / theme name etc... */ 8 | 9 | /* We do not include CSS here and also WordPress will not load this file on the front-end */ 10 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/archive/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/archive", 5 | "title": "Fictional University Archive", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/archive/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '4bd0973968f95680f9cb'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/archive/render.php: -------------------------------------------------------------------------------- 1 | get_the_archive_title(), 5 | 'subtitle' => get_the_archive_description() 6 | )); 7 | ?> 8 | 9 |
10 | 13 |
14 |

15 | 16 |
17 |

Posted by on in

18 |
19 | 20 |
21 | 22 |

Continue reading »

23 |
24 | 25 |
26 | 29 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/banner/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/banner", 5 | "title": "Fictional University Banner", 6 | "supports": { 7 | "align": [ 8 | "full" 9 | ] 10 | }, 11 | "attributes": { 12 | "align": { 13 | "type": "string", 14 | "default": "full" 15 | }, 16 | "imgID": { 17 | "type": "number" 18 | }, 19 | "imgURL": { 20 | "type": "string" 21 | } 22 | }, 23 | "editorScript": "file:./index.js", 24 | "render": "file:./render.php" 25 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/banner/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element'), 'version' => '65816eee4756a37db900'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/banner/render.php: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 |
11 |
12 | 13 |
14 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/blogindex/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/blogindex", 5 | "title": "Fictional University Blog Index", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/blogindex/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '9f6525961f6b1fb8cb26'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/blogindex/render.php: -------------------------------------------------------------------------------- 1 | 'Welcome to our blog!', 5 | 'subtitle' => 'Keep up with our latest news.' 6 | )); 7 | ?> 8 |
9 | 12 |
13 |

14 | 15 |
16 |

Posted by on in

17 |
18 | 19 |
20 | 21 |

Continue reading »

22 |
23 | 24 |
25 | 28 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/container/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/container", 5 | "title": "Brad's Container", 6 | "supports": { 7 | "align": [ 8 | "full" 9 | ] 10 | }, 11 | "attributes": { 12 | "align": { 13 | "type": "string", 14 | "default": "full" 15 | } 16 | }, 17 | "editorScript": "file:./index.js", 18 | "render": "file:./render.php" 19 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/container/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => 'bfcece98f57438e9a753'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/container/render.php: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/eventsandblogs/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/eventsandblogs", 5 | "title": "Fictional University Events and Blogs", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/eventsandblogs/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => 'cf51e4dc1920dad17550'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/footer/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/footer", 5 | "title": "Fictional University Footer", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/footer/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '802398d31134cde71208'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/footer/render.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/genericbutton/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/genericbutton", 5 | "title": "Fictional University Generic Button", 6 | "attributes": { 7 | "text": { 8 | "type": "string" 9 | }, 10 | "size": { 11 | "type": "string", 12 | "default": "large" 13 | }, 14 | "linkObject": { 15 | "type": "object", 16 | "default": { 17 | "url": "" 18 | } 19 | }, 20 | "colorName": { 21 | "type": "string", 22 | "default": "blue" 23 | } 24 | }, 25 | "editorScript": "file:./index.js" 26 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/genericbutton/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-primitives'), 'version' => 'e25086c30c87d8530d5e'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/genericheading/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/genericheading", 5 | "title": "Fictional University Generic Heading", 6 | "attributes": { 7 | "text": { 8 | "type": "string" 9 | }, 10 | "size": { 11 | "type": "string", 12 | "default": "large" 13 | } 14 | }, 15 | "editorScript": "file:./index.js" 16 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/genericheading/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-components'), 'version' => 'a1da6d7158edbb6326cb'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/header/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/header", 5 | "title": "Fictional University Header", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/header/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '3f6808e7b06abf7624f0'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/header/render.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Fictional University

4 | 5 | 6 |
7 | 15 |
16 | 17 | 18 | 19 | Log Out 20 | 21 | 22 | Login 23 | 24 | 25 | 26 |
27 |
28 |
29 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '57d25f3d03429b6ae24c'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "create-block/interactivity-quiz", 5 | "version": "0.1.0", 6 | "title": "Interactivity Quiz", 7 | "category": "widgets", 8 | "attributes": { 9 | "question": { 10 | "type": "string" 11 | }, 12 | "answers": { 13 | "type": "array", 14 | "default": [ 15 | "" 16 | ] 17 | }, 18 | "correctAnswer": { 19 | "type": "number", 20 | "default": "" 21 | }, 22 | "bgColor": { 23 | "type": "string", 24 | "default": "#EBEBEB" 25 | }, 26 | "theAlignment": { 27 | "type": "string", 28 | "default": "left" 29 | } 30 | }, 31 | "icon": "media-interactive", 32 | "description": "An interactive block with the Interactivity API", 33 | "example": {}, 34 | "supports": { 35 | "interactivity": true 36 | }, 37 | "textdomain": "interactivity-quiz", 38 | "editorScript": "file:./index.js", 39 | "editorStyle": [ 40 | "file:./index.css", 41 | "dashicons" 42 | ], 43 | "style": "file:./style-index.css", 44 | "render": "file:./render.php", 45 | "viewScriptModule": "file:./view.js" 46 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/index-rtl.css: -------------------------------------------------------------------------------- 1 | /*!***********************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/interactivity-quiz/editor.scss ***! 3 | \***********************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .paying-attention-edit-block { 10 | padding: 20px; 11 | margin-bottom: 20px; 12 | border-radius: 2px; 13 | border: 1px solid #d6d6d6; 14 | background-color: #f1f1f1; 15 | } 16 | .paying-attention-edit-block .mark-as-correct { 17 | color: #ffd700; 18 | position: relative; 19 | top: -3px; 20 | transition: transform 0.3s ease-out; 21 | } 22 | .paying-attention-edit-block .mark-as-correct:hover { 23 | transform: scale(1.25) rotate(-12deg); 24 | } 25 | .paying-attention-edit-block .attention-delete { 26 | color: #ff0000; 27 | position: relative; 28 | top: -5px; 29 | } 30 | .paying-attention-edit-block .attention-delete:hover { 31 | color: #c20000 !important; 32 | } 33 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '7d0edb682370ee53fea8'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/index.css: -------------------------------------------------------------------------------- 1 | /*!***********************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/interactivity-quiz/editor.scss ***! 3 | \***********************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .paying-attention-edit-block { 10 | padding: 20px; 11 | margin-bottom: 20px; 12 | border-radius: 2px; 13 | border: 1px solid #d6d6d6; 14 | background-color: #f1f1f1; 15 | } 16 | .paying-attention-edit-block .mark-as-correct { 17 | color: #ffd700; 18 | position: relative; 19 | top: -3px; 20 | transition: transform 0.3s ease-out; 21 | } 22 | .paying-attention-edit-block .mark-as-correct:hover { 23 | transform: scale(1.25) rotate(12deg); 24 | } 25 | .paying-attention-edit-block .attention-delete { 26 | color: #ff0000; 27 | position: relative; 28 | top: -5px; 29 | } 30 | .paying-attention-edit-block .attention-delete:hover { 31 | color: #c20000 !important; 32 | } 33 | 34 | /*# sourceMappingURL=index.css.map*/ -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"interactivity-quiz/index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACE;EACA;EACA;EACA;EACA;AAAF;AAEE;EACE;EACA;EACA;EACA;AAAJ;AAEI;EACE;AAAN;AAIE;EACE;EACA;EACA;AAFJ;AAII;EACE;AAFN,C","sources":["webpack://fictional-university-theme/./src/interactivity-quiz/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.paying-attention-edit-block {\n padding: 20px;\n margin-bottom: 20px;\n border-radius: 2px;\n border: 1px solid #d6d6d6;\n background-color: #f1f1f1;\n\n .mark-as-correct {\n color: #ffd700;\n position: relative;\n top: -3px;\n transition: transform 0.3s ease-out;\n\n &:hover {\n transform: scale(1.25) rotate(12deg);\n }\n }\n\n .attention-delete {\n color: #ff0000;\n position: relative;\n top: -5px;\n\n &:hover {\n color: #c20000 !important;\n }\n }\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/interactivity-quiz/view.asset.php: -------------------------------------------------------------------------------- 1 | array('@wordpress/interactivity'), 'version' => 'c8ad151ae8247daa14c7', 'type' => 'module'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/page/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/page", 5 | "title": "Fictional University Page", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/page/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => 'bc58c01df9ffc62078af'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/page/render.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 11 |
12 |

Back to

13 |
14 | 16 | 17 | 18 | 19 | get_the_ID() 22 | )); 23 | 24 | if ($theParent or $testArray) { ?> 25 |
26 |

27 |
    28 | NULL, 37 | 'child_of' => $findChildrenOf, 38 | 'sort_column' => 'menu_order' 39 | )); 40 | ?> 41 |
42 |
43 | 44 | 45 | 46 |
47 | 48 |
49 | 50 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/search/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/search", 5 | "title": "Fictional University Search", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/search/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '472e7e5595e5025422c1'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/search/render.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 |
9 |
10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/searchresults/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/searchresults", 5 | "title": "Fictional University Search Results", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/searchresults/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '47c6c33a98a44d61ad7e'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/searchresults/render.php: -------------------------------------------------------------------------------- 1 | 'Search Results', 5 | 'subtitle' => 'You searched for “' . esc_html(get_search_query(false)) . '”' 6 | )); 7 | ?> 8 | 9 |
10 | No results match that search.'; 19 | } 20 | 21 | get_search_form(); 22 | 23 | ?> 24 | 25 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/singlepost/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/singlepost", 5 | "title": "Fictional University Single Post", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/singlepost/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => '4f74ab9b7c8d17b814ef'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/singlepost/render.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 |

Blog Home Posted by on in

9 |
10 | 11 |
12 | 13 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slide/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/slide", 5 | "title": "Fictional University Slide", 6 | "supports": { 7 | "align": [ 8 | "full" 9 | ] 10 | }, 11 | "attributes": { 12 | "themeimage": { 13 | "type": "string" 14 | }, 15 | "align": { 16 | "type": "string", 17 | "default": "full" 18 | }, 19 | "imgID": { 20 | "type": "number" 21 | }, 22 | "imgURL": { 23 | "type": "string" 24 | } 25 | }, 26 | "editorScript": "file:./index.js", 27 | "render": "file:./render.php" 28 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slide/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element'), 'version' => 'f809f50e2c8a4fad8f29'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slide/render.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slideshow/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/slideshow", 5 | "title": "Fictional University Slideshow", 6 | "supports": { 7 | "align": [ 8 | "full" 9 | ] 10 | }, 11 | "attributes": { 12 | "align": { 13 | "type": "string", 14 | "default": "full" 15 | } 16 | }, 17 | "editorScript": "file:./index.js", 18 | "render": "file:./render.php" 19 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slideshow/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks'), 'version' => 'a090af0bfad8e538e480'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/slideshow/render.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 |
8 |
9 |
10 |
11 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "create-block/solved-counter", 5 | "version": "0.1.0", 6 | "title": "Solved Counter", 7 | "category": "widgets", 8 | "icon": "media-interactive", 9 | "description": "An interactive block with the Interactivity API", 10 | "example": {}, 11 | "supports": { 12 | "interactivity": true 13 | }, 14 | "textdomain": "solved-counter", 15 | "editorScript": "file:./index.js", 16 | "editorStyle": "file:./index.css", 17 | "style": "file:./style-index.css", 18 | "render": "file:./render.php", 19 | "viewScriptModule": "file:./view.js" 20 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/index-rtl.css: -------------------------------------------------------------------------------- 1 | /*!*******************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/solved-counter/editor.scss ***! 3 | \*******************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .wp-block-create-block-solved-counter input[type=text] { 10 | font-size: 1em; 11 | color: inherit; 12 | background: inherit; 13 | border: 0; 14 | } 15 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '8e56575c1dd7f71d6035'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/index.css: -------------------------------------------------------------------------------- 1 | /*!*******************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/solved-counter/editor.scss ***! 3 | \*******************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .wp-block-create-block-solved-counter input[type=text] { 10 | font-size: 1em; 11 | color: inherit; 12 | background: inherit; 13 | border: 0; 14 | } 15 | 16 | /*# sourceMappingURL=index.css.map*/ -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"solved-counter/index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;EACA;EACA;EACA;AAAD,C","sources":["webpack://fictional-university-theme/./src/solved-counter/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-solved-counter input[type=\"text\"] {\n\tfont-size: 1em;\n\tcolor: inherit;\n\tbackground: inherit;\n\tborder: 0;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/render.php: -------------------------------------------------------------------------------- 1 | 0, 'grassColor' => 'green')); 14 | 15 | ?> 16 | 17 |
18 |

Questions solved:

19 |
20 | 21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/style-index-rtl.css: -------------------------------------------------------------------------------- 1 | /*!******************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/solved-counter/style.scss ***! 3 | \******************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied both on the front of your site 6 | * and in the editor. 7 | * 8 | * Replace them with your own styles or remove the file completely. 9 | */ 10 | .wp-block-create-block-solved-counter { 11 | font-size: 1em; 12 | background: rgba(255, 255, 0, 0.1019607843); 13 | padding: 1em; 14 | } 15 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/style-index.css: -------------------------------------------------------------------------------- 1 | /*!******************************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/solved-counter/style.scss ***! 3 | \******************************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied both on the front of your site 6 | * and in the editor. 7 | * 8 | * Replace them with your own styles or remove the file completely. 9 | */ 10 | .wp-block-create-block-solved-counter { 11 | font-size: 1em; 12 | background: rgba(255, 255, 0, 0.1019607843); 13 | padding: 1em; 14 | } 15 | 16 | /*# sourceMappingURL=style-index.css.map*/ -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/style-index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"solved-counter/style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://fictional-university-theme/./src/solved-counter/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-solved-counter {\n\tfont-size: 1em;\n\tbackground: #ffff001a;\n\tpadding: 1em;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/view.asset.php: -------------------------------------------------------------------------------- 1 | array('@wordpress/interactivity'), 'version' => '533f2a1ed4dda5c89594', 'type' => 'module'); 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/build/solved-counter/view.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"solved-counter/view.js","mappings":";;;;;;;;;AAAA;AACA,aAAa,6BAA6B;AAC1C;AACA;AACA;;;;;;SCJA;SACA;;SAEA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;;SAEA;SACA;;SAEA;SACA;SACA;;;;;UCtBA;UACA;UACA;UACA,uDAAuD,iBAAiB;UACxE;UACA,gDAAgD,aAAa;UAC7D;;;;;;;;;;;;ACNA;AACA;AACA;AAC4D;AAE5D,MAAM;EAAEE;AAAM,CAAC,GAAGF,+DAAK,CAAC,cAAc,EAAE;EACtCG,OAAO,EAAE;IACPC,MAAM,EAAEA,CAAA,KAAM;MACZ,MAAMC,OAAO,GAAGJ,oEAAU,CAAC,CAAC;MAC5BI,OAAO,CAACC,MAAM,GAAG,CAACD,OAAO,CAACC,MAAM;IAClC;EACF,CAAC;EACDC,SAAS,EAAE;IACTC,SAAS,EAAEA,CAAA,KAAM;MACf,MAAM;QAAEF;MAAO,CAAC,GAAGL,oEAAU,CAAC,CAAC;MAC/B;MACAQ,OAAO,CAACC,GAAG,CAAC,YAAYJ,MAAM,EAAE,CAAC;IACnC;EACF;AACF,CAAC,CAAC,C","sources":["webpack://fictional-university-theme/external module \"@wordpress/interactivity\"","webpack://fictional-university-theme/webpack/bootstrap","webpack://fictional-university-theme/webpack/runtime/make namespace object","webpack://fictional-university-theme/./src/solved-counter/view.js"],"sourcesContent":["var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nmodule.exports = __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\n * WordPress dependencies\n */\nimport { store, getContext } from \"@wordpress/interactivity\"\n\nconst { state } = store(\"create-block\", {\n actions: {\n toggle: () => {\n const context = getContext()\n context.isOpen = !context.isOpen\n }\n },\n callbacks: {\n logIsOpen: () => {\n const { isOpen } = getContext()\n // Log the value of `isOpen` each time it changes.\n console.log(`Is open: ${isOpen}`)\n }\n }\n})\n"],"names":["store","getContext","state","actions","toggle","context","isOpen","callbacks","logIsOpen","console","log"],"sourceRoot":""} -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/base/baseline.scss: -------------------------------------------------------------------------------- 1 | @mixin atSmall { 2 | @media (min-width: 530px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin atSmallMedium { 8 | @media (min-width: 767px) { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin atMedium { 14 | @media (min-width: 960px) { 15 | @content; 16 | } 17 | } 18 | 19 | body { 20 | color: #333; 21 | font-family: "Roboto", sans-serif; 22 | overflow-x: hidden; 23 | position: relative; 24 | } 25 | 26 | img { 27 | max-width: 100%; 28 | height: auto; 29 | } 30 | 31 | a { 32 | color: $mainBlue; 33 | } 34 | 35 | a:hover { 36 | text-decoration: none; 37 | } 38 | 39 | p, 40 | ul, 41 | ol { 42 | margin: 0 0 1.65em 0; 43 | } 44 | 45 | p, 46 | li { 47 | line-height: 1.65; 48 | } 49 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/base/utility-classes.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1300px; 3 | margin: 0 auto; 4 | padding: 0 16px; 5 | position: relative; 6 | } 7 | 8 | .container--narrow { 9 | max-width: 960px; 10 | } 11 | 12 | .section-break { 13 | border: none; 14 | border-top: 1px solid #ddd; 15 | margin: 2.5rem 0; 16 | } 17 | 18 | .min-list { 19 | padding: 0; 20 | margin: 0; 21 | } 22 | 23 | .min-list li { 24 | list-style: none; 25 | } 26 | 27 | .p-top-small { 28 | padding-top: 1rem; 29 | } 30 | .p-top-large { 31 | padding-top: 1.6rem; 32 | } 33 | .p-bottom-large { 34 | padding-bottom: 1.6rem; 35 | } 36 | 37 | @include atSmall { 38 | .p-top-large { 39 | padding-top: 3.5rem; 40 | } 41 | .p-bottom-large { 42 | padding-bottom: 3.5rem; 43 | } 44 | } 45 | 46 | .no-margin { 47 | margin: 0; 48 | } 49 | .nu { 50 | text-decoration: none; 51 | } 52 | .nu:hover { 53 | text-decoration: underline; 54 | } 55 | 56 | .t-left { 57 | text-align: left; 58 | } 59 | .t-right { 60 | text-align: right; 61 | } 62 | .t-center { 63 | text-align: center; 64 | } 65 | 66 | .t-small { 67 | font-size: 0.85rem; 68 | } 69 | 70 | .float-left { 71 | float: left; 72 | } 73 | .float-right { 74 | float: right; 75 | } 76 | .push-right { 77 | margin-right: 20px; 78 | } 79 | 80 | .container:before, 81 | .container:after, 82 | .group:before, 83 | .group:after { 84 | content: " "; 85 | display: table; 86 | } 87 | 88 | .container:after, 89 | .group:after { 90 | clear: both; 91 | } 92 | 93 | .hide { 94 | display: none; 95 | } 96 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/base/variables.scss: -------------------------------------------------------------------------------- 1 | $beige: #FAF0CA; 2 | $mainYellow: #F4D35E; 3 | $mainBlue: #0D3B66; 4 | $lightOrange: #EE964B; 5 | $darkOrange: #F95738; -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/btn.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | cursor: pointer; 4 | border-radius: 4px; 5 | overflow: hidden; 6 | text-decoration: none; 7 | color: #fff; 8 | font-size: 1.19rem; 9 | padding: 12px 24px; 10 | border: none; 11 | outline: none; 12 | 13 | &--small { 14 | font-size: 0.88rem; 15 | padding: 7px 13px; 16 | font-weight: 300; 17 | } 18 | 19 | &--with-photo { 20 | padding-left: 40px; 21 | position: relative; 22 | } 23 | 24 | &--orange { 25 | background-color: $lightOrange; 26 | } 27 | 28 | &--orange:hover { 29 | background: linear-gradient($lightOrange, scale-color($lightOrange, $lightness: -25%, $saturation: 100%)); 30 | } 31 | 32 | &--dark-orange { 33 | background-color: $darkOrange; 34 | } 35 | 36 | &--dark-orange:hover { 37 | background: linear-gradient($darkOrange, scale-color($darkOrange, $lightness: -35%, $saturation: 100%)); 38 | } 39 | 40 | &--blue { 41 | background-color: $mainBlue; 42 | } 43 | 44 | &--blue:hover { 45 | background: linear-gradient(scale-color($mainBlue, $lightness: 11%), $mainBlue); 46 | } 47 | 48 | &--yellow { 49 | background-color: $mainYellow; 50 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22); 51 | } 52 | 53 | &--yellow:hover { 54 | background: linear-gradient($mainYellow, scale-color($mainYellow, $lightness: -29%, $saturation: 100%)); 55 | } 56 | 57 | &--beige { 58 | background-color: $beige; 59 | color: #173f58; 60 | } 61 | 62 | &--beige:hover { 63 | background-color: $mainYellow; 64 | } 65 | 66 | &--gray { 67 | background-color: #222; 68 | } 69 | 70 | &--white { 71 | background-color: #fff; 72 | color: #173f58; 73 | } 74 | 75 | &--white:hover { 76 | background-color: #ddd; 77 | } 78 | 79 | &--large { 80 | font-size: 1.3rem; 81 | padding: 16px 34px; 82 | border-radius: 7px; 83 | @include atSmall { 84 | font-size: 1.9rem; 85 | } 86 | } 87 | 88 | &--inactive { 89 | background-color: transparent; 90 | cursor: default; 91 | color: #333; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/event-summary.scss: -------------------------------------------------------------------------------- 1 | .event-summary { 2 | position: relative; 3 | padding-left: 107px; 4 | min-height: 77px; 5 | padding-bottom: 1px; 6 | margin-bottom: 20px; 7 | 8 | &__title a { 9 | color: #173f58; 10 | } 11 | 12 | &__date { 13 | text-decoration: none; 14 | display: block; 15 | top: 0; 16 | left: 0; 17 | position: absolute; 18 | padding: 14px 0 11px 0; 19 | color: #FFF; 20 | border-radius: 50%; 21 | background-color: $mainBlue; 22 | width: 80px; 23 | line-height: 1; 24 | transition: opacity .33s; 25 | text-shadow: 1px 1px 1px rgba(0, 0, 0, .22); 26 | } 27 | 28 | &__date:hover { 29 | opacity: .75; 30 | } 31 | 32 | &__date--beige { 33 | background-color: $mainYellow; 34 | } 35 | 36 | &__month { 37 | display: block; 38 | font-size: 1.5rem; 39 | font-weight: 300; 40 | text-transform: uppercase; 41 | } 42 | 43 | &__day { 44 | display: block; 45 | font-size: 2.02rem; 46 | font-weight: 700; 47 | } 48 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/full-width-split.scss: -------------------------------------------------------------------------------- 1 | .full-width-split { 2 | @include atMedium { 3 | display: flex; 4 | } 5 | 6 | &__one { 7 | flex: 1; 8 | padding: 1.6rem 16px; 9 | @include atMedium { 10 | padding: 40px; 11 | } 12 | 13 | .full-width-split__inner { 14 | @include atMedium { 15 | float: right; 16 | } 17 | } 18 | } 19 | 20 | &__two { 21 | flex: 1; 22 | background-color: $beige; 23 | padding: 1.6rem 16px; 24 | @include atMedium { 25 | padding: 40px; 26 | } 27 | } 28 | 29 | &__inner { 30 | @media (min-width: 1350px) { 31 | width: 610px; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/generic-content.scss: -------------------------------------------------------------------------------- 1 | .generic-content { 2 | p, 3 | li { 4 | font-size: 1.15rem; 5 | } 6 | 7 | blockquote, 8 | blockquote p { 9 | font-size: 1.5rem; 10 | font-style: italic; 11 | } 12 | 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6 { 19 | font-family: "Roboto Condensed", sans-serif; 20 | font-weight: 300; 21 | margin-top: 0; 22 | margin-bottom: 1rem; 23 | } 24 | 25 | h1 { 26 | font-size: 3.6rem; 27 | } 28 | h2 { 29 | font-size: 3.1rem; 30 | } 31 | h3 { 32 | font-size: 2.6rem; 33 | } 34 | h4 { 35 | font-size: 2.1rem; 36 | } 37 | h5 { 38 | font-size: 1.6rem; 39 | } 40 | h6 { 41 | font-size: 1.15rem; 42 | } 43 | 44 | @include atSmall { 45 | h1 { 46 | font-size: 6.25rem; 47 | } 48 | h2 { 49 | font-size: 5rem; 50 | } 51 | h3 { 52 | font-size: 3.125rem; 53 | } 54 | h4 { 55 | font-size: 2.4rem; 56 | } 57 | h5 { 58 | font-size: 1.9rem; 59 | } 60 | h6 { 61 | font-size: 1.15rem; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/headline.scss: -------------------------------------------------------------------------------- 1 | .headline { 2 | margin: 0; 3 | font-family: "Roboto Condensed", sans-serif; 4 | font-weight: 300; 5 | 6 | &--large { 7 | font-size: 3.6rem; 8 | @include atSmall { 9 | font-size: 6.25rem; 10 | } 11 | } 12 | 13 | &--large-medium { 14 | font-size: 5rem; 15 | margin: 0 0 1rem 0; 16 | } 17 | 18 | &--medium { 19 | font-size: 1.9rem; 20 | margin-bottom: 0.75rem; 21 | @include atSmall { 22 | font-size: 3.125rem; 23 | } 24 | } 25 | 26 | &--small-plus { 27 | font-family: "Roboto", sans-serif; 28 | font-size: 1.6875rem; 29 | font-weight: 400; 30 | margin-bottom: 1.9rem; 31 | } 32 | 33 | &--small { 34 | font-size: 1.2rem; 35 | margin-bottom: 1.9rem; 36 | @include atSmall { 37 | font-size: 1.6875rem; 38 | } 39 | } 40 | 41 | &--smaller { 42 | font-size: 1.5rem; 43 | } 44 | 45 | &--tiny { 46 | font-family: "Roboto", sans-serif; 47 | font-size: 1.3875rem; 48 | margin-bottom: 0.25rem; 49 | } 50 | 51 | &--post-title a { 52 | color: $mainBlue; 53 | text-decoration: none; 54 | } 55 | 56 | &--post-title a:hover { 57 | text-decoration: underline; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/hero-slider.scss: -------------------------------------------------------------------------------- 1 | .hero-slider { 2 | position: relative; 3 | 4 | div { 5 | outline: none; 6 | } 7 | 8 | &__interior { 9 | padding-top: 60px; 10 | padding-bottom: 60px; 11 | 12 | @include atMedium { 13 | padding-top: 130px; 14 | padding-bottom: 130px; 15 | } 16 | } 17 | 18 | &__slide { 19 | background-size: cover; 20 | background-repeat: no-repeat; 21 | } 22 | 23 | &__overlay { 24 | margin: 0 auto; 25 | background-color: rgba(0, 0, 0, 0.68); 26 | padding: 40px; 27 | color: #fff; 28 | @include atMedium { 29 | width: 50%; 30 | } 31 | } 32 | } 33 | 34 | .slick-dots { 35 | z-index: 100; 36 | position: absolute; 37 | left: 0; 38 | right: 0; 39 | padding: 0; 40 | margin: 0; 41 | text-align: center; 42 | top: 15px; 43 | @include atMedium { 44 | top: 50px; 45 | } 46 | } 47 | 48 | .slick-dots { 49 | li { 50 | list-style: none; 51 | display: inline; 52 | } 53 | 54 | li button { 55 | display: inline-block; 56 | text-indent: -9999px; 57 | font-size: 0; 58 | line-height: 0; 59 | width: 10px; 60 | height: 10px; 61 | background-color: rgba(255, 255, 255, 0.5); 62 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); 63 | border-radius: 50%; 64 | border: none; 65 | margin: 0 4px; 66 | padding: 0; 67 | outline: none; 68 | transition: background-color 0.3s ease-out; 69 | cursor: pointer; 70 | } 71 | 72 | .slick-active button { 73 | background-color: #fff; 74 | } 75 | } 76 | 77 | /* GlideJS */ 78 | .glide__bullets { 79 | z-index: 100; 80 | position: absolute; 81 | left: 0; 82 | right: 0; 83 | padding: 0; 84 | margin: 0; 85 | text-align: center; 86 | top: 15px; 87 | @include atMedium { 88 | top: 50px; 89 | } 90 | 91 | button { 92 | display: inline-block; 93 | text-indent: -9999px; 94 | font-size: 0; 95 | line-height: 0; 96 | width: 10px; 97 | height: 10px; 98 | background-color: rgba(255, 255, 255, 0.5); 99 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); 100 | border-radius: 50%; 101 | border: none; 102 | margin: 0 3px; 103 | padding: 0; 104 | outline: none; 105 | transition: background-color 0.3s ease-out; 106 | cursor: pointer; 107 | } 108 | 109 | button.glide__bullet--active { 110 | background-color: #fff; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/link-list.scss: -------------------------------------------------------------------------------- 1 | .link-list { 2 | li { 3 | padding: 1rem 0; 4 | font-size: 1.5rem; 5 | border-bottom: 1px dotted #DEDEDE; 6 | 7 | .search-overlay & { 8 | font-size: 1.3rem; 9 | } 10 | } 11 | 12 | li:last-child { 13 | border-bottom: none; 14 | } 15 | 16 | a { 17 | color: $darkOrange; 18 | } 19 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/login.scss: -------------------------------------------------------------------------------- 1 | /* Customize Login Screen */ 2 | 3 | body.login .button-primary { 4 | background-color: $darkOrange; 5 | border-color: scale-color($darkOrange, $lightness: -10%); 6 | text-shadow: 0 -1px 1px scale-color($darkOrange, $lightness: -15%), 1px 0 1px scale-color($darkOrange, $lightness: -15%), 0 1px 1px scale-color($darkOrange, $lightness: -15%), -1px 0 1px scale-color($darkOrange, $lightness: -15%); 7 | box-shadow: 0 1px 0 scale-color($darkOrange, $lightness: -20%); 8 | } 9 | 10 | body.login .button-primary:active, 11 | body.login .button-primary:focus, 12 | body.login .button-primary:hover { 13 | background-color: scale-color($darkOrange, $lightness: -9%); 14 | border-color: $darkOrange; 15 | text-shadow: 0 -1px 1px scale-color($darkOrange, $lightness: -20%), 1px 0 1px scale-color($darkOrange, $lightness: -20%), 0 1px 1px scale-color($darkOrange, $lightness: -20%), -1px 0 1px scale-color($darkOrange, $lightness: -20%); 16 | box-shadow: 0 1px 0 scale-color($darkOrange, $lightness: -25%); 17 | } 18 | 19 | body.login { 20 | background-color: $beige; 21 | } 22 | 23 | .login h1 a { 24 | color: $mainBlue; 25 | font-size: 30px; 26 | font-weight: 300; 27 | background-image: none; 28 | width: auto; 29 | height: auto; 30 | text-indent: 0; 31 | } 32 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/main-navigation.scss: -------------------------------------------------------------------------------- 1 | .main-navigation { 2 | padding-top: 2px; 3 | 4 | ul { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | ul:before, 10 | ul:after { 11 | content: " "; 12 | display: table; 13 | } 14 | 15 | ul:after { 16 | clear: both; 17 | } 18 | 19 | @include atMedium { 20 | float: left; 21 | margin-right: 20px; 22 | } 23 | } 24 | 25 | .main-navigation li { 26 | list-style: none; 27 | 28 | @include atMedium { 29 | float: left; 30 | padding-left: 20px; 31 | } 32 | } 33 | 34 | .main-navigation a { 35 | display: block; 36 | padding: 10px 20px; 37 | color: #fff; 38 | text-decoration: none; 39 | font-weight: 300; 40 | @include atMedium { 41 | display: inline-block; 42 | padding: 0; 43 | } 44 | } 45 | 46 | .main-navigation .current-menu-item a, 47 | .main-navigation a:hover { 48 | color: $beige; 49 | } 50 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/metabox.scss: -------------------------------------------------------------------------------- 1 | .metabox { 2 | background-color: $beige; 3 | border-radius: 3px; 4 | padding: 10px 15px; 5 | display: inline-block; 6 | margin-bottom: 30px; 7 | box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.07); 8 | 9 | &--position-up { 10 | position: absolute; 11 | top: 0; 12 | transform: translateY(-50%); 13 | } 14 | 15 | &--with-home-link { 16 | padding: 0; 17 | } 18 | 19 | &__main { 20 | padding: 10px 15px 10px 11px; 21 | } 22 | 23 | p { 24 | margin: 0; 25 | font-size: 0.9rem; 26 | color: adjust-color($beige, $lightness: -45%, $saturation: -33%); 27 | } 28 | 29 | a { 30 | color: adjust-color($beige, $lightness: -45%, $saturation: -33%); 31 | text-decoration: none; 32 | font-weight: bold; 33 | } 34 | 35 | a:hover { 36 | text-decoration: underline; 37 | } 38 | 39 | & &__blog-home-link { 40 | background-color: $mainBlue; 41 | color: #fff; 42 | display: inline-block; 43 | padding: 10px 15px; 44 | border-radius: 3px 0 0 3px; 45 | font-weight: normal; 46 | } 47 | 48 | & &__blog-home-link:hover { 49 | text-decoration: none; 50 | background-color: adjust-color($mainBlue, $lightness: -5%); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/page-banner.scss: -------------------------------------------------------------------------------- 1 | .page-banner { 2 | background-color: #000; 3 | padding: 80px 0 40px 0; 4 | position: relative; 5 | @include atSmall { 6 | padding: 130px 0 60px 0; 7 | } 8 | 9 | &__content { 10 | position: relative; 11 | z-index: 2; 12 | } 13 | 14 | &__title { 15 | font-family: "Roboto Condensed", sans-serif; 16 | font-weight: 300; 17 | font-size: 3.6rem; 18 | margin: 0 0 1rem 0; 19 | color: #fff; 20 | @include atSmall { 21 | font-size: 5rem; 22 | } 23 | } 24 | 25 | &__bg-image { 26 | opacity: 0.33; 27 | background-size: cover; 28 | background-position: center center; 29 | position: absolute; 30 | top: 0; 31 | bottom: 0; 32 | left: 0; 33 | right: 0; 34 | } 35 | 36 | &__intro { 37 | font-weight: 300; 38 | font-size: 1.2rem; 39 | line-height: 1.3; 40 | color: #ededed; 41 | @include atSmall { 42 | font-size: 1.65rem; 43 | } 44 | } 45 | 46 | &__intro p { 47 | margin: 0; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/page-links.scss: -------------------------------------------------------------------------------- 1 | .page-links { 2 | position: relative; 3 | z-index: 1; 4 | background-color: $beige; 5 | margin: 0 0 40px 0; 6 | @include atSmallMedium { 7 | margin: 0 0 40px 20px; 8 | width: 300px; 9 | float: right; 10 | } 11 | 12 | &__title { 13 | margin: 0; 14 | font-weight: normal; 15 | text-align: center; 16 | padding: 20px 0; 17 | background-color: $mainBlue; 18 | color: #fff; 19 | 20 | a { 21 | color: #fff; 22 | text-decoration: none; 23 | background-color: $mainBlue; 24 | } 25 | } 26 | 27 | li { 28 | border-top: 1px solid adjust-color($beige, $lightness: -14%); 29 | } 30 | 31 | li:first-child { 32 | border-top: none; 33 | } 34 | 35 | &__active, 36 | & .current_page_item { 37 | text-align: center; 38 | background-color: scale-color($beige, $lightness: -7%, $saturation: -10%); 39 | color: $mainBlue; 40 | font-weight: bold; 41 | } 42 | 43 | li a { 44 | display: block; 45 | text-align: center; 46 | padding: 17px 10px; 47 | text-decoration: none; 48 | color: $mainBlue; 49 | transition: all 0.3s; 50 | } 51 | 52 | li a:hover { 53 | color: adjust-color($mainBlue, $lightness: -6%); 54 | background-color: scale-color($beige, $lightness: -9%, $saturation: -12%); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/post-item.scss: -------------------------------------------------------------------------------- 1 | .post-item { 2 | border-bottom: 1px dotted #DEDEDE; 3 | padding-bottom: 1.7rem; 4 | margin-bottom: 1.7rem; 5 | 6 | &:last-of-type { 7 | border-bottom: none; 8 | margin-bottom: 0; 9 | } 10 | } -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/professor-card.scss: -------------------------------------------------------------------------------- 1 | .professor-cards { 2 | margin: 0; 3 | padding: 0; 4 | 5 | .search-overlay & { 6 | padding-top: 21px; 7 | } 8 | } 9 | 10 | .professor-card { 11 | position: relative; 12 | display: inline-block; 13 | width: 200px; 14 | margin-right: 15px; 15 | background-color: $darkOrange; 16 | overflow: hidden; 17 | 18 | .search-overlay & { 19 | width: 180px; 20 | } 21 | 22 | &__image { 23 | display: block; 24 | transition: opacity 0.3s ease-out, transform 0.3s ease-out; 25 | } 26 | 27 | &:hover &__image { 28 | opacity: 0.8; 29 | transform: scale(1.1) rotate(4deg); 30 | } 31 | 32 | &__name { 33 | font-weight: 300; 34 | font-size: 0.9rem; 35 | position: absolute; 36 | bottom: 0; 37 | color: #fff; 38 | left: 0; 39 | right: 0; 40 | padding: 3px 10px; 41 | background-color: adjust-color($darkOrange, $alpha: -0.15, $lightness: -9%, $saturation: -6%); 42 | } 43 | 44 | &:hover &__name { 45 | background-color: adjust-color($darkOrange, $alpha: -0.15, $lightness: -15%, $saturation: -6%); 46 | } 47 | 48 | &__list-item { 49 | display: inline-block; 50 | list-style: none; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/search-overlay.scss: -------------------------------------------------------------------------------- 1 | .search-overlay { 2 | overflow-y: auto; 3 | overflow-x: hidden; 4 | z-index: 110; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | right: 0; 9 | bottom: 0; 10 | background-color: rgba(255, 255, 255, 0.96); 11 | visibility: hidden; 12 | opacity: 0; 13 | transform: scale(1.09); 14 | transition: opacity 0.3s, transform 0.3s, visibility 0.3s; 15 | box-sizing: border-box; 16 | 17 | p { 18 | padding-top: 15px; 19 | } 20 | 21 | .event-summary p { 22 | padding-top: 0; 23 | } 24 | 25 | .event-summary { 26 | margin-bottom: 0; 27 | margin-top: 20px; 28 | } 29 | 30 | body.admin-bar & { 31 | top: 32px; 32 | } 33 | 34 | &__top { 35 | background-color: rgba(0, 0, 0, 0.12); 36 | } 37 | 38 | &__icon { 39 | margin-right: 10px; 40 | font-size: 1.8rem; 41 | color: $darkOrange; 42 | @include atMedium { 43 | font-size: 2.5rem; 44 | } 45 | } 46 | 47 | &--active { 48 | visibility: visible; 49 | opacity: 1; 50 | transform: scale(1); 51 | } 52 | 53 | &__section-title { 54 | margin: 30px 0 1px 0; 55 | font-weight: 400; 56 | color: $mainBlue; 57 | font-size: 2rem; 58 | padding: 15px 0; 59 | border-bottom: 1px solid #ccc; 60 | } 61 | 62 | &__close { 63 | position: absolute; 64 | top: 13px; 65 | right: 16px; 66 | font-size: 2.1rem; 67 | cursor: pointer; 68 | transition: all 0.3s; 69 | background-color: #fff; 70 | color: $darkOrange; 71 | line-height: 0.7; 72 | @include atSmall { 73 | top: 18px; 74 | font-size: 2.1rem; 75 | } 76 | @include atMedium { 77 | top: 26px; 78 | font-size: 2.8rem; 79 | } 80 | } 81 | 82 | &__close:hover { 83 | opacity: 1; 84 | } 85 | 86 | .one-half { 87 | padding-bottom: 0; 88 | } 89 | } 90 | 91 | .search-term { 92 | width: 75%; 93 | box-sizing: border-box; 94 | border: none; 95 | padding: 15px 0; 96 | margin: 0; 97 | background-color: transparent; 98 | font-size: 1rem; 99 | font-weight: 300; 100 | outline: none; 101 | color: $darkOrange; 102 | @include atSmall { 103 | font-size: 1.5rem; 104 | } 105 | @include atMedium { 106 | width: 80%; 107 | font-size: 3rem; 108 | } 109 | } 110 | 111 | .body-no-scroll { 112 | overflow: hidden; 113 | } 114 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/site-footer.scss: -------------------------------------------------------------------------------- 1 | .site-footer { 2 | padding: 2rem 0 3.5rem 0; 3 | background-image: linear-gradient(#fff, #ececec); 4 | 5 | p { 6 | font-size: 0.9rem; 7 | } 8 | 9 | .headline { 10 | color: #666; 11 | margin-bottom: 0.33rem; 12 | } 13 | 14 | &__link { 15 | color: #999; 16 | text-decoration: none; 17 | } 18 | 19 | &__link:hover { 20 | color: $mainBlue; 21 | text-decoration: underline; 22 | } 23 | 24 | &__inner { 25 | border-top: 1px dotted #dedede; 26 | padding-top: 3.5rem; 27 | } 28 | 29 | &__col-one { 30 | text-align: center; 31 | @include atMedium { 32 | text-align: left; 33 | width: 33%; 34 | float: left; 35 | } 36 | } 37 | 38 | &__col-two-three-group { 39 | text-align: center; 40 | width: 85%; 41 | margin: 0 auto; 42 | @include atMedium { 43 | text-align: left; 44 | float: left; 45 | width: 42%; 46 | margin: 0; 47 | } 48 | } 49 | 50 | &__col-two { 51 | width: 50%; 52 | float: left; 53 | } 54 | &__col-three { 55 | width: 50%; 56 | float: left; 57 | } 58 | &__col-four { 59 | padding-top: 20px; 60 | width: 85%; 61 | margin: 0 auto; 62 | clear: both; 63 | text-align: center; 64 | @include atMedium { 65 | padding-top: 0; 66 | margin: 0; 67 | clear: none; 68 | text-align: left; 69 | width: 25%; 70 | float: right; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/modules/site-header.scss: -------------------------------------------------------------------------------- 1 | .site-header { 2 | z-index: 3; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | padding: 20px 0; 8 | 9 | &__avatar { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | } 14 | 15 | &__avatar img { 16 | display: block; 17 | width: 30px; 18 | height: 30px; 19 | } 20 | 21 | &__menu { 22 | visibility: hidden; 23 | position: absolute; 24 | background-color: adjust-color($mainBlue, $alpha: -0.11, $lightness: -1%); 25 | left: 0; 26 | right: 0; 27 | top: -20px; 28 | padding-top: 58px; 29 | opacity: 0; 30 | transform: translateY(-20%); 31 | transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out; 32 | padding-bottom: 20px; 33 | 34 | &--active { 35 | opacity: 1; 36 | transform: translateY(0); 37 | visibility: visible; 38 | } 39 | 40 | @include atMedium { 41 | visibility: visible; 42 | opacity: 1; 43 | transform: translateY(0) scale(1); 44 | position: static; 45 | background-color: transparent; 46 | float: right; 47 | padding-top: 0; 48 | padding-bottom: 0; 49 | top: 0; 50 | } 51 | } 52 | 53 | &__search-trigger { 54 | cursor: pointer; 55 | color: #fff; 56 | font-size: 1.2rem; 57 | position: absolute; 58 | top: 6px; 59 | right: 16px; 60 | 61 | @include atSmall { 62 | top: 4px; 63 | font-size: 1.4rem; 64 | } 65 | 66 | @include atMedium { 67 | display: none; 68 | } 69 | } 70 | 71 | &__menu-trigger { 72 | color: #fff; 73 | cursor: pointer; 74 | font-size: 1.2rem; 75 | position: absolute; 76 | z-index: 10; 77 | top: 7px; 78 | right: 46px; 79 | 80 | @include atSmall { 81 | top: 5px; 82 | font-size: 1.4rem; 83 | } 84 | 85 | @include atMedium { 86 | display: none; 87 | } 88 | } 89 | 90 | &__util { 91 | padding: 0 0 0 20px; 92 | 93 | @include atMedium { 94 | padding: 0; 95 | float: right; 96 | } 97 | } 98 | 99 | &__btn { 100 | margin-right: 20px; 101 | @include atMedium { 102 | float: left; 103 | } 104 | } 105 | 106 | .btn--with-photo { 107 | margin-right: 0; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/css/style.scss: -------------------------------------------------------------------------------- 1 | /* 3rd party packages */ 2 | @import "normalize.css"; 3 | @import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css"; 4 | 5 | /* SASS and Global'ish Stuff */ 6 | @import "base/variables"; 7 | @import "base/baseline"; 8 | @import "base/utility-classes"; 9 | 10 | /* BEM Blocks */ 11 | @import "modules/shame"; 12 | @import "modules/login"; 13 | @import "modules/btn"; 14 | @import "modules/my-notes"; 15 | @import "modules/site-header"; 16 | @import "modules/site-footer"; 17 | @import "modules/main-navigation"; 18 | @import "modules/page-banner"; 19 | @import "modules/hero-slider"; 20 | @import "modules/search-overlay"; 21 | @import "modules/professor-card"; 22 | @import "modules/headline"; 23 | @import "modules/generic-content"; 24 | @import "modules/full-width-split"; 25 | @import "modules/event-summary"; 26 | @import "modules/page-links"; 27 | @import "modules/link-list"; 28 | @import "modules/metabox"; 29 | @import "modules/post-item"; 30 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/apples.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/apples.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/barksalot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/barksalot.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/bread.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/bread.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/bus.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/library-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/library-hero.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/meowsalot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/meowsalot.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/images/ocean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/images/ocean.jpg -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/inc/ourColors.js: -------------------------------------------------------------------------------- 1 | const ourColors = [ 2 | { name: "blue", color: "#0d3b66" }, 3 | { name: "orange", color: "#ee964b" }, 4 | { name: "dark-orange", color: "#f95738" } 5 | ] 6 | 7 | export default ourColors 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/index.php: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/index.php -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fictional-university-theme", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "wp-scripts start src/index.js", 8 | "blocks": "wp-scripts start --experimental-modules", 9 | "build": "run-s buildIndex buildBlocks", 10 | "buildIndex": "wp-scripts build src/index.js", 11 | "buildBlocks": "wp-scripts build --experimental-modules", 12 | "preview": "npm-run-all --parallel sync start", 13 | "sync": "browser-sync start -p 'june2024hybrid.local' --files '**/*.php' 'build/*.js' 'build/*.css'", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "keywords": [], 17 | "author": "", 18 | "license": "ISC", 19 | "dependencies": { 20 | "@glidejs/glide": "^3.6.0", 21 | "@wordpress/icons": "^9.41.0", 22 | "@wordpress/interactivity": "^6.0.0", 23 | "@wordpress/scripts": "^27.7.0", 24 | "axios": "^1.6.7", 25 | "browser-sync": "^3.0.2", 26 | "normalize.css": "^8.0.1", 27 | "npm-run-all": "^4.1.5", 28 | "react-color": "^2.19.3" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/brads-fse-hybrid-theme/screenshot.png -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/searchform.php: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |
7 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/archive/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/archive", 5 | "title": "Fictional University Archive", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/archive/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Archive Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/archive/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/archive/render.php: -------------------------------------------------------------------------------- 1 | get_the_archive_title(), 5 | 'subtitle' => get_the_archive_description() 6 | )); 7 | ?> 8 | 9 |
10 | 13 |
14 |

15 | 16 |
17 |

Posted by on in

18 |
19 | 20 |
21 | 22 |

Continue reading »

23 |
24 | 25 |
26 | 29 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/banner/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/banner", 5 | "title": "Fictional University Banner", 6 | "supports": { 7 | "align": ["full"] 8 | }, 9 | "attributes": { 10 | "align": { "type": "string", "default": "full" }, 11 | "imgID": { "type": "number" }, 12 | "imgURL": { "type": "string" } 13 | }, 14 | "editorScript": "file:./index.js", 15 | "render": "file:./render.php" 16 | } 17 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/banner/edit.js: -------------------------------------------------------------------------------- 1 | import apiFetch from "@wordpress/api-fetch" 2 | import { Button, PanelBody, PanelRow } from "@wordpress/components" 3 | import { 4 | useBlockProps, 5 | InnerBlocks, 6 | InspectorControls, 7 | MediaUpload, 8 | MediaUploadCheck 9 | } from "@wordpress/block-editor" 10 | import { registerBlockType } from "@wordpress/blocks" 11 | import { useEffect } from "@wordpress/element" 12 | 13 | export default function Edit(props) { 14 | const blockProps = useBlockProps() 15 | 16 | useEffect(function () { 17 | if (!props.attributes.imgURL) { 18 | props.setAttributes({ imgURL: ourThemeData.themePath + "/images/library-hero.jpg" }) 19 | } 20 | }, []) 21 | 22 | useEffect( 23 | function () { 24 | if (props.attributes.imgID) { 25 | async function go() { 26 | const response = await apiFetch({ 27 | path: `/wp/v2/media/${props.attributes.imgID}`, 28 | method: "GET" 29 | }) 30 | props.setAttributes({ imgURL: response.media_details.sizes.pageBanner.source_url }) 31 | } 32 | go() 33 | } 34 | }, 35 | [props.attributes.imgID] 36 | ) 37 | 38 | function onFileSelect(x) { 39 | props.setAttributes({ imgID: x.id }) 40 | } 41 | 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | { 52 | return 53 | }} 54 | /> 55 | 56 | 57 | 58 | 59 |
60 |
64 |
65 | 68 |
69 |
70 |
71 | ) 72 | } 73 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/banner/index.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks } from "@wordpress/block-editor" 2 | import { registerBlockType } from "@wordpress/blocks" 3 | import metadata from "./block.json" 4 | import Edit from "./edit" 5 | 6 | registerBlockType(metadata.name, { 7 | edit: Edit, 8 | save: function () { 9 | return 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/banner/render.php: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 |
11 |
12 | 13 |
14 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/blogindex/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/blogindex", 5 | "title": "Fictional University Blog Index", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/blogindex/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Blog Index Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/blogindex/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/blogindex/render.php: -------------------------------------------------------------------------------- 1 | 'Welcome to our blog!', 5 | 'subtitle' => 'Keep up with our latest news.' 6 | )); 7 | ?> 8 |
9 | 12 |
13 |

14 | 15 |
16 |

Posted by on in

17 |
18 | 19 |
20 | 21 |

Continue reading »

22 |
23 | 24 |
25 | 28 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/container/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/container", 5 | "title": "Brad's Container", 6 | "supports": { 7 | "align": ["full"] 8 | }, 9 | "attributes": { 10 | "align": { "type": "string", "default": "full" } 11 | }, 12 | "editorScript": "file:./index.js", 13 | "render": "file:./render.php" 14 | } 15 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/container/edit.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks, useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit(props) { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
9 | 10 |
11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/container/index.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks } from "@wordpress/block-editor" 2 | import { registerBlockType } from "@wordpress/blocks" 3 | import metadata from "./block.json" 4 | import Edit from "./edit" 5 | 6 | registerBlockType(metadata.name, { 7 | edit: Edit, 8 | save: function () { 9 | return 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/container/render.php: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/eventsandblogs/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/eventsandblogs", 5 | "title": "Fictional University Events and Blogs", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/eventsandblogs/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Events and Blogs Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/eventsandblogs/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/footer/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/footer", 5 | "title": "Fictional University Footer", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/footer/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Footer Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/footer/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/footer/render.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/genericbutton/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/genericbutton", 5 | "title": "Fictional University Generic Button", 6 | "attributes": { 7 | "text": { "type": "string" }, 8 | "size": { "type": "string", "default": "large" }, 9 | "linkObject": { "type": "object", "default": { "url": "" } }, 10 | "colorName": { "type": "string", "default": "blue" } 11 | }, 12 | "editorScript": "file:./index.js" 13 | } 14 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/genericbutton/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | function Save(props) { 6 | return ( 7 | 11 | {props.attributes.text} 12 | 13 | ) 14 | } 15 | 16 | registerBlockType(metadata.name, { 17 | edit: Edit, 18 | save: Save 19 | }) 20 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/genericheading/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/genericheading", 5 | "title": "Fictional University Generic Heading", 6 | "attributes": { 7 | "text": { "type": "string" }, 8 | "size": { "type": "string", "default": "large" } 9 | }, 10 | "editorScript": "file:./index.js" 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/genericheading/edit.js: -------------------------------------------------------------------------------- 1 | import { ToolbarGroup, ToolbarButton } from "@wordpress/components" 2 | import { RichText, BlockControls, useBlockProps } from "@wordpress/block-editor" 3 | import { registerBlockType } from "@wordpress/blocks" 4 | 5 | export default function Edit(props) { 6 | const blockProps = useBlockProps() 7 | 8 | function handleTextChange(x) { 9 | props.setAttributes({ text: x }) 10 | } 11 | 12 | return ( 13 |
14 | 15 | 16 | props.setAttributes({ size: "large" })} 19 | > 20 | Large 21 | 22 | props.setAttributes({ size: "medium" })} 25 | > 26 | Medium 27 | 28 | props.setAttributes({ size: "small" })} 31 | > 32 | Small 33 | 34 | 35 | 36 | 43 |
44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/genericheading/index.js: -------------------------------------------------------------------------------- 1 | import { RichText } from "@wordpress/block-editor" 2 | import { registerBlockType } from "@wordpress/blocks" 3 | import metadata from "./block.json" 4 | import Edit from "./edit" 5 | 6 | function Save(props) { 7 | function createTagName() { 8 | switch (props.attributes.size) { 9 | case "large": 10 | return "h1" 11 | case "medium": 12 | return "h2" 13 | case "small": 14 | return "h3" 15 | } 16 | } 17 | 18 | return ( 19 | 24 | ) 25 | } 26 | 27 | registerBlockType(metadata.name, { 28 | edit: Edit, 29 | save: Save 30 | }) 31 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/header/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/header", 5 | "title": "Fictional University Header", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/header/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Header Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/header/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/header/render.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Fictional University

4 | 5 | 6 |
7 | 15 |
16 | 17 | 18 | 19 | Log Out 20 | 21 | 22 | Login 23 | 24 | 25 | 26 |
27 |
28 |
29 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/index.js: -------------------------------------------------------------------------------- 1 | import "../css/style.scss" 2 | 3 | // Our modules / classes 4 | import MobileMenu from "./modules/MobileMenu" 5 | import HeroSlider from "./modules/HeroSlider" 6 | import Search from "./modules/Search" 7 | 8 | // Instantiate a new object using our modules/classes 9 | const mobileMenu = new MobileMenu() 10 | const heroSlider = new HeroSlider() 11 | const search = new Search() 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/interactivity-quiz/README.md: -------------------------------------------------------------------------------- 1 | # Interactive Block 2 | 3 | > **Warning** 4 | > **This block requires Gutenberg 16.2 or superior to work**. The Interactivity API is, at the moment, not part of WordPress Core as it is still very experimental, and very likely to change. 5 | 6 | > **Note** 7 | > This block uses the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). 8 | 9 | This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API. 10 | 11 | Check the following resources for more info about the Interactivity API: 12 | - [`@wordpress/interactivity` package](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/README.md) 13 | - [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) 14 | - [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/interactivity-quiz/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "create-block/interactivity-quiz", 5 | "version": "0.1.0", 6 | "title": "Interactivity Quiz", 7 | "category": "widgets", 8 | "attributes": { 9 | "question": { "type": "string" }, 10 | "answers": { "type": "array", "default": [""] }, 11 | "correctAnswer": { "type": "number", "default": "" }, 12 | "bgColor": { "type": "string", "default": "#EBEBEB" }, 13 | "theAlignment": { "type": "string", "default": "left" } 14 | }, 15 | "icon": "media-interactive", 16 | "description": "An interactive block with the Interactivity API", 17 | "example": {}, 18 | "supports": { 19 | "interactivity": true 20 | }, 21 | "textdomain": "interactivity-quiz", 22 | "editorScript": "file:./index.js", 23 | "editorStyle": ["file:./index.css", "dashicons"], 24 | "style": "file:./style-index.css", 25 | "render": "file:./render.php", 26 | "viewScriptModule": "file:./view.js" 27 | } 28 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/interactivity-quiz/editor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The following styles get applied inside the editor only. 3 | * 4 | * Replace them with your own styles or remove the file completely. 5 | */ 6 | 7 | .paying-attention-edit-block { 8 | padding: 20px; 9 | margin-bottom: 20px; 10 | border-radius: 2px; 11 | border: 1px solid #d6d6d6; 12 | background-color: #f1f1f1; 13 | 14 | .mark-as-correct { 15 | color: #ffd700; 16 | position: relative; 17 | top: -3px; 18 | transition: transform 0.3s ease-out; 19 | 20 | &:hover { 21 | transform: scale(1.25) rotate(12deg); 22 | } 23 | } 24 | 25 | .attention-delete { 26 | color: #ff0000; 27 | position: relative; 28 | top: -5px; 29 | 30 | &:hover { 31 | color: #c20000 !important; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/interactivity-quiz/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block 5 | */ 6 | import { registerBlockType } from '@wordpress/blocks'; 7 | 8 | /** 9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 10 | * All files containing `style` keyword are bundled together. The code used 11 | * gets applied both to the front of your site and to the editor. All other files 12 | * get applied to the editor only. 13 | * 14 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 15 | */ 16 | import './style.scss'; 17 | import './editor.scss'; 18 | 19 | /** 20 | * Internal dependencies 21 | */ 22 | import Edit from './edit'; 23 | import metadata from './block.json'; 24 | 25 | /** 26 | * Every block starts by registering a new block type definition. 27 | * 28 | * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block 29 | */ 30 | registerBlockType( metadata.name, { 31 | /** 32 | * @see ./edit.js 33 | */ 34 | edit: Edit, 35 | } ); 36 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/interactivity-quiz/view.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | import { store, getContext } from "@wordpress/interactivity" 5 | 6 | const { state } = store("create-block", { 7 | actions: { 8 | guessAttempt: () => { 9 | const context = getContext() 10 | if (!context.solved) { 11 | if (context.index === context.correctAnswer) { 12 | state.solvedCount++ 13 | console.log(state) 14 | context.showCongrats = true 15 | setTimeout(() => { 16 | context.solved = true 17 | }, 1000) 18 | } else { 19 | context.showSorry = true 20 | setTimeout(() => { 21 | context.showSorry = false 22 | }, 2600) 23 | } 24 | } 25 | }, 26 | toggle: () => { 27 | const context = getContext() 28 | context.isOpen = !context.isOpen 29 | } 30 | }, 31 | callbacks: { 32 | noclickclass: () => { 33 | const context = getContext() 34 | return context.solved && context.correct 35 | }, 36 | fadedclass: () => { 37 | const context = getContext() 38 | return context.solved && !context.correct 39 | }, 40 | logIsOpen: () => { 41 | const { isOpen } = getContext() 42 | // Log the value of `isOpen` each time it changes. 43 | console.log(`Is open: ${isOpen}`) 44 | } 45 | } 46 | }) 47 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/modules/HeroSlider.js: -------------------------------------------------------------------------------- 1 | import Glide from "@glidejs/glide" 2 | 3 | class HeroSlider { 4 | constructor() { 5 | const allSlideshows = document.querySelectorAll(".hero-slider") 6 | allSlideshows.forEach(function (currentSlideshow) { 7 | // count how many slides there are 8 | const dotCount = currentSlideshow.querySelectorAll(".hero-slider__slide").length 9 | 10 | // Generate the HTML for the navigation dots 11 | let dotHTML = "" 12 | for (let i = 0; i < dotCount; i++) { 13 | dotHTML += `` 14 | } 15 | 16 | // Add the dots HTML to the DOM 17 | currentSlideshow.querySelector(".glide__bullets").insertAdjacentHTML("beforeend", dotHTML) 18 | 19 | // Actually initialize the glide / slider script 20 | var glide = new Glide(currentSlideshow, { 21 | type: "carousel", 22 | perView: 1, 23 | autoplay: 3000 24 | }) 25 | 26 | glide.mount() 27 | }) 28 | } 29 | } 30 | 31 | export default HeroSlider 32 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/modules/MobileMenu.js: -------------------------------------------------------------------------------- 1 | class MobileMenu { 2 | constructor() { 3 | this.menu = document.querySelector(".site-header__menu") 4 | this.openButton = document.querySelector(".site-header__menu-trigger") 5 | this.events() 6 | } 7 | 8 | events() { 9 | if (this.openButton) { 10 | this.openButton.addEventListener("click", () => this.openMenu()) 11 | } 12 | } 13 | 14 | openMenu() { 15 | this.openButton.classList.toggle("fa-bars") 16 | this.openButton.classList.toggle("fa-window-close") 17 | this.menu.classList.toggle("site-header__menu--active") 18 | } 19 | } 20 | 21 | export default MobileMenu 22 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/page/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/page", 5 | "title": "Fictional University Page", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/page/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Page Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/page/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/page/render.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 11 |
12 |

Back to

13 |
14 | 16 | 17 | 18 | 19 | get_the_ID() 22 | )); 23 | 24 | if ($theParent or $testArray) { ?> 25 |
26 |

27 |
    28 | NULL, 37 | 'child_of' => $findChildrenOf, 38 | 'sort_column' => 'menu_order' 39 | )); 40 | ?> 41 |
42 |
43 | 44 | 45 | 46 |
47 | 48 |
49 | 50 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/search/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/search", 5 | "title": "Fictional University Search", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/search/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Search Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/search/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/search/render.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 |
9 |
10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/searchresults/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/searchresults", 5 | "title": "Fictional University Search Results", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/searchresults/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Search Results Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/searchresults/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/searchresults/render.php: -------------------------------------------------------------------------------- 1 | 'Search Results', 5 | 'subtitle' => 'You searched for “' . esc_html(get_search_query(false)) . '”' 6 | )); 7 | ?> 8 | 9 |
10 | No results match that search.'; 19 | } 20 | 21 | get_search_form(); 22 | 23 | ?> 24 | 25 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/singlepost/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/singlepost", 5 | "title": "Fictional University Single Post", 6 | "editorScript": "file:./index.js", 7 | "render": "file:./render.php" 8 | } 9 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/singlepost/edit.js: -------------------------------------------------------------------------------- 1 | import { useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit() { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
University Single Post Placeholder
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/singlepost/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockType } from "@wordpress/blocks" 2 | import metadata from "./block.json" 3 | import Edit from "./edit" 4 | 5 | registerBlockType(metadata.name, { 6 | edit: Edit 7 | }) 8 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/singlepost/render.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 |

Blog Home Posted by on in

9 |
10 | 11 |
12 | 13 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slide/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/slide", 5 | "title": "Fictional University Slide", 6 | "supports": { 7 | "align": ["full"] 8 | }, 9 | "attributes": { 10 | "themeimage": { "type": "string" }, 11 | "align": { "type": "string", "default": "full" }, 12 | "imgID": { "type": "number" }, 13 | "imgURL": { "type": "string" } 14 | }, 15 | "editorScript": "file:./index.js", 16 | "render": "file:./render.php" 17 | } 18 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slide/edit.js: -------------------------------------------------------------------------------- 1 | import apiFetch from "@wordpress/api-fetch" 2 | import { Button, PanelBody, PanelRow } from "@wordpress/components" 3 | import { 4 | useBlockProps, 5 | InnerBlocks, 6 | InspectorControls, 7 | MediaUpload, 8 | MediaUploadCheck 9 | } from "@wordpress/block-editor" 10 | import { useEffect } from "@wordpress/element" 11 | 12 | export default function Edit(props) { 13 | const blockProps = useBlockProps() 14 | 15 | useEffect(function () { 16 | if (props.attributes.themeimage) { 17 | props.setAttributes({ 18 | imgURL: `${ourThemeData.themePath}/images/${props.attributes.themeimage}` 19 | }) 20 | } 21 | if (!props.attributes.themeimage && !props.attributes.imgURL) { 22 | props.setAttributes({ imgURL: `${ourThemeData.themePath}/images/library-hero.jpg` }) 23 | } 24 | }, []) 25 | 26 | useEffect( 27 | function () { 28 | if (props.attributes.imgID) { 29 | async function go() { 30 | const response = await apiFetch({ 31 | path: `/wp/v2/media/${props.attributes.imgID}`, 32 | method: "GET" 33 | }) 34 | props.setAttributes({ 35 | themeimage: "", 36 | imgURL: response.media_details.sizes.pageBanner.source_url 37 | }) 38 | } 39 | go() 40 | } 41 | }, 42 | [props.attributes.imgID] 43 | ) 44 | 45 | function onFileSelect(x) { 46 | props.setAttributes({ imgID: x.id }) 47 | } 48 | 49 | return ( 50 | <> 51 | 52 | 53 | 54 | 55 | { 59 | return 60 | }} 61 | /> 62 | 63 | 64 | 65 | 66 | 67 |
68 |
72 |
73 |
74 | 77 |
78 |
79 |
80 |
81 | 82 | ) 83 | } 84 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slide/index.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks } from "@wordpress/block-editor" 2 | import { registerBlockType } from "@wordpress/blocks" 3 | import metadata from "./block.json" 4 | import Edit from "./edit" 5 | 6 | registerBlockType(metadata.name, { 7 | edit: Edit, 8 | save: function () { 9 | return 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slide/render.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slideshow/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "ourblocktheme/slideshow", 5 | "title": "Fictional University Slideshow", 6 | "supports": { 7 | "align": ["full"] 8 | }, 9 | "attributes": { 10 | "align": { "type": "string", "default": "full" } 11 | }, 12 | "editorScript": "file:./index.js", 13 | "render": "file:./render.php" 14 | } 15 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slideshow/edit.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks, useBlockProps } from "@wordpress/block-editor" 2 | 3 | export default function Edit(props) { 4 | const blockProps = useBlockProps() 5 | 6 | return ( 7 |
8 |
9 |

Slideshow

10 | 11 |
12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slideshow/index.js: -------------------------------------------------------------------------------- 1 | import { InnerBlocks } from "@wordpress/block-editor" 2 | import { registerBlockType } from "@wordpress/blocks" 3 | import metadata from "./block.json" 4 | import Edit from "./edit" 5 | 6 | registerBlockType(metadata.name, { 7 | edit: Edit, 8 | save: function () { 9 | return 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/slideshow/render.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 |
8 |
9 |
10 |
11 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/README.md: -------------------------------------------------------------------------------- 1 | # Interactive Block 2 | 3 | > **Warning** 4 | > **This block requires Gutenberg 16.2 or superior to work**. The Interactivity API is, at the moment, not part of WordPress Core as it is still very experimental, and very likely to change. 5 | 6 | > **Note** 7 | > This block uses the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). 8 | 9 | This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API. 10 | 11 | Check the following resources for more info about the Interactivity API: 12 | - [`@wordpress/interactivity` package](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/README.md) 13 | - [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) 14 | - [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "create-block/solved-counter", 5 | "version": "0.1.0", 6 | "title": "Solved Counter", 7 | "category": "widgets", 8 | "icon": "media-interactive", 9 | "description": "An interactive block with the Interactivity API", 10 | "example": {}, 11 | "supports": { 12 | "interactivity": true 13 | }, 14 | "textdomain": "solved-counter", 15 | "editorScript": "file:./index.js", 16 | "editorStyle": "file:./index.css", 17 | "style": "file:./style-index.css", 18 | "render": "file:./render.php", 19 | "viewScriptModule": "file:./view.js" 20 | } 21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Retrieves the translation of text. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ 5 | */ 6 | import { __ } from '@wordpress/i18n'; 7 | 8 | /** 9 | * React hook that is used to mark the block wrapper element. 10 | * It provides all the necessary props like the class name. 11 | * 12 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops 13 | */ 14 | import { useBlockProps } from '@wordpress/block-editor'; 15 | 16 | /** 17 | * The edit function describes the structure of your block in the context of the 18 | * editor. This represents what the editor will render when the block is used. 19 | * 20 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit 21 | * 22 | * @param {Object} props Properties passed to the function. 23 | * @param {Object} props.attributes Available block attributes. 24 | * @param {Function} props.setAttributes Function that updates individual attributes. 25 | * 26 | * @return {Element} Element to render. 27 | */ 28 | export default function Edit( { attributes, setAttributes } ) { 29 | const blockProps = useBlockProps(); 30 | 31 | return ( 32 |

33 | { __( 34 | 'Solved Counter – hello from the editor!', 35 | 'solved-counter' 36 | ) } 37 |

38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/editor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The following styles get applied inside the editor only. 3 | * 4 | * Replace them with your own styles or remove the file completely. 5 | */ 6 | 7 | .wp-block-create-block-solved-counter input[type="text"] { 8 | font-size: 1em; 9 | color: inherit; 10 | background: inherit; 11 | border: 0; 12 | } 13 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block 5 | */ 6 | import { registerBlockType } from '@wordpress/blocks'; 7 | 8 | /** 9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 10 | * All files containing `style` keyword are bundled together. The code used 11 | * gets applied both to the front of your site and to the editor. All other files 12 | * get applied to the editor only. 13 | * 14 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 15 | */ 16 | import './style.scss'; 17 | import './editor.scss'; 18 | 19 | /** 20 | * Internal dependencies 21 | */ 22 | import Edit from './edit'; 23 | import metadata from './block.json'; 24 | 25 | /** 26 | * Every block starts by registering a new block type definition. 27 | * 28 | * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block 29 | */ 30 | registerBlockType( metadata.name, { 31 | /** 32 | * @see ./edit.js 33 | */ 34 | edit: Edit, 35 | } ); 36 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/render.php: -------------------------------------------------------------------------------- 1 | 0, 'grassColor' => 'green')); 14 | 15 | ?> 16 | 17 |
18 |

Questions solved:

19 |
20 | 21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/style.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The following styles get applied both on the front of your site 3 | * and in the editor. 4 | * 5 | * Replace them with your own styles or remove the file completely. 6 | */ 7 | 8 | .wp-block-create-block-solved-counter { 9 | font-size: 1em; 10 | background: #ffff001a; 11 | padding: 1em; 12 | } 13 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/src/solved-counter/view.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | import { store, getContext } from "@wordpress/interactivity" 5 | 6 | const { state } = store("create-block", { 7 | actions: { 8 | toggle: () => { 9 | const context = getContext() 10 | context.isOpen = !context.isOpen 11 | } 12 | }, 13 | callbacks: { 14 | logIsOpen: () => { 15 | const { isOpen } = getContext() 16 | // Log the value of `isOpen` each time it changes. 17 | console.log(`Is open: ${isOpen}`) 18 | } 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Brad's FSE Hybrid 3 | */ 4 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-campus.php: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |
5 | 6 |

View campus »

7 |
8 | 9 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-event.php: -------------------------------------------------------------------------------- 1 |
2 | 3 | format('M') 6 | ?> 7 | format('d') ?> 8 | 9 |
10 |
11 |

Learn more

16 |
17 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-page.php: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |
5 | 6 |

Continue reading »

7 |
8 | 9 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-post.php: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |
5 |

Posted by on in

6 |
7 | 8 |
9 | 10 |

Continue reading »

11 |
12 | 13 |
-------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-professor.php: -------------------------------------------------------------------------------- 1 |
2 |
  • 3 | 4 | 5 | 6 | 7 |
    • 8 |
    -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/template-parts/content-program.php: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | 4 |
    5 | 6 |

    View program »

    7 |
    8 | 9 |
    -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/archive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/emptycanvas.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/page-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/templates/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /brads-fse-hybrid-theme/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "customTemplates": [ 4 | { 5 | "name": "emptycanvas", 6 | "postTypes": ["page"], 7 | "title": "Empty Canvas" 8 | } 9 | ], 10 | "styles": { 11 | "blocks": { 12 | "core/button": { 13 | "color": { 14 | "text": "#FFFFFF", 15 | "background": "var(--wp--preset--color--pizza)" 16 | } 17 | } 18 | } 19 | }, 20 | "settings": { 21 | "typography": { 22 | "fontSizes": [] 23 | }, 24 | "blocks": { 25 | "core/button": { 26 | "border": { 27 | "color": false, 28 | "radius": false, 29 | "style": false, 30 | "width": false 31 | } 32 | } 33 | }, 34 | "color": { 35 | "palette": [ 36 | { 37 | "slug": "pizza", 38 | "color": "#0d3b66", 39 | "name": "Primary" 40 | }, 41 | { 42 | "slug": "secondary", 43 | "color": "#ee964b", 44 | "name": "Secondary" 45 | }, 46 | { 47 | "slug": "background", 48 | "color": "#FFFFFF", 49 | "name": "Background" 50 | }, 51 | { 52 | "slug": "foreground", 53 | "color": "#333333", 54 | "name": "Foreground" 55 | } 56 | ] 57 | }, 58 | "layout": { 59 | "contentSize": "840px" 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /classic-plugin-custom-menu/custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /classic-plugin-custom-menu/styles.css: -------------------------------------------------------------------------------- 1 | .word-filter__flex-container { 2 | display: flex; 3 | } 4 | 5 | .word-filter__flex-container textarea { 6 | flex: 1; 7 | height: 200px; 8 | margin-bottom: 20px; 9 | } 10 | -------------------------------------------------------------------------------- /classic-plugin-settings-menu/languages/wcpdomain-es_MX.mo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnWebCode/brads-boilerplate-wordpress/081fe03f8cf8bafdb22dc8a13b3468e697f9cde0/classic-plugin-settings-menu/languages/wcpdomain-es_MX.mo -------------------------------------------------------------------------------- /classic-plugin-settings-menu/languages/wcpdomain-es_MX.po: -------------------------------------------------------------------------------- 1 | msgid "" 2 | msgstr "" 3 | "Project-Id-Version: Our Test Plugin\n" 4 | "Report-Msgid-Bugs-To: \n" 5 | "POT-Creation-Date: 2021-04-27 19:13+0000\n" 6 | "PO-Revision-Date: 2021-04-27 19:38+0000\n" 7 | "Last-Translator: Brad\n" 8 | "Language-Team: Español de México\n" 9 | "Language: es_MX\n" 10 | "Plural-Forms: nplurals=2; plural=n != 1;\n" 11 | "MIME-Version: 1.0\n" 12 | "Content-Type: text/plain; charset=UTF-8\n" 13 | "Content-Transfer-Encoding: 8bit\n" 14 | "X-Generator: Loco https://localise.biz/\n" 15 | "X-Loco-Version: 2.5.2; wp-5.7.1\n" 16 | "X-Domain: wcpdomain" 17 | 18 | #. Description of the plugin 19 | msgid "A truly amazing plugin." 20 | msgstr "" 21 | 22 | #. Author of the plugin 23 | msgid "Brad" 24 | msgstr "" 25 | 26 | #. Author URI of the plugin 27 | msgid "https://www.udemy.com/user/bradschiff/" 28 | msgstr "" 29 | 30 | #. Name of the plugin 31 | msgid "Our Test Plugin" 32 | msgstr "" 33 | 34 | #: our-first-unique-plugin.php:46 35 | msgid "This post has" 36 | msgstr "Esta entrada tiene" 37 | 38 | #: our-first-unique-plugin.php:109 39 | msgid "Word Count" 40 | msgstr "El recuento de palabras" 41 | 42 | #: our-first-unique-plugin.php:46 43 | msgid "words" 44 | msgstr "palabras" 45 | -------------------------------------------------------------------------------- /classic-plugin-settings-menu/languages/wcpdomain.pot: -------------------------------------------------------------------------------- 1 | #, fuzzy 2 | msgid "" 3 | msgstr "" 4 | "Project-Id-Version: Our Test Plugin\n" 5 | "Report-Msgid-Bugs-To: \n" 6 | "POT-Creation-Date: 2021-04-27 19:13+0000\n" 7 | "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" 8 | "Last-Translator: FULL NAME \n" 9 | "Language-Team: \n" 10 | "Language: \n" 11 | "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n" 12 | "MIME-Version: 1.0\n" 13 | "Content-Type: text/plain; charset=UTF-8\n" 14 | "Content-Transfer-Encoding: 8bit\n" 15 | "X-Generator: Loco https://localise.biz/\n" 16 | "X-Loco-Version: 2.5.2; wp-5.7.1\n" 17 | "X-Domain: wcpdomain" 18 | 19 | #. Description of the plugin 20 | msgid "A truly amazing plugin." 21 | msgstr "" 22 | 23 | #. Author of the plugin 24 | msgid "Brad" 25 | msgstr "" 26 | 27 | #. Author URI of the plugin 28 | msgid "https://www.udemy.com/user/bradschiff/" 29 | msgstr "" 30 | 31 | #. Name of the plugin 32 | msgid "Our Test Plugin" 33 | msgstr "" 34 | 35 | #: our-first-unique-plugin.php:46 36 | msgid "This post has" 37 | msgstr "" 38 | 39 | #: our-first-unique-plugin.php:109 40 | msgid "Word Count" 41 | msgstr "" 42 | 43 | #: our-first-unique-plugin.php:46 44 | msgid "words" 45 | msgstr "" 46 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Coverage directory used by tools like istanbul 9 | coverage 10 | 11 | # Compiled binary addons (https://nodejs.org/api/addons.html) 12 | build/Release 13 | 14 | # Dependency directories 15 | node_modules/ 16 | 17 | # Optional npm cache directory 18 | .npm 19 | 20 | # Optional eslint cache 21 | .eslintcache 22 | 23 | # Output of `npm pack` 24 | *.tgz 25 | 26 | # Output of `wp-scripts plugin-zip` 27 | *.zip 28 | 29 | # dotenv environment variables file 30 | .env 31 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/build/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "bradsboilerplatetailwind/interactivity-block-tailwind", 5 | "version": "0.1.0", 6 | "title": "Interactivity Block Tailwind", 7 | "category": "widgets", 8 | "icon": "smiley", 9 | "attributes": { 10 | "skyColor": { 11 | "type": "string" 12 | }, 13 | "grassColor": { 14 | "type": "string" 15 | } 16 | }, 17 | "example": {}, 18 | "supports": { 19 | "interactivity": true 20 | }, 21 | "textdomain": "interactivity-block-tailwind", 22 | "editorScript": "file:./index.js", 23 | "editorStyle": "file:./index.css", 24 | "style": "file:./style-index.css", 25 | "render": "file:./render.php", 26 | "viewScriptModule": "file:./view.js" 27 | } -------------------------------------------------------------------------------- /interactivity-block-tailwind/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'c1a644a12b718e75266d'); 2 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/build/render.php: -------------------------------------------------------------------------------- 1 | false, "showGrassColor" => false, "attributes" => $attributes); 4 | 5 | ?> 6 | 7 |
    8 |
    > 9 |

    10 | 11 | 12 |

    13 |

    14 | 15 | 16 |

    17 |

    18 | 19 |

    20 |

    21 | This is an example of grass color being visible via interactivity API instead of traditional PHP echo: 22 | 23 |

    24 |
    25 |
    -------------------------------------------------------------------------------- /interactivity-block-tailwind/build/view.asset.php: -------------------------------------------------------------------------------- 1 | array('@wordpress/interactivity'), 'version' => 'ff2990018d295ad3a737', 'type' => 'module'); 2 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/build/view.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"view.js","mappings":";;;;;;;;;AAAA;AACA,aAAa,6BAA6B;AAC1C;AACA;AACA;;;;;;SCJA;SACA;;SAEA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;;SAEA;SACA;;SAEA;SACA;SACA;;;;;UCtBA;UACA;UACA;UACA,uDAAuD,iBAAiB;UACxE;UACA,gDAAgD,aAAa;UAC7D;;;;;;;;;;;;ACN4D;AAE5DA,+DAAK,CAAC,0BAA0B,EAAE;EAChCE,OAAO,EAAE;IACPC,cAAc,EAAEA,CAAA,KAAM;MACpB,MAAMC,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BG,OAAO,CAACC,YAAY,GAAG,CAACD,OAAO,CAACC,YAAY;IAC9C,CAAC;IACDC,gBAAgB,EAAEA,CAAA,KAAM;MACtB,MAAMF,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BG,OAAO,CAACG,cAAc,GAAG,CAACH,OAAO,CAACG,cAAc;IAClD,CAAC;IACDC,aAAa,EAAEA,CAAA,KAAM;MACnB,MAAMJ,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BQ,KAAK,CAAC,oBAAoBL,OAAO,CAACM,UAAU,CAACC,QAAQ,EAAE,CAAC;IAC1D;EACF;AACF,CAAC,CAAC,C","sources":["webpack://interactivity-block/external module \"@wordpress/interactivity\"","webpack://interactivity-block/webpack/bootstrap","webpack://interactivity-block/webpack/runtime/make namespace object","webpack://interactivity-block/./src/view.js"],"sourcesContent":["var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nmodule.exports = __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { store, getContext } from \"@wordpress/interactivity\"\n\nstore(\"bradsboilerplatetailwind\", {\n actions: {\n toggleSkyColor: () => {\n const context = getContext()\n context.showSkyColor = !context.showSkyColor\n },\n toggleGrassColor: () => {\n const context = getContext()\n context.showGrassColor = !context.showGrassColor\n },\n accessExample: () => {\n const context = getContext()\n alert(`The sky color is ${context.attributes.skyColor}`)\n }\n }\n})\n"],"names":["store","getContext","actions","toggleSkyColor","context","showSkyColor","toggleGrassColor","showGrassColor","accessExample","alert","attributes","skyColor"],"sourceRoot":""} -------------------------------------------------------------------------------- /interactivity-block-tailwind/interactivity-block.php: -------------------------------------------------------------------------------- 1 | 35 |
    36 |
    37 | 44 | 51 |
    52 |
    53 | 54 | ) 55 | } 56 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 5 | */ 6 | import { registerBlockType } from "@wordpress/blocks" 7 | 8 | /** 9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 10 | * All files containing `style` keyword are bundled together. The code used 11 | * gets applied both to the front of your site and to the editor. 12 | * 13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 14 | */ 15 | import "./style.css" 16 | 17 | /** 18 | * Internal dependencies 19 | */ 20 | import Edit from "./edit" 21 | import metadata from "./block.json" 22 | 23 | /** 24 | * Every block starts by registering a new block type definition. 25 | * 26 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 27 | */ 28 | registerBlockType(metadata.name, { 29 | /** 30 | * @see ./edit.js 31 | */ 32 | edit: Edit 33 | }) 34 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/src/render.php: -------------------------------------------------------------------------------- 1 | false, "showGrassColor" => false, "attributes" => $attributes); 4 | 5 | ?> 6 | 7 |
    8 |
    > 9 |

    10 | 11 | 12 |

    13 |

    14 | 15 | 16 |

    17 |

    18 | 19 |

    20 |

    21 | This is an example of grass color being visible via interactivity API instead of traditional PHP echo: 22 | 23 |

    24 |
    25 |
    -------------------------------------------------------------------------------- /interactivity-block-tailwind/src/style.css: -------------------------------------------------------------------------------- 1 | @layer theme, base, components, utilities; 2 | 3 | @import "tailwindcss/theme.css" layer(theme); 4 | 5 | .my-unique-plugin-wrapper-class { 6 | @import "tailwindcss/preflight.css" layer(base); 7 | @import "tailwindcss/utilities.css" layer(utilities); 8 | } 9 | -------------------------------------------------------------------------------- /interactivity-block-tailwind/src/view.js: -------------------------------------------------------------------------------- 1 | import { store, getContext } from "@wordpress/interactivity" 2 | 3 | store("bradsboilerplatetailwind", { 4 | actions: { 5 | toggleSkyColor: () => { 6 | const context = getContext() 7 | context.showSkyColor = !context.showSkyColor 8 | }, 9 | toggleGrassColor: () => { 10 | const context = getContext() 11 | context.showGrassColor = !context.showGrassColor 12 | }, 13 | accessExample: () => { 14 | const context = getContext() 15 | alert(`The sky color is ${context.attributes.skyColor}`) 16 | } 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /interactivity-block/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Coverage directory used by tools like istanbul 9 | coverage 10 | 11 | # Compiled binary addons (https://nodejs.org/api/addons.html) 12 | build/Release 13 | 14 | # Dependency directories 15 | node_modules/ 16 | 17 | # Optional npm cache directory 18 | .npm 19 | 20 | # Optional eslint cache 21 | .eslintcache 22 | 23 | # Output of `npm pack` 24 | *.tgz 25 | 26 | # Output of `wp-scripts plugin-zip` 27 | *.zip 28 | 29 | # dotenv environment variables file 30 | .env 31 | -------------------------------------------------------------------------------- /interactivity-block/build/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "bradsboilerplate/interactivity-block", 5 | "version": "0.1.0", 6 | "title": "Interactivity Block", 7 | "category": "widgets", 8 | "icon": "smiley", 9 | "attributes": { 10 | "skyColor": { 11 | "type": "string" 12 | }, 13 | "grassColor": { 14 | "type": "string" 15 | } 16 | }, 17 | "description": "Example block scaffolded with Create Block tool.", 18 | "example": {}, 19 | "supports": { 20 | "interactivity": true 21 | }, 22 | "textdomain": "interactivity-block", 23 | "editorScript": "file:./index.js", 24 | "editorStyle": "file:./index.css", 25 | "style": "file:./style-index.css", 26 | "render": "file:./render.php", 27 | "viewScriptModule": "file:./view.js" 28 | } -------------------------------------------------------------------------------- /interactivity-block/build/index-rtl.css: -------------------------------------------------------------------------------- 1 | /*!****************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! 3 | \****************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .wp-block-bradsboilerplate-interactivity-block { 10 | box-sizing: border-box; 11 | background-color: #b8c9f8; 12 | border: 1px solid #94a9e2; 13 | border-radius: 5px; 14 | padding: 20px; 15 | } 16 | -------------------------------------------------------------------------------- /interactivity-block/build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '531e6088b039a44399ae'); 2 | -------------------------------------------------------------------------------- /interactivity-block/build/index.css: -------------------------------------------------------------------------------- 1 | /*!****************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! 3 | \****************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied inside the editor only. 6 | * 7 | * Replace them with your own styles or remove the file completely. 8 | */ 9 | .wp-block-bradsboilerplate-interactivity-block { 10 | box-sizing: border-box; 11 | background-color: #b8c9f8; 12 | border: 1px solid #94a9e2; 13 | border-radius: 5px; 14 | padding: 20px; 15 | } 16 | 17 | /*# sourceMappingURL=index.css.map*/ -------------------------------------------------------------------------------- /interactivity-block/build/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACE;EACA;EACA;EACA;EACA;AAAF,C","sources":["webpack://interactivity-block/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-bradsboilerplate-interactivity-block {\n box-sizing: border-box;\n background-color: #b8c9f8;\n border: 1px solid #94a9e2;\n border-radius: 5px;\n padding: 20px;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /interactivity-block/build/render.php: -------------------------------------------------------------------------------- 1 | false, "showGrassColor" => false, "attributes" => $attributes); 4 | 5 | ?> 6 | 7 |
    > 8 |

    9 | 10 | 11 |

    12 |

    13 | 14 | 15 |

    16 |

    17 | 18 |

    19 |

    20 | This is an example of grass color being visible via interactivity API instead of traditional PHP echo: 21 | 22 |

    23 |
    -------------------------------------------------------------------------------- /interactivity-block/build/style-index-rtl.css: -------------------------------------------------------------------------------- 1 | /*!***************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! 3 | \***************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied both on the front of your site 6 | * and in the editor. 7 | * 8 | * Replace them with your own styles or remove the file completely. 9 | */ 10 | .ourboilerplate-frontend { 11 | box-sizing: border-box; 12 | border-radius: 5px; 13 | box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.07); 14 | background-color: #ffe5b4; 15 | border: 2px solid #ffda97; 16 | color: #ce9c41; 17 | padding: 20px; 18 | margin: 20px 0; 19 | } 20 | .ourboilerplate-frontend p { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | -------------------------------------------------------------------------------- /interactivity-block/build/style-index.css: -------------------------------------------------------------------------------- 1 | /*!***************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! 3 | \***************************************************************************************************************************************************************************************************************************************/ 4 | /** 5 | * The following styles get applied both on the front of your site 6 | * and in the editor. 7 | * 8 | * Replace them with your own styles or remove the file completely. 9 | */ 10 | .ourboilerplate-frontend { 11 | box-sizing: border-box; 12 | border-radius: 5px; 13 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07); 14 | background-color: #ffe5b4; 15 | border: 2px solid #ffda97; 16 | color: #ce9c41; 17 | padding: 20px; 18 | margin: 20px 0; 19 | } 20 | .ourboilerplate-frontend p { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | /*# sourceMappingURL=style-index.css.map*/ -------------------------------------------------------------------------------- /interactivity-block/build/style-index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAF;AAEE;EACE;EACA;AAAJ,C","sources":["webpack://interactivity-block/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.ourboilerplate-frontend {\n box-sizing: border-box;\n border-radius: 5px;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);\n background-color: #ffe5b4;\n border: 2px solid #ffda97;\n color: #ce9c41;\n padding: 20px;\n margin: 20px 0;\n\n p {\n margin: 0;\n padding: 0;\n }\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /interactivity-block/build/view.asset.php: -------------------------------------------------------------------------------- 1 | array('@wordpress/interactivity'), 'version' => '5a830d878363d74608a0', 'type' => 'module'); 2 | -------------------------------------------------------------------------------- /interactivity-block/build/view.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"view.js","mappings":";;;;;;;;;AAAA;AACA,aAAa,6BAA6B;AAC1C;AACA;AACA;;;;;;SCJA;SACA;;SAEA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;SACA;;SAEA;SACA;;SAEA;SACA;SACA;;;;;UCtBA;UACA;UACA;UACA,uDAAuD,iBAAiB;UACxE;UACA,gDAAgD,aAAa;UAC7D;;;;;;;;;;;;ACN6D;AAE7DA,+DAAK,CAAC,kBAAkB,EAAE;EACzBE,OAAO,EAAE;IACRC,cAAc,EAAEA,CAAA,KAAM;MACrB,MAAMC,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BG,OAAO,CAACC,YAAY,GAAG,CAACD,OAAO,CAACC,YAAY;IAC7C,CAAC;IACDC,gBAAgB,EAAEA,CAAA,KAAM;MACvB,MAAMF,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BG,OAAO,CAACG,cAAc,GAAG,CAACH,OAAO,CAACG,cAAc;IACjD,CAAC;IACDC,aAAa,EAAEA,CAAA,KAAM;MACpB,MAAMJ,OAAO,GAAGH,oEAAU,CAAC,CAAC;MAC5BQ,KAAK,CAAC,oBAAoBL,OAAO,CAACM,UAAU,CAACC,QAAQ,EAAE,CAAC;IACzD;EACD;AACD,CAAC,CAAC,C","sources":["webpack://interactivity-block/external module \"@wordpress/interactivity\"","webpack://interactivity-block/webpack/bootstrap","webpack://interactivity-block/webpack/runtime/make namespace object","webpack://interactivity-block/./src/view.js"],"sourcesContent":["var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nmodule.exports = __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { store, getContext } from \"@wordpress/interactivity\";\n\nstore(\"bradsboilerplate\", {\n\tactions: {\n\t\ttoggleSkyColor: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.showSkyColor = !context.showSkyColor;\n\t\t},\n\t\ttoggleGrassColor: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.showGrassColor = !context.showGrassColor;\n\t\t},\n\t\taccessExample: () => {\n\t\t\tconst context = getContext();\n\t\t\talert(`The sky color is ${context.attributes.skyColor}`);\n\t\t},\n\t},\n});\n"],"names":["store","getContext","actions","toggleSkyColor","context","showSkyColor","toggleGrassColor","showGrassColor","accessExample","alert","attributes","skyColor"],"sourceRoot":""} -------------------------------------------------------------------------------- /interactivity-block/interactivity-block.php: -------------------------------------------------------------------------------- 1 | 43 | 49 | 55 | 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /interactivity-block/src/editor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The following styles get applied inside the editor only. 3 | * 4 | * Replace them with your own styles or remove the file completely. 5 | */ 6 | 7 | .wp-block-bradsboilerplate-interactivity-block { 8 | box-sizing: border-box; 9 | background-color: #b8c9f8; 10 | border: 1px solid #94a9e2; 11 | border-radius: 5px; 12 | padding: 20px; 13 | } 14 | -------------------------------------------------------------------------------- /interactivity-block/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 5 | */ 6 | import { registerBlockType } from '@wordpress/blocks'; 7 | 8 | /** 9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 10 | * All files containing `style` keyword are bundled together. The code used 11 | * gets applied both to the front of your site and to the editor. 12 | * 13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 14 | */ 15 | import './style.scss'; 16 | 17 | /** 18 | * Internal dependencies 19 | */ 20 | import Edit from './edit'; 21 | import metadata from './block.json'; 22 | 23 | /** 24 | * Every block starts by registering a new block type definition. 25 | * 26 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 27 | */ 28 | registerBlockType( metadata.name, { 29 | /** 30 | * @see ./edit.js 31 | */ 32 | edit: Edit, 33 | } ); 34 | -------------------------------------------------------------------------------- /interactivity-block/src/render.php: -------------------------------------------------------------------------------- 1 | false, "showGrassColor" => false, "attributes" => $attributes); 4 | 5 | ?> 6 | 7 |
    > 8 |

    9 | 10 | 11 |

    12 |

    13 | 14 | 15 |

    16 |

    17 | 18 |

    19 |

    20 | This is an example of grass color being visible via interactivity API instead of traditional PHP echo: 21 | 22 |

    23 |
    -------------------------------------------------------------------------------- /interactivity-block/src/style.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The following styles get applied both on the front of your site 3 | * and in the editor. 4 | * 5 | * Replace them with your own styles or remove the file completely. 6 | */ 7 | 8 | .ourboilerplate-frontend { 9 | box-sizing: border-box; 10 | border-radius: 5px; 11 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07); 12 | background-color: #ffe5b4; 13 | border: 2px solid #ffda97; 14 | color: #ce9c41; 15 | padding: 20px; 16 | margin: 20px 0; 17 | 18 | p { 19 | margin: 0; 20 | padding: 0; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /interactivity-block/src/view.js: -------------------------------------------------------------------------------- 1 | import { store, getContext } from "@wordpress/interactivity"; 2 | 3 | store("bradsboilerplate", { 4 | actions: { 5 | toggleSkyColor: () => { 6 | const context = getContext(); 7 | context.showSkyColor = !context.showSkyColor; 8 | }, 9 | toggleGrassColor: () => { 10 | const context = getContext(); 11 | context.showGrassColor = !context.showGrassColor; 12 | }, 13 | accessExample: () => { 14 | const context = getContext(); 15 | alert(`The sky color is ${context.attributes.skyColor}`); 16 | }, 17 | }, 18 | }); 19 | --------------------------------------------------------------------------------