diff --git a/.gitignore b/.gitignore index a56225f8..3944e5b8 100644 --- a/.gitignore +++ b/.gitignore @@ -228,6 +228,8 @@ wp-config.php # All themes and plugins unless explicitly allowed /wp-content/themes/* /wp-content/plugins/* +# WordFence plugin files +/wp-content/wflogs/* # Explicitly Allowed Themes and Plugins !/wp-content/themes/wp-starter diff --git a/README.md b/README.md index 0ebe0c59..a44e2dda 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ This is a WordPress starter project that includes a basic custom theme, includin To begin using this on a new project, simply call the following command from the root of your project: ```bash -$ composer create-project viget/wordpress-site-starter +composer create-project viget/wordpress-site-starter ``` Follow the prompts to set up your project with the desired information. You will be asked: @@ -47,12 +47,12 @@ Also, in `packages.json`, you can change the name of the branch from `main` to u **Note:** Be sure to update the paths in `packages.json` as well as the command below to point to the location of your local repository. `~/` will not work, you must use the full path. ```bash -$ mkdir project-name && cd project-name && composer create-project --repository-url="/root/path/not/relative/path/to/wordpress-site-starter/packages.json" viget/wordpress-site-starter . --stability=dev --remove-vcs --no-install +mkdir project-name && cd project-name && composer create-project --repository-url="/root/path/not/relative/path/to/wordpress-site-starter/packages.json" viget/wordpress-site-starter . --stability=dev --remove-vcs --no-install ``` You can quickly remove the project by using: ```bash -$ ddev delete project-name -O -y && cd ../ && rm -rf project-name +ddev delete project-name -O -y && cd ../ && rm -rf project-name ``` ## Changelog diff --git a/wp-content/themes/wp-starter/README.md b/wp-content/themes/wp-starter/README.md index 52f875b6..501d35dc 100644 --- a/wp-content/themes/wp-starter/README.md +++ b/wp-content/themes/wp-starter/README.md @@ -1,13 +1,18 @@ # WP Site Starter -Custom block theme built by Viget. +This is a custom block theme built by Viget. It is meant to be a starting place then customize and build out your theme. Please update this file to reflect your custom built theme. + +## Frontend Stack +- [Vite](https://vitejs.dev/) +- [AlpineJS](https://alpinejs.dev/) +- [Tailwind](https://tailwindcss.com/) ## Theme.json The `theme.json` holds a lot of the core WordPress theme settings. The `theme.json` is build using several js files in `/src/theme-json`, Vite builds all of these files and exports a `theme.json` for both `dev` and `build`. Do not edit directly `theme.json` as it will be over written on build. Several of the Tailwind variables are pulled in and Tailwind should be used as the primary way to style elements. If you need to, you can pull in more Tailwind variable for custom styling in `theme.json`. -## Custom Blocks +## Custom Blocks 🧱 Blocks are build using ACF and core WordPress blocks. Styles for the blocks are in `src/styles/blocks`. * Accordion @@ -18,4 +23,44 @@ Blocks are build using ACF and core WordPress blocks. Styles for the blocks are * Text Icon Cards * Text Image * Video Embed -* *List other custom Blocks* + +## Customizing Theme 🎨 +### Fonts +Fonts are pulled in by [typography.js](/src/theme-json/settings/typography.js). Update the `src` to pull in the font files in `/src/fonts`. For more info on setting up WordPress fonts check out [fullsiteediting](https://fullsiteediting.com/lessons/creating-theme-json/#h-typography). + +### Colors +You have access to all of [Tailwind's colors](https://tailwindcss.com/docs/customizing-colors) but feel free to create your own custom colors in the Tailwind config. +The theme comes with one accent color. The color name can be set in the top of the Tailwind config and the color are set in config theme. +Colors are pulled from Tailwind into `/src/theme-json/settings/color.js` to be used in Gutenberg and WordPress. +Prefix the Gutenberg color slug by adding `dark-` to flag that color as a dark enough for text, buttons to change color to dark mode. + +### Spacing +The default spacing is fluid, meaning that it is larger on desktops and smaller on mobile screens. +| Class | Min | Max | +|-------|-----|-----| +| `.fluid-xs` | `2px` | `16px` | +| `.fluid-sm` | `20px` | `40px` | +| `.fluid-md` | `32px` | `64px` | +| `.fluid-lg` | `56px` | `112px` | +| `.fluid-xl` | `96px` | `160px` | +| `.fluid-2x` | `144px` | `240px` | + +To adjust the spacing you can edit them in `tailwind.config.js` under `spacing > fluid`. The `fluid` spacing is getting pull into `/src/theme-json/settings/spacing.js` and being used as the spacing for both margin and padding in Gutenberg. + +### Buttons +WordPress button styles are normally built in the `theme.json` but because there is a limitations on hover/focus for button variants all the buttons style are build in Tailwind. + +The Tailwind button plugin is in `plugins-tailwind/buttons.js` and has `contained`, `outline`, and both light and dark version. In that file (`buttons.js`) is where you will update and style all of the buttons on the site. Those button styles are getting applied to the HTML in `/src/styles/core-blocks/buttons.css`. +If you have need to apply the buttons style to the mark up you can add one of these button classes. +| Button Class | Button Sizes | +|--------------|-------------- +| `.btn-contained` | `.btn-sm` | +| `.btn-contained-light` | `.btn-lg` | +| `.btn-outlined` | +| `.btn-outlined-light` | +| `.btn-subtle` | +| `.btn-text` | + + +### Navigation +The navigation has been set up to be fully accessible and is built using [Alpine](https://alpinejs.dev/) and the styles are set in CSS. You can edit the JS in `/src/components/dropdown.js` and the CSS in `/src/styles/core-blocks/navigation.css` if you need to customize the navigation. diff --git a/wp-content/themes/wp-starter/src/script/dropdown.js b/wp-content/themes/wp-starter/src/components/dropdown.js similarity index 100% rename from wp-content/themes/wp-starter/src/script/dropdown.js rename to wp-content/themes/wp-starter/src/components/dropdown.js diff --git a/wp-content/themes/wp-starter/src/main.js b/wp-content/themes/wp-starter/src/main.js index 1df183ac..5d6baa6b 100644 --- a/wp-content/themes/wp-starter/src/main.js +++ b/wp-content/themes/wp-starter/src/main.js @@ -3,7 +3,7 @@ import 'vite/modulepreload-polyfill'; // Alpine Docs - https://alpinejs.dev/start-here import Alpine from 'alpinejs'; -import dropdown from './script/dropdown.js'; +import dropdown from './components/dropdown.js'; import focus from '@alpinejs/focus' import persist from '@alpinejs/persist' window.Alpine = Alpine; diff --git a/wp-content/themes/wp-starter/src/styles/base/has-bg.css b/wp-content/themes/wp-starter/src/styles/base/has-bg.css index 823c9729..86cf3812 100644 --- a/wp-content/themes/wp-starter/src/styles/base/has-bg.css +++ b/wp-content/themes/wp-starter/src/styles/base/has-bg.css @@ -10,18 +10,6 @@ .wp-block-heading:not(.has-text-color) { @apply text-white; } - - .wp-block-button { - .wp-block-button__link { - @apply btn-contained-light; - } - - &.is-style-outline { - .wp-block-button__link { - @apply btn-outlined-light; - } - } - } } } } diff --git a/wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css b/wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css index 1874288f..4d61d658 100644 --- a/wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css +++ b/wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css @@ -1,12 +1,30 @@ @layer components { - .wp-block-button { - .wp-block-button__link { - @apply btn-contained; + .wp-block, + .acf-block { + .wp-block-button { + .wp-block-button__link { + @apply btn-contained; + } + + &.is-style-outline { + .wp-block-button__link { + @apply btn-outlined; + } + } } - &.is-style-outline { - .wp-block-button__link { - @apply btn-outlined; + /* Light versions for dark mode*/ + &[class*='has-dark'] { + .wp-block-button { + .wp-block-button__link { + @apply btn-contained-light; + } + + &.is-style-outline { + .wp-block-button__link { + @apply btn-outlined-light; + } + } } } } diff --git a/wp-content/themes/wp-starter/style.css b/wp-content/themes/wp-starter/style.css index 4aecc499..ea3f95e5 100644 --- a/wp-content/themes/wp-starter/style.css +++ b/wp-content/themes/wp-starter/style.css @@ -1,7 +1,7 @@ /* Theme Name: WP Starter Theme URI: https://wpstarter.vigetx.com -Author: Viget, briandichiara +Author: Viget, briandichiara, nathanschmidt Author URI: https://viget.com Description: Custom block theme built by Viget. Requires at least: 6.0