Gutenberg ??? ???? ??? ?? ??? ???? ?? ? ??? ???? ???? ???? ????. 1. ?? ?? ?? : ?? WordPress, Node.js ? @WordPress/Scripts ??; 2. PHP? ???? ??? ???? JavaScript?? ??? ?? ? ?? ??? ?????. 3. NPM? ?? JS ??? ???? ?? ??? ?????. 4. ??? ?? ? ? ??? ???? ???? ????? ??? ????? ???? ??? ? ?? ??? ?????. ? ??? ?? ??? ????? ??? ???? ??? ? ????.

??? Gutenberg ??? ??? ?? ??? ????. ?? WordPress? ?? ?? ????? ?? ??? ???? ?? ??? ????. Gutenberg? "Blocks"? ?? ???? ???? WordPress? ??? ??????. ? ??? ??? ? ??? ?????. ??? ??? ??? ????? ?? ???? ???? ???? ???? ??? ? ????.

??? ???? ???? ? ????? ? ?? ???? ??? ?????.

?? : ?? ??? ??????

?? ??? ???? ?? ??? ??? WordPress ??? ??? ??????. ?? ?? XAMPP? ?? ?? ?? ??? ???? ??? ???? ?? ? ? ????.

• ?? ??? WordPress? ??????
• Node.js ? NPM ?? (JavaScript ?? ?? ?)
• ?? ?? ???? ?? ?? ? @wordpress/scripts ??? ??

?? ??? ?? ??? ???? ??? ? ????.

 NPM ?? --save-dev @wordpress/????

?? ?? ?? ?? ????? ????? ??? /blocks/my-first-block/ ? ?? ?? ??? ??????.

?? ?? ?? : ??? ???? ?? ??? ?????

Gutenberg ??? ????? ? ???? ?????. PHP? ??? ???? ? ???? JavaScript? ??? ??? ??? ???? ? ????? .

PHP ?? (?? ??)

?? functions.php ??? ?? ??? ????? ???????????.

 ?? ???? _my_first_block () {
    wp_register_script (
        '? ? ??',
        get_template_directory_uri (). '/blocks/my-first-block/build/index.js',
        ?? ( 'wp-blocks', 'wp-element')
    );

    register_block_type ( 'my-plugin/first-block', ?? (
        'editor_script'=> 'my first-block',
    ));
}
add_action ( 'init', 'register_my_first_block');

? ??? WordPress ??? ??? JS ??????? ?? ???? ??? ?? ??? ?????.

?? ???? ?? (?? ??)

/blocks/my-first-block/src/index.js ? ?? ??? ??????.

 const {registerBlockType} = wp.Blocks;
const {richtext} = wp.editor;

RegisterBlockType ( 'my-plugin/first-block', {
    ?? : '? ? ??',
    ??? : '???',
    ???? : '??',

    ?? : () => {
        ?? (
            <RichText
                tagname = "p"
                ?? ?? ? = "?? ??? ?? ..."
            />
        );
    },

    ?? : () => {
        return <richtext.content tagname = "p"value = "??? ?? ??????" />;
    },
});

????? ????? ? ??? ??? ????.

?? ? ?? : NPM?? JS ??? ??????

Gutenberg ??? JavaScript? ?????? ?? ? ??? ???? ????????. WordPress?? ???? ???? ??? ?? ??? ????? ??? ? ? ????.

???? ?? ?????? package.json ??? ??? ?? ??? ??????.

 {
  "??": "My-First-Block",
  "??": "1.0.0",
  "????": {
    "??": "wp-scripts build ./blocks/my-first-block/src/index.js"
  }
}

?? ?? ?? :

 NPM ?? ??

JS ??? ??? ??? build ??? ?? ???? ?? ??? ??????????.

?? FAQ

• ???? ?? ? ? ????? WordPress Dashicons ?? ??? ??? ??? ? ????.

• ??? ???? ????? JS? ????? ?????? ? PHP ?? ??? ???? ??????.

• ?? ???? ????? ?? ????? --watch ?? ??? ???? ????? ?? ??? ?? ???? ?? ? ? ????.

   npx wp-scripts build ./blocks/my-first-block/src/index.js-watch

  ---

  ????? ?? ??. Gutenberg ??? ???? ???? ??? ??? ?? ??? ?? ? ?? ???? ???? ??? ???? ????. ?? ??? ???? ???? ?? ??? ??? ??? ? ????.

  ? ??? ??? Gutenberg ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!