Child Theme Sage 10

### Step 1: Create the Child Theme Directory

1. **Navigate to the themes directory** of your WordPress installation. Typically, it will be located at `wp-content/themes/`.
2. **Create a new folder** for your child theme. For example, you might name it `sage10-child`.

### Step 2: Create the Required Files

In your newly created child theme folder, you’ll need at least two files:

1. **`style.css`**:
This file tells WordPress that your theme is a child theme and contains any custom styles you want to add.

/*
    Theme Name: Sage 10 Child
    Template: sage
    Version: 1.0.0
    Author: Your Name
    Description: A child theme for Sage 10.
   */

2. **`functions.php`**:
This file is used to enqueue styles and scripts. You need to load the parent theme's stylesheet as well as your custom styles.

<?php
   // Enqueue parent theme styles
   function sage10_child_enqueue_styles() {
       wp_enqueue_style('sage-style', get_template_directory_uri() . '/style.css');
       wp_enqueue_style('sage10-child-style', get_stylesheet_directory_uri() . '/style.css', array('sage-style'));
   }
   add_action('wp_enqueue_scripts', 'sage10_child_enqueue_styles');

### Step 3: Activate Your Child Theme

1. Log in to your WordPress admin dashboard.
2. Go to **Appearance > Themes**.
3. You should see your new child theme listed. Click on **Activate**.

### Step 4: Customize Your Child Theme

– You can now add custom styles to `style.css`, override parent theme templates by copying them into your child theme folder, and add any additional functionality to `functions.php`.

### Additional Notes

– If you want to add custom scripts or styles, you can do so in the `functions.php` file by using the `wp_enqueue_script` and `wp_enqueue_style` functions.
– To customize templates, simply copy the desired template files from the parent theme into your child theme folder and modify them as needed.

### Example Directory Structure

Your child theme directory might look like this:

/wp-content/themes/sage10-child/
    ├── style.css
    └── functions.php

By following these steps, you should have a functioning child theme for Sage 10 that allows for customization without affecting the parent theme.

Here are some steps to troubleshoot and resolve this issue:

### 1. Check Your Hostname

Ensure that `example.test` is properly defined in your system's hosts file:

– **Windows**: Open `C:WindowsSystem32driversetchosts` with a text editor (as an administrator) and make sure you have a line like:

127.0.0.1    example.test

– **macOS/Linux**: Open `/etc/hosts` with a text editor (you may need superuser privileges) and ensure it includes:

127.0.0.1    example.test

### 2. Restart Your Development Server

Sometimes changes to the hosts file require you to restart your development server for the changes to take effect.

### 3. Check Your Proxy Configuration

If you are using a development server (like Vite or Webpack Dev Server) that has a proxy configuration, ensure it is set up correctly to proxy requests to `http://example.test/`. For example, your `vite.config.js` or `webpack.config.js` might have a proxy setup like this:

// vite.config.js
export default {
  server: {
    proxy: {
      '/wp': {
        target: 'http://example.test',
        changeOrigin: true,
        secure: false,
      },
    },
  },
};

### 4. Verify the WordPress Installation

Ensure that your WordPress installation is running and accessible at `http://example.test`. You can do this by navigating to `http://example.test` in your browser.

### 5. Check for Firewall/Antivirus Issues

Sometimes firewalls or antivirus software can block requests. Make sure that these are not interfering with your local development setup.

### 6. Use a Different Hostname

If you continue to experience issues, you can try using a different hostname (like `localhost` or another custom domain) and update your proxy configuration and hosts file accordingly.

### 7. Check DNS Resolution

Make sure your DNS settings are not causing issues. You can flush your DNS cache:

– **Windows**: Open Command Prompt as an administrator and run:

ipconfig /flushdns

– **macOS**: Open Terminal and run:

sudo killall -HUP mDNSResponder

### Summary

After checking the hostname, ensuring your server is running, and confirming that the proxy configuration is correct, you should be able to resolve the `[ENOTFOUND]` errors. If problems persist, consider examining the logs of your web server and development server for more specific error messages.

/**
* Set public path
*
* @see {@link https://bud.js.org/reference/bud.setPublicPath}
*/
app.setPublicPath('/app/themes/sage/public/');

/**
* Development server settings
*
* @see {@link https://bud.js.org/reference/bud.setUrl}
* @see {@link https://bud.js.org/reference/bud.setProxyUrl}
* @see {@link https://bud.js.org/reference/bud.watch}
*/
app
.setUrl('http://localhost:2500')
.setProxyUrl('http://example.test')
.watch(['resources/views', 'app']);

/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
*/
app.wpjson
.setSettings({
background: {
backgroundImage: true,
},
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize();
};
in docker

### Step 1: Create Your Docker Setup

1. **Create a Dockerfile** for your Sage 10 project (if you don't have one yet). Here’s a basic example that sets up a PHP environment with Node.js:

FROM php:8.0-fpm

   # Install necessary PHP extensions and other dependencies
   RUN apt-get update && apt-get install -y 
       libzip-dev 
       unzip 
       git 
       && docker-php-ext-install zip

   # Install Node.js
   RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - 
       && apt-get install -y nodejs

   # Set working directory
   WORKDIR /var/www/html

   # Copy the entire project to the container
   COPY . .

   # Install Composer
   RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

   # Install PHP dependencies
   RUN composer install

   # Install Node.js dependencies and build assets
   RUN npm install && npm run build

   EXPOSE 80

   CMD ["php-fpm"]

2. **Create a `docker-compose.yml` file** to define your services. Here’s an example:

version: '3.8'

   services:
     app:
       build:
         context: .
         dockerfile: Dockerfile
       volumes:
         - .:/var/www/html
       ports:
         - "2500:80"
       environment:
         - WORDPRESS_DB_HOST=db
         - WORDPRESS_DB_USER=user
         - WORDPRESS_DB_PASSWORD=password
         - WORDPRESS_DB_NAME=database
       
     db:
       image: mysql:5.7
       restart: always
       environment:
         MYSQL_ROOT_PASSWORD: password
         MYSQL_DATABASE: database
         MYSQL_USER: user
         MYSQL_PASSWORD: password
       volumes:
         - db_data:/var/lib/mysql

   volumes:
     db_data:

### Step 2: Configure Bud.js in Your Project

Ensure your `bud.config.js` file is configured correctly as shown in your provided code. The `setProxyUrl` should match the URL of your WordPress instance (which will be accessible from the Docker container):

app
  .setUrl('http://localhost:2500')  // Change if needed
  .setProxyUrl('http://example.test');  // Ensure this matches your WordPress setup

### Step 3: Update Your Hosts File

Make sure that your `example.test` domain is set up correctly in your hosts file, as mentioned in the previous response. This ensures the Docker container can resolve this domain correctly.

### Step 4: Build and Run Docker Containers

1. In your terminal, navigate to your project directory where the `docker-compose.yml` is located.
2. Run the following commands to build and start your Docker containers:

docker-compose up --build

### Step 5: Access Your Application

– Open your web browser and go to `http://localhost:2500`. This should show your WordPress installation.
– Make sure to verify if the proxying is set correctly and that your development server (like Vite) is running and accessible.

### Step 6: Test Cron Requests

The errors related to `wp-cron.php` suggest that the server cannot resolve the proxy URL. To test the cron jobs, you might want to visit the following URL in your browser to trigger the cron manually:

http://example.test/wp/wp-cron.php

### Additional Considerations

– **Caching**: Ensure that there are no caching mechanisms that might prevent the updates from being reflected.
– **Docker Networking**: If you run into issues with connectivity between your application and database, make sure the Docker containers can communicate. Using `docker-compose` ensures this, but you may need to troubleshoot further if there are issues.
– **Development Environment**: If you face any other specific errors while running the application, check the logs of the containers for more details. You can do this by running:

docker-compose logs

By following these steps, you should be able to set up your Sage 10 project in a Docker environment successfully. If you encounter any more issues, feel free to ask!

### Understanding the Warnings

1. **Peer Dependencies**: These warnings are generated when a package you are using (in this case, `react-autosize-textarea`) expects a specific version range of another package (`react`) that you have installed. When there's a mismatch, npm warns you that it is overriding the peer dependency.

2. **WordPress Packages**: The WordPress packages like `@wordpress/block-editor` might have dependencies that expect an older version of React, which can lead to compatibility issues.

### How to Resolve the Warning

Here are some steps you can take to resolve or mitigate the warnings:

#### 1. Check Compatibility

– **Review Documentation**: Check if the version of `@wordpress/block-editor` you're using is compatible with React 18. If you're using the latest version of WordPress or its packages, they may support React 18. If you are unsure, check the [official WordPress packages documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/).

#### 2. Upgrade Dependencies

– **Upgrade `react-autosize-textarea`**: If there's a newer version of `react-autosize-textarea` that supports React 18, update to that version. Run:

npm install react-autosize-textarea@latest

– **Upgrade Other Packages**: Ensure that all related packages are up to date, especially WordPress packages. You can check for outdated packages using:

npm outdated

Then update them accordingly.

#### 3. Use Resolutions (If Applicable)

If you're using a package manager that supports resolutions (like Yarn), you can enforce a specific version across dependencies. If you're using npm, this option is not directly available, but you can manually specify versions in your `package.json`.

For example, with Yarn, you can add the following to your `package.json`:

"resolutions": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

After adding the resolutions, run:

yarn install

#### 4. Ignore Warnings (Not Recommended)

If you have verified that your application works correctly despite the warnings and you are sure about the compatibility, you can choose to ignore the warnings. However, this is generally not recommended, as it might lead to issues later on.

### Conclusion

Peer dependency warnings are common when working with libraries that evolve at different paces. It’s essential to keep your libraries updated and check their compatibility with each other. After applying the changes, make sure to test your application thoroughly to ensure everything works as expected with the newer versions of React and other dependencies. If you encounter specific issues after making these changes, feel free to ask for further assistance!

### For npm

1. **Using the `–legacy-peer-deps` Flag**: When installing or updating packages, you can use this flag to ignore peer dependency conflicts. For example:

npm install --legacy-peer-deps

This tells npm to ignore peer dependencies and install the packages anyway. You can also set this flag globally in your npm configuration:

npm config set legacy-peer-deps true

2. **Suppress Warnings in the `npm` Config**: You can also suppress peer dependency warnings globally by adding a config option:

npm config set loglevel warn

This will change the log level, suppressing the output of peer dependency warnings.

### For Yarn

If you’re using Yarn, you can ignore peer dependency warnings globally by setting the `ignore-engines` option:

yarn config set ignore-engines true

### Important Considerations

– **Potential Risks**: Ignoring peer dependencies can lead to runtime errors if the conflicting versions of packages are not actually compatible. It’s advisable to thoroughly test your application after making such changes.
– **Future Updates**: Keep in mind that while ignoring warnings can help in the short term, it’s a good practice to monitor the dependencies and update them to compatible versions whenever possible.

By using these approaches, you can proceed without being bothered by peer dependency warnings during development. If you need any more help, feel free to ask!

### Clearing npm Cache

To clear the npm cache, you can run the following command:

npm cache clean --force

This command forces npm to clean its cache, which can be useful if you’re encountering issues with package installations.

### Clearing Yarn Cache

If you are using Yarn, you can clear the cache with:

yarn cache clean

This command will remove all the files in the Yarn cache, ensuring that fresh copies of packages will be downloaded the next time you install.

### Clearing Browser Cache

To clear your browser cache, the steps depend on which browser you're using:

– **Google Chrome**:
1. Click on the three dots in the top-right corner.
2. Go to **More tools** > **Clear browsing data**.
3. Select a time range and check "Cached images and files".
4. Click **Clear data**.

– **Firefox**:
1. Click on the three horizontal lines in the top-right corner.
2. Go to **Settings** > **Privacy & Security**.
3. Scroll down to the **Cookies and Site Data** section and click **Clear Data**.
4. Check "Cached Web Content" and click **Clear**.

– **Microsoft Edge**:
1. Click on the three dots in the top-right corner.
2. Go to **Settings** > **Privacy, search, and services**.
3. Under the **Clear browsing data** section, click **Choose what to clear**.
4. Select "Cached images and files" and click **Clear now**.

### Clearing Docker Cache

If you're using Docker and want to clear the cache, you can remove unused images, containers, and volumes with:

docker system prune

This command will prompt you to confirm the removal of unused data.

### Additional Cache Clearing

– **Clear Laravel Cache**: If you're working on a Laravel application, you can clear various caches with these commands:

php artisan cache:clear          # Clear application cache
  php artisan config:clear         # Clear configuration cache
  php artisan route:clear          # Clear route cache
  php artisan view:clear           # Clear compiled view files

– **Clear Vite Cache**: If you're using Vite, you can clear its cache by removing the `node_modules/.vite` directory:

rm -rf node_modules/.vite

### Conclusion

By following these steps, you can effectively clear caches for different tools and environments you’re using. If you encounter any issues or have specific tools in mind that you want to clear the cache for, let me know!

### Step 1: Install the Package

You can install the `@wordpress/block-editor` package by running one of the following commands in your project directory:

#### Using npm

npm install @wordpress/block-editor

#### Using Yarn

yarn add @wordpress/block-editor

### Step 2: Verify Installation

After the installation completes, you can verify that the package is listed in your `package.json` file under `dependencies`:

"dependencies": {
  "@wordpress/block-editor": "^14.6.0",  // or the version you installed
  ...
}

### Step 3: Import and Use in Your Project

Once installed, you can import the `@wordpress/block-editor` components into your JavaScript files. For example:

import { InnerBlocks } from '@wordpress/block-editor';

// Example of using InnerBlocks in a custom block
const MyCustomBlock = () => {
  return (
    <div>
      <h2>My Custom Block</h2>
      <InnerBlocks />
    </div>
  );
};

### Step 4: Build Your Assets

If you're using a build tool (like Webpack or Bud), make sure to rebuild your assets to include the newly added package. You can do this with:

npm run build   # For npm

or

yarn build      # For Yarn

### Step 5: Test in WordPress

Once everything is set up, you can test your new block in the WordPress block editor. Make sure that your WordPress setup is running and that you can see the block when you add it to a post or page.

### Troubleshooting

If you encounter any issues or peer dependency warnings after adding the package, consider the following:

– **Peer Dependency Warnings**: If you see warnings regarding React or other dependencies, you can choose to ignore them as we discussed earlier or resolve them by ensuring compatible versions are installed.

– **Documentation**: For detailed usage and examples, refer to the official [WordPress Block Editor documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/).

By following these steps, you should be able to successfully add and use the `@wordpress/block-editor` package in your project. If you have any further questions or run into issues, feel free to ask!

### Step 1: Install the Package

To integrate the `@wordpress/block-editor`, you will need to install it using npm or Yarn, depending on your project setup. Execute one of the following commands in your terminal, within your project directory:

– Using npm:

npm install @wordpress/block-editor

– Using Yarn:

yarn add @wordpress/block-editor

### Step 2: Verify Installation

Once the installation is complete, verify that the package has been added to your `package.json` file under the `dependencies` section. This ensures that the package will be included in your project’s build process.

### Step 3: Utilize the Package

After installation, you can import components from the `@wordpress/block-editor` package into your React components. For example:

import { RichText, InspectorControls } from '@wordpress/block-editor';

// Example usage in a React component
const MyCustomBlock = (props) => {
    return (
        <div>
            <InspectorControls>
                {/* Control components go here */}
            </InspectorControls>
            <RichText
                tagName="p"
                value={props.content}
                onChange={props.setContent}
            />
        </div>
    );
};

### Step 4: Integrate with WordPress

Ensure that your WordPress environment is properly configured to enqueue your scripts and styles. Typically, this involves using `wp_enqueue_script` and `wp_enqueue_style` in your theme’s `functions.php` or within a plugin file. Here’s a basic example:

function my_custom_block_enqueue() {
    wp_enqueue_script(
        'my-custom-block',
        get_template_directory_uri() . '/path/to/your/script.js',
        array('wp-blocks', 'wp-element', 'wp-editor'), // dependencies
        filemtime(get_template_directory() . '/path/to/your/script.js')
    );
}

add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue');

### Step 5: Test the Implementation

After integrating the block editor components, it is essential to test the functionality within the WordPress block editor to ensure everything operates as expected. You may want to check for any console errors or unexpected behavior during this process.

### Additional Considerations

– **Documentation**: It is advisable to refer to the [official WordPress Block Editor documentation](https://developer.wordpress.org/block-editor/) for detailed information on available components, hooks, and best practices.
– **Compatibility**: Ensure that the versions of `@wordpress/block-editor` and other related packages are compatible with your version of WordPress to avoid conflicts.

By following these steps, you can successfully add and utilize the `@wordpress/block-editor` package in your project, facilitating the development of custom blocks and enhancing the user experience within the WordPress editor. If further assistance is required, please do not hesitate to inquire.

### Moving a Folder Using Command Line

#### Windows Command Prompt

1. Open Command Prompt.
2. Use the `move` command. For example, to move a folder named `source_folder` to `destination_folder`, run:

move pathtosource_folder pathtodestination_folder

#### Windows PowerShell

1. Open PowerShell.
2. Use the `Move-Item` cmdlet:

Move-Item -Path "pathtosource_folder" -Destination "pathtodestination_folder"

#### macOS / Linux Terminal

1. Open the Terminal.
2. Use the `mv` command. For example:

mv /path/to/source_folder /path/to/destination_folder

### Moving a Folder Using File Explorer (GUI)

#### Windows

1. Open File Explorer.
2. Navigate to the folder you want to move.
3. Right-click on the folder and select **Cut**.
4. Navigate to the destination directory, right-click, and select **Paste**.

#### macOS

1. Open Finder.
2. Locate the folder you want to move.
3. Right-click on the folder and select **Cut** (or use `Command + C`).
4. Navigate to the destination, right-click, and select **Paste Item** (or use `Command + V`).

### Moving a Folder in Docker

If you are working in a Docker environment and need to move a folder within a Docker container, you can use the `docker exec` command to execute commands inside the running container:

1. **Identify Your Container ID or Name**: Use `docker ps` to list your containers.

2. **Use the `mv` Command**: Run the following command:

docker exec <container_id_or_name> mv /path/to/source_folder /path/to/destination_folder

### Conclusion

By following these steps, you should be able to move a folder within your operating system or development environment. If you have specific requirements or if you encounter any issues, feel free to provide more details for further assistance!

Here are several steps you can take to resolve this issue:

### 1. Reinstall Dependencies

Sometimes, issues like this can arise from incomplete installations. You can try reinstalling your project dependencies:

– **If using npm**:

rm -rf node_modules package-lock.json
  npm install

– **If using Yarn**:

rm -rf node_modules yarn.lock
  yarn install

This will remove the existing `node_modules` directory and lock files, and then reinstall everything from scratch.

### 2. Check ajv Version

Ensure that you have the correct version of `ajv` installed. You can check your `package.json` file for the `ajv` entry and make sure it's compatible with other packages you're using. If it's not present, you can add it:

npm install ajv

or

yarn add ajv

If you have a specific version requirement (like a major version), you can specify it:

npm install ajv@<version>

or

yarn add ajv@<version>

### 3. Update Webpack and Related Packages

Sometimes, errors arise from outdated packages. Make sure that Webpack and any related packages are up to date:

– **To update all packages**:

npm update

or

yarn upgrade

– If you want to check for specific outdated packages, you can use:

npm outdated

or

yarn outdated

### 4. Clear npm Cache

If the above steps do not resolve the issue, you can try clearing the npm cache:

npm cache clean --force

### 5. Check Your Configuration

Ensure that your Webpack configuration files are correctly set up and that there are no typos or missing imports that could lead to this error.

### 6. Check for Nested Node Modules

Sometimes, package dependencies can get tangled in nested `node_modules` directories. You can check for this by running:

npm ls ajv

This command will show you the version of `ajv` being used and where it is located. If there are multiple versions, you may want to consolidate them.

### Conclusion

By following these steps, you should be able to resolve the `Cannot find module 'ajv/dist/compile/codegen'` error. If the issue persists after trying these solutions, please provide additional details about your project setup, such as the contents of your `package.json`, your Webpack configuration, and any other relevant context, so I can assist you further!

Here's how you can transition from using `defaultProps` to default parameters:

### Current Approach Using `defaultProps`

If you have a component that looks like this:

const MyComponent = (props) => {
  return <div>{props.text}</div>;
};

MyComponent.defaultProps = {
  text: 'Default text',
};

### Updated Approach Using Default Parameters

You can modify it to use default parameters like this:

const MyComponent = ({ text = 'Default text' }) => {
  return <div>{text}</div>;
};

### Advantages of Using Default Parameters

1. **Clarity**: It makes it clearer what the default values are right at the function definition.
2. **Simplification**: It reduces the need for additional lines of code to set up `defaultProps`.
3. **Future-proofing**: This change aligns with future versions of React where `defaultProps` on function components will no longer be supported.

### Example

Here's a complete example:

**Before (with `defaultProps`):**

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

Greeting.defaultProps = {
  name: 'Guest',
};

**After (using default parameters):**

const Greeting = ({ name = 'Guest' }) => {
  return <h1>Hello, {name}!</h1>;
};

### Conclusion

Updating your function components to use default parameters instead of `defaultProps` will help you avoid potential issues in future React versions. If you have multiple components that use `defaultProps`, consider updating them similarly to maintain consistency throughout your codebase. If you need any more help with this or have specific components to discuss, feel free to ask!