HAMWORKSのサイトをブロックテーマに変えていく

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @hamworks/wordpress@1.0.0
npm ERR! Found: prettier@2.6.2
npm ERR! node_modules/prettier
npm ERR!   dev prettier@"npm:wp-prettier@2.6.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer prettier@">=3" from @wordpress/prettier-config@3.8.1
npm ERR! node_modules/@wordpress/prettier-config
npm ERR!   dev @wordpress/prettier-config@"3.8.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

node_modules
vendor
build
wp-content/plugins/*
!wp-content/plugins/[original-plugin-name]
wp-content/themes/[original-theme-name]

{
	"extends": [
		"plugin:@wordpress/eslint-plugin/recommended"
	]
}

{
    "name": "hamworks/hamworks",
    "license": "GPL-2.0-or-later",
    "authors": [
        {
            "name": "HAMWORKS Co., Ltd."
        }
    ],
    "require": {
        "php": ">=8.0"
    },
    "config": {
        "allow-plugins": {
            "dealerdirect/phpcodesniffer-composer-installer": true
        }
    },
    "require-dev": {
		"phpcompatibility/phpcompatibility-wp": "*",
        "wp-coding-standards/wpcs": "^3.0",
        "squizlabs/php_codesniffer": "^3.9.0",
        "dealerdirect/phpcodesniffer-composer-installer": "^1.0"
    },
	"scripts": {
		"format": "phpcbf --standard=./phpcs.xml.dist --report-summary --report-source",
		"lint": "phpcs --standard=./phpcs.xml.dist"
	}
}

echo "Install Composer"
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php composer-setup.php --quiet
rm composer-setup.php

echo "composer install"
./composer.phar install --optimize-autoloader --prefer-dist --no-dev

echo "npm install"
npm ci --silent
npm run build 

rsync -rltgoDzvO --delete ./wp-content/mu-plugins/ ./../wp-content/mu-plugins/
rsync -rltgoDzvO --delete ./wp-content/plugins/[original-plugin-name]-* ./../wp-content/plugins/
rsync -rltgoDzvO --delete ./wp-content/themes/[original-theme-name]/ ./../wp-content/themes/[original-theme-name]/
rm -rf node_modules

name: InstaWP WordPress Testing

on:
  pull_request:
    types: [opened]

jobs:
  create-wp-for-testing:
    runs-on: ubuntu-latest
    steps:
      - uses: instawp/wordpress-testing-automation@main
        with:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
          INSTAWP_TOKEN: ${{secrets.INSTAWP_TOKEN}}
          INSTAWP_TEMPLATE_SLUG: hamworks
          REPO_ID: [REPO_ID_NUMBER]
          INSTAWP_ACTION: create-site-template

name: InstaWP WordPress Testing

on:
  pull_request:
    types: [opened, reopened, synchronize, closed]

jobs:
  create-wp-for-testing:
    runs-on: ubuntu-latest
    steps:
      - uses: instawp/wordpress-testing-automation@main
        if: github.event.action != 'closed' && github.event.action != 'merged'
        with:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
          INSTAWP_TOKEN: ${{secrets.INSTAWP_TOKEN}}
          INSTAWP_TEMPLATE_SLUG: hamworks
          REPO_ID: [REPO_ID_NUMBER]
          INSTAWP_ACTION: create-site-template

  destroy-wp-after-testing:
    runs-on: ubuntu-latest
    steps:
      - uses: instawp/wordpress-testing-automation@main
        if: github.event.action == 'closed' || github.event.action == 'merged'
        id: destroy-wp
        with:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
          INSTAWP_TOKEN: ${{secrets.INSTAWP_TOKEN}}
          INSTAWP_TEMPLATE_SLUG: hamworks
          REPO_ID: [REPO_ID_NUMBER]
          INSTAWP_ACTION: destroy-site

{
	"settings": {
		"appearanceTools": true,
		"color": {
+			"defaultDuotone": false,
+			"defaultGradients": false,
+			"defaultPalette": false,
			"palette": [
				{
					"color": "#056e76",
					"name": "Primary - 800",
					"slug": "primary-800"
				},
				{
					"color": "#25b7c0",
					"name": "Primary - 500",
					"slug": "primary-500"
				},
				{
					"color": "#d4efef",
					"name": "Primary - 100",
					"slug": "primary-100"
				},
				{
					"color": "#444444",
					"name": "Text",
					"slug": "text"
				},
				{
					"color": "#ffffff",
					"name": "White",
					"slug": "white"
				},
				{
					"color": "#e5e5e5",
					"name": "Neutral - 200",
					"slug": "neutral-200"
				}
			]
		},
		"layout": {
			"contentSize": "800px",
			"wideSize": "1000px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "footer",
			"name": "footer"
		}
	],
	"version": 2,
	"$schema": "https://schemas.wp.org/wp/6.5/theme.json"
}

{
	"settings": {
		"typography": {
			"fluid": {
				"minViewportWidth": "375px",
				"maxViewportWidth": "1000px"
			},
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				}
			],
			"fontSizes": [
				{
					"fluid": false,
					"name": "Small",
					"size": "0.875rem",
					"slug": "small"
				},
				{
					"fluid": false,
					"name": "Medium",
					"size": "1rem",
					"slug": "medium"
				},
				{
					"fluid": false,
					"name": "Large",
					"size": "1.25rem",
					"slug": "large"
				},
				{
					"fluid": false,
					"name": "Extra Large",
					"size": "1.5rem",
					"slug": "x-large"
				},
				{
					"fluid": {
						"max": "1.875rem",
						"min": "1.5rem"
					},
					"name": "Extra Extra Large",
					"size": "1.875rem",
					"slug": "xx-large"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	}
}

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif

"fontFamilies": [
    {
        "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
        "name": "System Font",
        "slug": "system-font"
    },
+    {
+        "fontFamily": "'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, sans-serif",
+        "name": "游ゴシック",
+        "slug": "yu-gothic-font"
+    }
]

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'hamworks-fontplus', [FONTPLUS_URL], array(), wp_get_theme()->get( 'Version' ), false );
} );

{
    "name": "MAX: 120px",
    "size": "clamp(3.75rem, 1.556rem + 9.36vw, 7.5rem)",
    "slug": "90"
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [ './**/*.{html,php,js,tsx}' ],
	theme: {
		screens: {
			sm: '600px',
			md: '782px',
			lg: '960px',
			xl: '1280px',
		},
	},
	corePlugins: {
		preflight: false,
	},
};

/** @type {import('tailwindcss').Config} */
const config = require( '../../../tailwind.base.config' );
module.exports = {
	...config,
	content: [
		'./{404,home,front-page,index,archive,page,single,sidebar,header,footer,search}.php',
		'./template-parts/**/*.php',
		'./inc/**/*.php',
		'./parts/**/*.{html,php}',
		'./templates/**/*.{html,php}',
		'./patterns/**/*.{html,php}',
	],
};

module.exports = {
	plugins: {
		'tailwindcss/nesting': {},
		tailwindcss: {},
		autoprefixer: {},
	},
};

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
const path = require( 'path' );
const glob = require( 'glob' );

/**
 * 各ブロックのCSSファイルをentryに追加するためのオブジェクトを作成
 */
const blockStyleDir = 'src/styles';
const blockEntries = glob
	.sync( 'blocks/**/*.css', {
		cwd: blockStyleDir,
	} )
	.map( ( key ) => [
		`styles/${ key.replace( '.css', '' ) }`,
		path.resolve( process.cwd(), blockStyleDir, key ),
	] );
const blockEntriesObj = Object.fromEntries( blockEntries );

module.exports = {
	...defaultConfig,
	entry: {
		...defaultConfig.entry,
		'styles/theme/theme': path.resolve(
			process.cwd(),
			'src/styles/theme/theme.css'
		),
		...blockEntriesObj,
	},
	plugins: [
		// Include WP's plugin config.
		...defaultConfig.plugins,

		// Removes the empty `.js` files generated by webpack but
		// sets it after WP has generated its `*.asset.php` file.
		new RemoveEmptyScriptsPlugin( {
			stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
		} ),
	],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

 1:1  ✖  Unexpected unknown at-rule "@tailwind"  at-rule-no-unknown
 2:1  ✖  Unexpected unknown at-rule "@tailwind"  at-rule-no-unknown
 3:1  ✖  Unexpected unknown at-rule "@tailwind"  at-rule-no-unknown

{
	"extends": "@wordpress/stylelint-config",
	"rules": {
		"at-rule-no-unknown": null
	}
}

add_action( 'init', 'hamworks_styles' );
function hamworks_styles(): void {
	wp_register_style( 'hamworks-style', get_parent_theme_file_uri( 'build/styles/theme/theme.css' ), array(), '1.0.0' );
	add_editor_style( 'build/styles/theme/theme.css' );
}

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'hamworks-style' );
	...
} );

<!-- wp:cover {"url":"http://localhost:12342/wp-content/uploads/2024/05/subvisual.jpg","id":1833,"dimRatio":0,"customOverlayColor":"#3b4b4e","isUserOverlayColor":true,"minHeight":160,"minHeightUnit":"px","align":"full","className":"h-40 md:h-72","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull h-40 md:h-72" style="min-height:160px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#3b4b4e"></span><img class="wp-block-cover__image-background wp-image-1833" alt="" src="http://localhost:12342/wp-content/uploads/2024/05/subvisual.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
		<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"xx-large"} -->
			<h1 class="wp-block-heading has-xx-large-font-size">SERVICE</h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-500"}}}},"textColor":"primary-500","fontSize":"x-large"} -->
			<p class="has-primary-500-color has-text-color has-link-color has-x-large-font-size">HAMWORKSのサービス</p>
			<!-- /wp:paragraph --></div>
		<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: featured
 */
?>
<!-- Pattern code goes here. -->

<?php
/**
 * Title: 固定ページのタイトル
 * Slug: hamworks/page-title
 * Categories: featured
 */
?>
<!-- wp:cover {"url":"http://localhost:12342/wp-content/uploads/2024/05/subvisual.jpg","id":1833,"dimRatio":0,"customOverlayColor":"#3b4b4e","isUserOverlayColor":true,"minHeight":160,"minHeightUnit":"px","align":"full","className":"h-40 md:h-72","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull h-40 md:h-72" style="min-height:160px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#3b4b4e"></span><img class="wp-block-cover__image-background wp-image-1833" alt="" src="http://localhost:12342/wp-content/uploads/2024/05/subvisual.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
		<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"xx-large"} -->
			<h1 class="wp-block-heading has-xx-large-font-size">SERVICE</h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-500"}}}},"textColor":"primary-500","fontSize":"x-large"} -->
			<p class="has-primary-500-color has-text-color has-link-color has-x-large-font-size">HAMWORKSのサービス</p>
			<!-- /wp:paragraph --></div>
		<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<?php
/**
 * Title: 固定ページのタイトル
 * Slug: hamworks/page-title
 * Categories: featured
 */
?>
<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/subvisual.jpg","id":1,"dimRatio":0,"customOverlayColor":"#3b4b4e","isUserOverlayColor":true,"minHeight":160,"minHeightUnit":"px","align":"full","className":"h-40 md:h-72","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull h-40 md:h-72" style="min-height:160px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#3b4b4e"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/subvisual.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
		<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"xx-large"} -->
			<h1 class="wp-block-heading has-xx-large-font-size">SERVICE</h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-500"}}}},"textColor":"primary-500","fontSize":"x-large"} -->
			<p class="has-primary-500-color has-text-color has-link-color has-x-large-font-size">HAMWORKSのサービス</p>
			<!-- /wp:paragraph --></div>
		<!-- /wp:group --></div></div>
<!-- /wp:cover -->

wp_enqueue_block_style(
	'core/post-terms',
	array(
		'handle' => 'hamworks-core-post-terms',
		'src'    => get_parent_theme_file_uri( 'build/styles/blocks/core/post-terms.css' ),
		'path'   => get_parent_theme_file_path( 'build/styles/blocks/core/post-terms.css' ),
	)
);

.wp-block-post-terms {
	@apply flex flex-wrap gap-1;
}

.wp-block-post-terms a {
	@apply text-white bg-primary-500 transition-colors py-0.5 px-1 no-underline;

	&:hover {
		@apply text-white bg-primary-800;
	}
}

.wp-block-post-terms__separator {
	@apply hidden;
}

"selector-class-pattern": ["", {}]

.wp-block-button .wp-block-button__link {
	@apply transition-colors;
}

.wp-block-button.is-style-arrow .wp-block-button__link {
	@apply relative pl-14 bg-transparent;
	z-index: 1;

	&::after {
		content: '';
		width: 7px;
		height: 11px;
		background-image: url(../../../../assets/images/arrow.svg);
		@apply bg-no-repeat block absolute top-1/2 left-5 bg-primary-500 -translate-y-1/2;
	}

	&::before {
		content: '';
		z-index: -1;
		transition: width 0.4s ease-in-out;
		@apply bg-primary-500 absolute top-0 left-0 block w-11 h-full;
	}

	&:hover {
		@apply !text-white;

		&::before {
			@apply w-full;
		}
	}
}

.wp-block-button__link:has(img) {
	@apply flex items-center gap-1;
}

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"hamrobo"} -->
<figure class="wp-block-image size-large hamrobo"><img src="http://localhost:12342/wp-content/themes/hamworks/assets/images/hamrobo.svg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

.wp-block-image.hamrobo {
	@apply transition-transform duration-300;
	height: 80px;

	&:hover {
		@apply -translate-y-4;
	}
}

// ページトップへ戻るボタンの処理
document.addEventListener( 'DOMContentLoaded', function () {
	const pageTopButton: Element | null = document.querySelector( '.pagetop' );
	if ( pageTopButton ) {
		pageTopButton.classList.add( 'is-hidden' );

		window.addEventListener( 'scroll', function () {
			if ( window.scrollY > 150 ) {
				pageTopButton.classList.remove( 'is-hidden' );
			} else {
				pageTopButton.classList.add( 'is-hidden' );
			}
		} );
	}
} );

.wp-block-image.pagetop {
	@apply fixed bottom-4 right-4 transition-opacity duration-300 opacity-100;

	&.is-hidden {
		@apply opacity-0;
	}
}

.editor-styles-wrapper .wp-block-image.pagetop {
	@apply relative;
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	transition: filter 300ms ease-in-out;
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	@apply brightness-75;
}