{"id":228308,"date":"2022-10-18T16:37:00","date_gmt":"2022-10-18T13:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228308"},"modified":"2022-11-09T01:47:55","modified_gmt":"2022-11-08T22:47:55","slug":"dodaj-punkty-wejscia-do-skryptu-tworzenia-bloku-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-punkty-wejscia-do-skryptu-tworzenia-bloku-wordpress\/","title":{"rendered":"Dodaj punkty wej\u015bcia do skryptu tworzenia bloku WordPress"},"content":{"rendered":"\n<p>Kiedy po raz pierwszy tworzysz blok za pomoc\u0105 skryptu tworzenia bloku WordPress, kt\u00f3ry <code>npm init @wordpress\/block<\/code>go u\u017cywa, udost\u0119pnia punkt wej\u015bcia do <code>\/src\/index.js<\/code>, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do skompilowania wszystkich zasob\u00f3w i styl\u00f3w opartych na blokach.<\/p>\n<p>Czasami chcesz doda\u0107 inne punkty wej\u015bcia, na przyk\u0142ad mo\u017cesz u\u017cy\u0107 blok\u00f3w edytora blok\u00f3w WordPress (Gutenberg) w innym miejscu edytora, na przyk\u0142ad <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">na stronie ustawie\u0144<\/a> lub w konfiguratorze.<\/p>\n<p>Ten przewodnik pomaga rozszerzy\u0107 skrypt tworzenia bloku WordPress <code>webpack.config<\/code>, aby mo\u017cna by\u0142o doda\u0107 te dodatkowe punkty wej\u015bcia.<\/p>\n<h2>Warunki wst\u0119pne<\/h2>\n<ul>\n<li>Zapoznaj si\u0119 z <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzeniem wtyczek do WordPress Gutenberg za pomoc\u0105 skryptu tworzenia bloku<\/a><\/li>\n<\/ul>\n<h2>Utw\u00f3rz swoje pliki<\/h2>\n<p>Kontynuuj\u0105c <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodnik po skrypcie tworzenia blok\u00f3w<\/a>, stworzymy kilka plik\u00f3w w naszym rozwi\u0105zaniu:<\/p>\n<h3>Tworzy\u0107<code>\/src\/admin.js<\/code><\/h3>\n<p>Ten plik b\u0119dzie g\u0142\u00f3wnym punktem wej\u015bcia dla ka\u017cdego Reacta, kt\u00f3ry chcemy doda\u0107 do ekranu administratora WordPress (na przyk\u0142ad, je\u015bli chcieliby\u015bmy <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zbudowa\u0107 stron\u0119 opcji, aby kontrolowa\u0107 nasze ustawienia za pomoc\u0105 komponent\u00f3w Gutenberg<\/a>.<\/p>\n<p>Utw\u00f3rz plik <code>\/src\/admin.js<\/code>i wklej nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Tak naprawd\u0119 nic jeszcze nie robimy w tym pliku, co b\u0119dzie przedmiotem p\u00f3\u017aniejszych przewodnik\u00f3w. Na razie po prostu wstawiamy troch\u0119 kodu, aby\u015bmy mogli przetestowa\u0107 dane wyj\u015bciowe.<\/p>\n<p>Jednak importuje <code>\/src\/admin.scss<\/code>plik, kt\u00f3ry skompiluje si\u0119 tak, aby zawiera\u0142 wszystkie nasze niestandardowe CSS dla administratora WordPress.<\/p>\n<h3>Tworzy\u0107<code>\/src\/admin.scss<\/code><\/h3>\n<p>Utw\u00f3rz plik <code>\/src\/admin.scss<\/code>i dodaj troch\u0119 testowego SCSS:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>Ponownie, ten kod jest bezu\u017cyteczny, poza sprawdzeniem, czy SCSS zostanie skompilowany.<\/p>\n<h3>Tworzy\u0107<code>\/webpack.config.js<\/code><\/h3>\n<p>Utw\u00f3rz plik w katalogu g\u0142\u00f3wnym wtyczki o nazwie <code>webpack.config.js<\/code>, wkr\u00f3tce om\u00f3wimy, co umie\u015bci\u0107 w tym pliku.<\/p>\n<h2>Edytuj g\u0142\u00f3wny plik PHP wtyczki<\/h2>\n<p>Je\u015bli pod\u0105\u017ca\u0142e\u015b za poprzednim przewodnikiem, ta wtyczka b\u0119dzie nazywa\u0107 si\u0119 <code>wholesome-plugin.php<\/code>.<\/p>\n<p>W tym pliku chcemy zarejestrowa\u0107 skrypty dla obszaru administracyjnego, kt\u00f3re zostan\u0105 wyprowadzone przez nasz\u0105 konfiguracj\u0119 webpacka. Dodaj nast\u0119puj\u0105c\u0105 funkcj\u0119 na dole tego pliku:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>Prawie skopiowali\u015bmy kod z poprzedniego bloku w kolejce, ale uczynili\u015bmy go odpowiednim dla naszych oczekiwanych plik\u00f3w wyj\u015bciowych <code>\/build\/admin.js<\/code>i <code>\/build\/admin.css<\/code>. Zauwa\u017c, \u017ce \u0142adujemy r\u00f3wnie\u017c specjalnie wygenerowany <code>\/build\/admin.asset.php<\/code>plik, kt\u00f3ry automatycznie doda wszystkie zale\u017cno\u015bci edytora blok\u00f3w WordPress (Gutenberg) do naszego skryptu administratora.<\/p>\n<h2>Edytuj<code>webPack.config<\/code><\/h2>\n<p>W kroku 2 utworzyli\u015bmy plik <code>webpack.config.js<\/code>, w tym pliku dodajemy nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Ten kod importuje <code>webpack.config<\/code>z <code>@wordpress\/scripts<\/code>. To jest kod, kt\u00f3ry jest uruchamiany za ka\u017cdym razem, gdy uruchamiasz <code>npm start<\/code>w swoim rozwi\u0105zaniu.<\/p>\n<p>Wszystko, co robimy, to bierzemy t\u0119 konfiguracj\u0119 i dodajemy kolejny punkt wej\u015bcia z lini\u0105 <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>Reszta kodu po prostu m\u00f3wi webpackowi, aby u\u017cy\u0142 ustawie\u0144, kt\u00f3re s\u0105 ju\u017c na miejscu (np. <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Skompiluj kod<\/h2>\n<p>Skompiluj wtyczk\u0119 za pomoc\u0105 <code>npm start<\/code>polecenia i zobaczmy, co si\u0119 stanie:<\/p>\n<p>Kompilacja Kodeksu z nowym punktem wej\u015bcia<\/p>\n<p>Skrypt generuje teraz dla nas kilka nowych plik\u00f3w:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 Ten plik PHP jest generowany automatycznie podczas <code>\/src<\/code>kompilacji folderu. Zawiera tablic\u0119 wszystkich przyzwoito\u015bci JavaScript Edytora WordPress (Gutenberg) u\u017cywanych przez nowy punkt wej\u015bcia. Jest on umieszczany w kolejce poprzez g\u0142\u00f3wny <code>wholesome-plugin.php<\/code>plik programu \u0142aduj\u0105cego za pomoc\u0105 dodatkowej funkcji, kt\u00f3r\u0105 wprowadzili\u015bmy.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Jest to plik CSS administratora i jest umieszczany w kolejce za pomoc\u0105 g\u0142\u00f3wnego <code>wholesome-plugin.php<\/code>pliku \u0142aduj\u0105cego za pomoc\u0105 dodatkowej funkcji, kt\u00f3r\u0105 wprowadzili\u015bmy.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Jest to g\u0142\u00f3wny skompilowany plik JavaScript, kt\u00f3ry jest umieszczany w kolejce przez g\u0142\u00f3wny <code>wholesome-plugin.php<\/code>plik programu \u0142aduj\u0105cego za pomoc\u0105 dodatkowej funkcji, kt\u00f3r\u0105 wprowadzili\u015bmy.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 Ten plik jest generowany tylko wtedy, gdy kompilujesz zasoby do trybu programistycznego (tzn. uruchamiasz, <code>npm start<\/code>a nie <code>npm build<\/code>kompilujesz zasoby. Jest to pomocny plik dla debuger\u00f3w, kt\u00f3ry pomaga zidentyfikowa\u0107 nazwy plik\u00f3w i numery wierszy w CSS, je\u015bli wyst\u0105pi\u0105 b\u0142\u0119dy.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 Ten plik jest generowany tylko podczas kompilowania zasob\u00f3w do trybu programistycznego (tzn. uruchamiany, <code>npm start<\/code>a nie <code>npm build<\/code>podczas kompilowania zasob\u00f3w. Jest to plik pomocny dla debuger\u00f3w JavaScript, kt\u00f3ry pomaga zidentyfikowa\u0107 nazwy plik\u00f3w i numery wierszy w przypadku wyst\u0105pienia b\u0142\u0119d\u00f3w.<\/p>\n<\/li>\n<li>\n<p>Sp\u00f3jrz na u\u017cywanie <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post meta p\u00f3l w blokach Gutenberga<\/a><\/p>\n<\/li>\n<li>\n<p>Sp\u00f3jrz na u\u017cycie <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">opcji i ustawie\u0144 w blokach Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Sp\u00f3jrz na tworzenie <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">niestandardowych p\u00f3l meta w Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Sp\u00f3jrz na tworzenie strony <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">opcji i ustawie\u0144 za pomoc\u0105 komponent\u00f3w Gutenberg<\/a><\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kiedy po raz pierwszy tworzysz blok za pomoc\u0105 skryptu tworzenia bloku WordPress za pomoc\u0105 npm init @wordpress\/block, udost\u0119pnia on punkt wej\u015bcia do \/src\/index.js, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do kompilacji&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,919,897,784,752,845],"tags":[1169],"class_list":["post-228308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-kod","category-oprogramowanie-open-source","category-otwarte-zrodlo","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228308"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228308\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}