カスタムブロックつくる勉強

function custom_styles(): void {
	/**
	 * Enqueue block styles.
	 */
	wp_enqueue_block_style(
		'core/button',
		array(
			'handle' => 'custom-core-button',
			'src'    => get_parent_theme_file_uri( 'build/styles/blocks/core/button.css' ),
			'path'   => get_parent_theme_file_path( 'build/styles/blocks/core/button.css' ),
		)
	);

	/**
	 * Register block styles.
	 */
	register_block_style(
		'core/button',
		array(
			'name'         => 'arrow-right',
			'label'        => '矢印つき',
			'style_handle' => 'custom-core-button',
		)
	);
}

add_action( 'init', 'custom_styles' );

createBlock( 'core/paragraph', {
    content: attributes.message,
} );

function addListBlockClassName( settings, name ) {
    if ( name !== 'core/list' ) {
        return settings;
    }

    return {
        ...settings,
        supports: {
            ...settings.supports,
            className: true,
        },
    };
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-plugin/class-names/list-block',
    addListBlockClassName
);

/**
 * WordPress dependencies
 */
import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
import { useSelect } from '@wordpress/data';

const Render = () => {
	// Get the blocks from the editor.
	const blocks = useSelect(
		( select ) => select( blockEditorStore ).getBlocks(),
		[]
	);

	return (
		<PluginPostStatusInfo>
			{ `There are ${ blocks.length } blocks on the page` }
		</PluginPostStatusInfo>
	);
};

registerPlugin( 'block-developer-cookbook-word-counter', {
	render: Render,
} );

import { store as blockEditorStore } from '@wordpress/block-editor';

const blocks = useSelect(
    ( select ) => select( blockEditorStore ).getBlocks(),
    []
);

const blocks = useSelect(
    ( select ) => select('core/block-editor').getBlocks(),
    []
);

const { lockPostSaving, unlockPostSaving } = useDispatch( editorStore );

// Import the original config from the @wordpress/scripts package.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
// Import the helper to find and generate the entry points in the src directory
const { getWebpackEntryPoints } = require( '@wordpress/scripts/utils/config' );
// Export the webpack config.
module.exports = {
	...defaultConfig,
	entry: {
	    ...getWebpackEntryPoints(),
	    variations: './resources/js/variations.js',
	    'variation-styles': './resources/scss/variation.scss',
	},
};

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

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'
		),
		'scripts/theme': path.resolve( process.cwd(), 'src/scripts/theme.js' ),
		...blockEntriesObj,
	}
        ...
};

<?php
$context = array_merge(
   $attributes,
   array(
       'slides'       => array(),
       'currentSlide' => 0,
       'totalSlides'  => 0,
   )
);


?>
<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
   data-wp-interactive='{ "namespace": "gellery-slider" }'
   <?php echo data_wp_context( $context ); ?>
   >
   <div class="slider-container">
       <?php echo wp_kses_post( $content ); ?>
   </div>
   <div class="buttons">
       <button aria-label="go to previous slide">&lt;</button>
       <p>1/10</p>
       <button aria-label="go to next slide">&gt;</button>
   </div>
</div>

<?php
$context = array_merge(
	$attributes,
	array(
		'slides'       => array(),
		'currentSlide' => 0,
		'totalSlides'  => 0,
	)
);
?>
<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
	data-wp-interactive='{ "namespace": "gallery-slider" }'
	<?php echo wp_interactivity_data_wp_context( $context ); ?>
>
	<div class="slider-container">
		<?php echo wp_kses_post( $content ); ?>
	</div>
	<div class="buttons">
		<button aria-label="go to previous slide">&lt;</button>
		<p>1/10</p>
		<button aria-label="go to next slide">&gt;</button>
	</div>
</div>

const { state, actions, callbacks } = store( "gallery-slider", {
	state: {},
	actions: {
		prevSlide: () => {
			console.log( 'Previous image' );
		},
		nextSlide: () => {
			console.log( 'Next image' );
		},
	},
	callbacks: {},
} );

return `${ ctx.currentSlide + 1 }/${ ctx.totalSlides }`;