Skip to content

Commit

Permalink
[#123] Adding updates to the README
Browse files Browse the repository at this point in the history
  • Loading branch information
nathan-schmidt-viget committed Jul 22, 2024
1 parent a70f5fb commit a52cf0f
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.dist.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ This will install the WordPress files, composer packages, npm packages, and star

You are all ready to start working on the site.

Information on developing the theme, styling, and building blocks can be found in the theme [README](wp-content/themes/#UPDATETHIS/README.md).

### Build for production
The deploy script should build the files for production, but if you want to test that out on your local server you can change the DDEV config.yaml `ENVIRONMENT` to `prod` and then `cd` into your custom theme folder and run `ddev npm run build`. This will build the JS and CSS files in the dist folder and out put a manifest file.

Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ Following the series of prompts, the project will be set up with the following:

After the setup is complete, it is recommended to perform your initial commit and push to your project repository.

Information on developing the theme, styling, and building blocks can be found in the theme [README](wp-content/themes/wp-starter/README.md).

# Development

The following command will create a directory (`project-name`) and run `composer create-project` using your local repository as the source. Be sure to replace the path with the correct path to your local repository.
Expand Down
10 changes: 10 additions & 0 deletions wp-content/themes/wp-starter/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ The `theme.json` holds a lot of the core WordPress theme settings. The `theme.js

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`.

The files that create the `theme.json` can be used to set custom settings for blocks, global theme, or for custom templates. Here are a few references:
- [Global Settings & Styles](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/)
- [Theme.json reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/)
- [Global Styles & theme.json](https://fullsiteediting.com/lessons/global-styles/)

## Custom Blocks 🧱
Blocks are build using ACF and core WordPress blocks. Styles for the blocks are in `src/styles/blocks`.

Expand Down Expand Up @@ -61,6 +66,11 @@ If you have need to apply the buttons style to the mark up you can add one of th
| `.btn-subtle` |
| `.btn-text` |

#### Adding more Buttons Styles
If you need to add more button styles you can [register](https://developer.wordpress.org/reference/functions/register_block_style/) a new block style on the `core/button`. Once you have the new button style registered you add the Tailwind style in `plugins-tailwind/buttons.js` and assign the class to the button in `/src/styles/core-blocks/buttons.css`. It is recommended that you create descriptive button styles and not generic styles like "primary" or "secondary".

#### Custom Button Icons
The theme has a custom filter to add in custom icons for buttons. You can your custom SVG icons into `/src/images/icons/` and then pull in that SVG icon in `inc/icons.php`. In order for your SVG icon to update with the text you need to set `fill` or `stroke` (depending on your icon) to `currentColor`.

### 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.

0 comments on commit a52cf0f

Please sign in to comment.