[add_filter](https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/)()<\/code>\u0444\u0443\u043d\u043a\u0446\u0438\u0438 PHP, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f Javascript [addFilter](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-hooks\/#api-usage)()<\/code>.<\/p>\n\u042f \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 Javascript ES6, \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 ES5, \u043d\u043e \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ES6\/ESNext. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u043e\u0441\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0440 \u0434\u043b\u044f ES6\/ESNext<\/a>. \u042f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 React\/JSX, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u044b\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 Gutenberg<\/a>.<\/p>\n\u0427\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0431\u043b\u043e\u043a\u0430\u0445 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/h2>\n
\u0412 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0445\u0443\u043a\u0430\u0445 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0445 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u041d\u043e \u0441 \u0446\u0435\u043b\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c; \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u044f \u043d\u0430\u0448\u0435\u043b \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440. \u042f \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u0441\u044f \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0430 \u043d\u0435 \u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f.<\/p>\n
\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0440\u0438 \u0448\u0430\u0433\u0430:<\/p>\n
\n- \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440 \u0432
[registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/#registerblocktype)<\/code>\u043c\u0430\u0441\u0441\u0438\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 attributes<\/code>\u043c\u0430\u0441\u0441\u0438\u0432, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0431\u043b\u043e\u043a\u0435. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/li>\n- \u041f\u043e\u0434\u0446\u0435\u043f\u0438\u0442\u0435
edit<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043b\u043e\u043a\u0430 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u043b\u043e\u043a\u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435). \u0412 \u044d\u0442\u043e\u043c \u0445\u0443\u043a\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0446\u0435\u043f\u0438\u0442\u044c\u0441\u044f \u0437\u0430 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 (\u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c) \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\/\u043f\u0430\u043d\u0435\u043b\u044c, \u043b\u0438\u0431\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u043b\u043e\u043a\u0430\u0445. \u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0432\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430, \u0444\u043b\u0430\u0436\u043a\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435.<\/li>\nsave<\/code>\u041e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0439\u0442\u0435 \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b \u0431\u043b\u043e\u043a\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u043a\u0430\u043a \u0437\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430, \u0442\u0430\u043a \u0438 \u0437\u0430 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 (\u0432\u043d\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430). \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c.<\/li>\n<\/ul>\n\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0430\u0440\u0433\u0435\u0442\u0438\u043d\u0433 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0438\u043b\u0438 \u043d\u0430 \u0432\u0441\u0435. \u0423 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0438\u043f\u0443 \u0431\u043b\u043e\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f.<\/p>\n
\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438: \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0445 \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0431\u043b\u043e\u043a. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u043b\u043e\u043a\u0430 \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c (\u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445), \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0434\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u0430\u0448\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c.<\/p>\n
\u0427\u0442\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c (\u043f\u043e\u043a\u0430?)<\/h2>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0431\u043b\u043e\u043a\u0430\u0445. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432 \u0431\u043b\u043e\u043a\u0438, \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c.<\/p>\n
\u041d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u0442\u0438\u043b\u044e \u0431\u043b\u043e\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430<\/h3>\n
\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u043b\u043e\u043a\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u0443\u0437\u0435\u043b \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0431\u043b\u043e\u043a\u0430. \u041f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0446\u0432\u0435\u0442\u0430, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0446\u0432\u0435\u0442 (\u0438\u0437 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0446\u0432\u0435\u0442\u043e\u0432), \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u043b\u0430\u0441\u0441 \u2014 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c.<\/p>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 WordPress \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e, \u0431\u0435\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u00ab\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\u00bb. \u042f \u043f\u043e\u043a\u0430\u0436\u0443 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043e\u0439\u0442\u0438 \u044d\u0442\u043e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435, \u043d\u043e \u043e\u043d \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u0435\u043d \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<\/p>\n
\u0412\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435, \u0437\u0430\u0447\u0435\u043c \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u043b\u043e\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435? \u0412\u0435\u0441\u044c \u0441\u043c\u044b\u0441\u043b \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u0430\u043a \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u0442\u0430\u043a \u0438 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n
\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<\/h3>\n
\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0431\u043b\u043e\u043a\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c \u0431\u043b\u043e\u043a\u0430\u043c \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430. \u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0431\u043b\u043e\u043a\u0430 \u0432 edit<\/code>. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a Cover. \u042f \u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u043b\u043e\u043a\u043e\u0432 Cover \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u00ab\u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432\u00bb \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043b\u043e\u043a Cover \u0441\u0442\u0440\u043e\u0438\u0442 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432\u043d\u0443\u0442\u0440\u0438 edit<\/code>. \u041e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u00ab\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439\u00bb \u043a\u043b\u0430\u0441\u0441 \u0431\u043b\u043e\u043a\u0430 (\u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0447\u0435\u0440\u0435\u0437 \u0444\u0438\u043b\u044c\u0442\u0440\u044b).<\/p>\n\u041d\u043e, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 save<\/code>(\u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435). \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430.<\/p>\n\u0415\u0441\u043b\u0438 \u044f \u043e\u0448\u0438\u0431\u0430\u044e\u0441\u044c \u0432 \u0447\u0435\u043c-\u043b\u0438\u0431\u043e \u0438\u0437 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0433\u043e, \u041f\u041e\u0416\u0410\u041b\u0423\u0419\u0421\u0422\u0410, \u0434\u0430\u0439\u0442\u0435 \u043c\u043d\u0435 \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043d\u0438\u0436\u0435! \u042f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0437\u0443\u0447\u0430\u044e \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433, \u0438 \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u043c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438!<\/p>\n
\u0421 \u044d\u0442\u0438\u043c \u043f\u043e\u043a\u043e\u043d\u0447\u0435\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u0434.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 1. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u043b\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0431\u043b\u043e\u043a \u043e\u0431\u043b\u043e\u0436\u043a\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435.<\/h2>\n
\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043c\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u043b\u043e\u043a\u0438 \u043e\u0431\u043b\u043e\u0436\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u00ab\u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432\u00bb \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0418 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0441 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00bb \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u0431\u043b\u043e\u043a\u0430 \u00ab\u041e\u0431\u043b\u043e\u0436\u043a\u0430\u00bb. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e, \u0431\u043b\u043e\u043a Cover \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n
\u041a\u0441\u0442\u0430\u0442\u0438: \u044d\u0442\u043e \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0431\u043b\u043e\u043a\u043e\u043c Cover, \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u043c \u043d\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c! \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0435\u0441\u043b\u0438 \u0431\u044b \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e; \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0435\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d!<\/p>\n
\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0438 \u0448\u0430\u0433\u0430. \u041d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e PHP, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b Javascript \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440<\/h3>\n
\u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 wp_enqueue_scripts<\/code>\u0445\u0443\u043a\u0435.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\n\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0442\u043e\u043c\u0443 \u043c\u0435\u0441\u0442\u0443, \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442! \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u043d\u0430 ES6 \u0441 \u0432\u0435\u0431-\u043f\u0430\u043a\u0435\u0442\u043e\u043c, \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u0432\u0430\u0448 Javascript, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0441\u0431\u043e\u0440\u043a\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u0430 \u043d\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n
\u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c ‘ wp-edit-post<\/code>‘ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0437\u0434\u043d\u043e.<\/p>\n\u042d\u0442\u043e \u0432\u0435\u0441\u044c PHP, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 Javascript.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442<\/h3>\n
\u041f\u0435\u0440\u0432\u044b\u0439 \u0444\u0438\u043b\u044c\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a blocks.registerBlockType<\/code>\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 .registerBlockType<\/code><\/p>\n\u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0432 Javascript. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u0437\u0434\u0435\u0441\u044c. \u0424\u0443\u043d\u043a\u0446\u0438\u044f addFilter<\/code>\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 wp.hooks<\/code>\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0438\u043c\u0435\u043d \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\naddFilter('hookName', 'namespace', 'functionName', 'priority');<\/code><\/p>\n\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u00abhookName\u00bb, \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 PHP add_filter()<\/code>. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u00ab\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d\u00bb, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0438\u043c\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430 \u0438\u043c\u0435\u043d. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d WordPress (\u00abwp\u00bb). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0438 \u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, ‘\u0438\u043c\u044f_\u0444\u0443\u043d\u043a\u0446\u0438\u0438’, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0443\u044e add_filter()<\/code>\u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0443 PHP. \u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u00ab\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u00bb, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c. \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e add_filter()<\/code>\u0438 \u0442\u0440\u0435\u0442\u0438\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 PHP.<\/p>\n\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0432 Javascript \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 PHP. \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0443, \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e.<\/p>\n
\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043a attribute<\/code>\u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0431\u043b\u043e\u043a\u0430. \u041c\u044b \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 hideOnMobile<\/code>\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0442\u0438\u043f \u0432 boolean<\/code>. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\nfunction addCoverAttribute(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/cover') {\n settings.attributes = Object.assign(settings.attributes, {\n hideOnMobile: {\n type: 'boolean',\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/cover-custom-attribute',\n addCoverAttribute\n);<\/code><\/pre>\n\u0412 \u0441\u0442\u0440\u043e\u043a\u0435 #3<\/code>\u043c\u044b \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0446\u0435\u043b\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0431\u043b\u043e\u043a\u0438 \u0442\u0438\u043f\u0430 ‘ core\/cover<\/code>‘. \u0412\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f blocks.registerBlockType<\/code>\u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u044f \u0431\u043b\u043e\u043a\u0430. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a settings.attributes<\/code>\u043e\u0431\u044a\u0435\u043a\u0442\u0443. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e settings<\/code>.<\/p>\n\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0432 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u041d\u043e \u0432\u0441\u0435 \u0431\u043b\u043e\u043a\u0438 Cover \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0432 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 (\u043f\u0430\u043d\u0435\u043b\u044c \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00bb)<\/h3>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 editor.BlockEdit<\/code>\u0431\u043b\u043e\u043a\u0430. edit<\/code>\u042d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 BlockEdit<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c wp.compose.createHigherOrderComponent<\/code>\u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BlockEdit<\/code>, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u043b\u043e\u043a \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f Cover, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 InspectorAdvancedControls<\/code>(\u044d\u0442\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00bb \u0432 Inspector) \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b ToggleControl<\/code>. \u041c\u044b \u043f\u0438\u0448\u0435\u043c, ToggleControl<\/code>\u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 hideOnMobile<\/code>.<\/p>\nconst coverAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n const { Fragment } = wp.element;\n const { ToggleControl } = wp.components;\n const { InspectorAdvancedControls } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n return (<Fragment>\n <BlockEdit {...props} \/>\n {isSelected && (props.name == 'core\/cover') && \n <InspectorAdvancedControls>\n <ToggleControl\n label={wp.i18n.__('Hide on mobile', 'awp')}\n checked={!!attributes.hideOnMobile}\n onChange={(newval) => setAttributes({ hideOnMobile: !attributes.hideOnMobile })}\n \/>\n <\/InspectorAdvancedControls>\n }\n <\/Fragment>\n );\n };\n}, 'coverAdvancedControls');\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/cover-advanced-control',\n coverAdvancedControls\n);<\/code><\/pre>\n\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b BlockEdit<\/code>, \u0447\u0442\u043e \u043c\u044b \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 #9<\/code>. \u0412 \u0441\u0442\u0440\u043e\u043a\u0435 \u211610 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0431\u043b\u043e\u043a \u0442\u0438\u043f\u043e\u043c Cover, \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c InspectorAdvancedControls<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c ToggleControl<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0432\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 true \u0438 false. \u041c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043a\u0443 \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 hideOnMobile<\/code>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 Inspector, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043b\u044f \u0432\u0430\u0441.<\/p>\n\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043d\u0435\u043b\u0438 \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00bb \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a\u0430\u0445 \u043e\u0431\u043b\u043e\u0436\u043a\u0438:<\/p>\n
![\"\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70271f5a.png\")
<\/a><\/p>\n\u0412\u0432\u043e\u0434 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 hideOnMobile<\/code>. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0430\u0433 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d, \u043d\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442.<\/p>\n\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441<\/h3>\n
\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441 \u0431\u043b\u043e\u043a\u0430. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u0430 blocks.getSaveContent.extraProps<\/code>. \u042d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 save<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u043b\u043e\u043a\u0430. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043d\u0438\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f prop className<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443. \u041c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e, \u0435\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0431\u044b\u043b true<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e. \u042f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 ‘ hide-on-mobile<\/code>‘, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0445\u043e\u0442\u0438\u0442\u0435.<\/p>\nfunction coverApplyExtraClass(extraProps, blockType, attributes) {\n const { hideOnMobile } = attributes;\n\u00a0\n if (typeof hideOnMobile !== 'undefined' && hideOnMobile) {\n extraProps.className = extraProps.className + ' hide-on-mobile';\n }\n return extraProps;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.getSaveContent.extraProps',\n 'awp\/cover-apply-class',\n coverApplyExtraClass\n);<\/code><\/pre>\n\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c \u0437\u0430 \u0441\u0435\u0431\u044f. \u0412 \u0441\u0442\u0440\u043e\u043a\u0435 #4<\/code>\u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 hideOnMobile<\/code>\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u043d true<\/code>. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a className<\/code>\u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441.<\/p>\n\u0421\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0440\u0435\u043c\u044f \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u00ab\u0441\u043a\u0440\u044b\u0442\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435\u00bb, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0431\u043b\u043e\u043a\u0443 \u00ab\u041e\u0431\u043b\u043e\u0436\u043a\u0430\u00bb \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432\u043a\u043b\u044e\u0447\u0435\u043d.<\/p>\n
![\"\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70343817.png\")
<\/a><\/p>\n\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e CSS \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0430\u0448\u0435\u0439 \u0442\u0435\u043c\u044b. \u0427\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e;<\/p>\n
.wp-block-cover.hide-on-mobile { display: none; }\n@media (min-width: 480px) {\n .wp-block-cover.hide-on-mobile { display: block; }\n}<\/code><\/pre>\n\u041f\u0440\u0438\u043c\u0435\u0440 2. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u00ab\u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u00bb \u0441 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u00ab\u0420\u0430\u0441\u043f\u043e\u0440\u043a\u0430\u00bb<\/h2>\n
\u0414\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0446\u0432\u0435\u0442\u0430 \u0432 \u0431\u043b\u043e\u043a Spacer. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u043b\u043e\u043a Spacer \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043a\u0440\u043e\u043c\u0435 \u0432\u044b\u0441\u043e\u0442\u044b. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u043b\u043e\u043a\u0430 Spacer. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u0435 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u00ab\u043f\u043e\u043b\u043e\u0441\u043a\u0438\u00bb \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0432 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c (\u0434\u0440\u0443\u0433\u043e\u0439) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 withColors<\/code>. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u043c \u0443\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c editor.BlockEdit<\/code>\u043d\u0430\u043c compose<\/code>\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0446\u0432\u0435\u0442\u0430. \u041e\u0434\u0438\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0430\u0433 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u0434 \u0446\u0432\u0435\u0442\u0430 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0446\u0432\u0435\u0442\u043e\u0432). \u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 withColors<\/code>. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c <a href="https:\/\/wordpress.mediadoma.com\/ru\/kak-dobavit-nastrojki-cveta-v-svoj-sobstvennyj-blok-gutenberga\/" title="\u043f\u043e\u0441\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430 \u0438 withColors<\/code>\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e» >\u043f\u043e\u0441\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430 \u0438 withColors<\/code>\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e<\/a>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0442\u0430\u043b\u0438\u0441\u044c.<\/p>\n\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u043c\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435; \u0433\u0434\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440. \u0420\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0431\u043b\u043e\u043a Spacer \u0432\u043d\u0443\u0442\u0440\u0438 a div<\/code>\u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u043e\u0431\u0435\u0440\u0442\u043a\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c div<\/code>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043a\u043e\u0433\u0434\u0430 \u0431\u043b\u043e\u043a \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u043b\u043e\u043a\u0430 WordPress \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u0431\u043b\u043e\u043a\u0443 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d, \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430. \u041e\u0434\u0438\u043d CSS \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442 \u044d\u0442\u043e. \u042f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n\u0428\u0430\u0433\u0438 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u0442\u0430\u0432\u0438\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u0430 PHP. \u0417\u0430\u0442\u0435\u043c \u0432 Javascript \u043c\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c attributes<\/code>\u043e\u0431\u044a\u0435\u043a\u0442, edit<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Spacer \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, save<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Spacer.<\/p>\n\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440<\/h3>\n
\u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 wp_enqueue_scripts<\/code>\u0445\u0443\u043a\u0435.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\n\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u0441\u043a\u0440\u0438\u043f\u0442\u0443. \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c ‘ wp-edit-post<\/code>‘ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0437\u0434\u043d\u043e.<\/p>\n\u042d\u0442\u043e \u0432\u0435\u0441\u044c PHP, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 Javascript.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h3>\n
\u041a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440 blocks.registerBlockType<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a attributes<\/code>\u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0431\u043b\u043e\u043a\u0430.<\/p>\n\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 withColors<\/code>\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u0418\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430 backgroundColor<\/code>, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d customBackgroundColor<\/code>. \u0412\u0441\u0435 \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u0435\u043c \u043f\u043e\u0441\u0442\u0435 \u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0446\u0432\u0435\u0442\u0430 \u0432 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0435<\/a>. \u041e\u0431\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0431\u043b\u043e\u043a\u0430\u043c \u0442\u0438\u043f\u0430 Spacer.<\/p>\nfunction addSpacerAttributes(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/spacer') {\n settings.attributes = Object.assign(settings.attributes, {\n backgroundColor: {\n type: 'string',\n },\n customBackgroundColor: {\n type: 'string'\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/spacer-background-attribute',\n addSpacerAttributes\n);<\/code><\/pre>\n\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c ColorSettings \u0432 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440<\/h3>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u0448\u0430\u0433 \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430 \u0432 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 Spacer \u043f\u0443\u0442\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 editor.BlockEdit<\/code>.<\/p>\nconst spacerInspectorControls = wp.compose.compose(\n wp.blockEditor.withColors({backgroundColor: 'background-color'}),\n\u00a0\n wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n\u00a0\n if (props.name !== 'core\/spacer') {\n return(<BlockEdit {...props} \/>);\n }\n\u00a0\n const { Fragment } = wp.element;\n const { InspectorControls, PanelColorSettings } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n const { backgroundColor, setBackgroundColor } = props;\n\u00a0\n let newClassName = (attributes.className != undefined)? attributes.className: '';\n let newStyles = {...props.style};\n if (backgroundColor != undefined) {\n if (backgroundColor.class == undefined) {\n newStyles.backgroundColor = backgroundColor.color;\n } else {\n newClassName += ' ' + backgroundColor.class;\n }\n }\n const newProps = {\n ...props,\n attributes: {\n ...attributes,\n className: newClassName\n },\n style: newStyles\n }\n\u00a0\n return (<Fragment>\n <div style={newStyles} className={newClassName}>\n <BlockEdit {...newProps} \/>\n {isSelected && (props.name == 'core\/spacer') && \n <InspectorControls>\n <PanelColorSettings \n title={wp.i18n.__('Color Settings', 'awp')}\n colorSettings={[\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: wp.i18n.__('Background color', 'awp')\n }\n ]}\n \/>\n <\/InspectorControls>\n }\n <\/div>\n <\/Fragment>\n );\n };\n}, 'spacerInspectorControls'));\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/spacer-inspector-control',\n spacerInspectorControls\n);<\/code><\/pre>\n\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c compose<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u044d\u0442\u0438\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c, \u0438 withColors<\/code>. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 withColors<\/code>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 withColors<\/code>\u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 backgroundColor<\/code>.<\/p>\n\u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f BlockEdit<\/code>(\u0441\u0442\u0440\u043e\u043a\u0430 #9<\/code>\u0438 #39<\/code>\u0431\u043b\u043e\u043a\u0438 Spacer). \u0414\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u0442\u0438\u043f\u0430 Spacer \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f InspectorControls<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c PanelColorSettings<\/code>\u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430. \u042d\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430.<\/p>\n\u0412 \u0441\u0442\u0440\u043e\u043a\u0435 #17 - 34<\/code>\u043c\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438\/\u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c. \u0417\u0430\u0442\u0435\u043c \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 #38<\/code>\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 div BlockEdit<\/code>\u0441 \u044d\u0442\u0438\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/p>\n\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0441\u0442\u0430\u043b\u0430 \u043d\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0446\u0432\u0435\u0442\u0430 \u0432 Inspector \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u043e\u0432 Spacer, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f.<\/p>\n
![\"\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7041a66b.png\")
<\/a><\/p>\n![\"\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7052e0c9.gif\")
<\/a><\/p>\n