{"id":228332,"date":"2022-10-12T11:07:00","date_gmt":"2022-10-12T08:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228332"},"modified":"2022-11-09T01:55:10","modified_gmt":"2022-11-08T22:55:10","slug":"dodajte-select2-jak-inspectorcontrol-u-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/uk\/dodajte-select2-jak-inspectorcontrol-u-wordpress-gutenberg\/","title":{"rendered":"\u0414\u043e\u0434\u0430\u0439\u0442\u0435 Select2 \u044f\u043a InspectorControl \u0443 WordPress Gutenberg"},"content":{"rendered":"\n

\u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043d\u0430\u0434 \u044f\u043a\u0438\u043c \u044f \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0432, \u044f \u0445\u043e\u0442\u0456\u0432 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 Select2 \u044f\u043a Gutenberg InpectorControl<\/code>, \u0449\u043e\u0431 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u0438 \u043c\u0435\u043d\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u0432\u0430\u0442\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043e \u0431\u043b\u043e\u043a\u0443. \u0426\u0435\u0439 \u043f\u0456\u0434\u0440\u0443\u0447\u043d\u0438\u043a \u0442\u0430\u043a\u043e\u0436 \u043d\u0430\u0434\u0430\u0441\u0442\u044c \u0432\u0430\u043c \u043e\u0441\u043d\u043e\u0432\u0443, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0443 \u0434\u043b\u044f \u0440\u043e\u0437\u043c\u0456\u0449\u0435\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0456\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 React \u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0456 Gutenberg WordPress.<\/p>\n

Select2 \u2014 \u0446\u0435 \u043d\u0430\u0434\u0437\u0432\u0438\u0447\u0430\u0439\u043d\u043e \u0437\u0440\u0443\u0447\u043d\u0430 \u0437\u0430\u043c\u0456\u043d\u0430 \u043f\u043e\u043b\u0456\u0432 \u0432\u0438\u0431\u043e\u0440\u0443 \u043d\u0430 \u0432\u0430\u0448\u043e\u043c\u0443 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0456. \u0417\u043e\u043a\u0440\u0435\u043c\u0430, \u0443 \u043d\u044c\u043e\u043c\u0443 \u0454 \u043a\u0456\u043b\u044c\u043a\u0430 \u0447\u0443\u0434\u043e\u0432\u0438\u0445 \u043e\u043f\u0446\u0456\u0439 \u0434\u043b\u044f \u0432\u0438\u0431\u043e\u0440\u0443 \u043a\u0456\u043b\u044c\u043a\u043e\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432.<\/p>\n

\u0413\u043e\u0442\u043e\u0432\u0438\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, Select2 \u0443 WordPress Gutenberg InspectorControls<\/p>\n

\u0425\u043e\u0440\u043e\u0448\u0430 \u043d\u043e\u0432\u0438\u043d\u0430 \u043f\u043e\u043b\u044f\u0433\u0430\u0454 \u0432 \u0442\u043e\u043c\u0443, \u0449\u043e \u043c\u0435\u043d\u0456 \u043d\u0435 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u043b\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React, \u0449\u043e\u0431 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0438 Select2 \u0443 Gutenberg, react-select<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0414\u0436\u0435\u0434\u0430 \u0412\u0430\u0442\u0441\u043e\u043d\u0430<\/a> \u0432\u0436\u0435 \u0447\u0443\u0434\u043e\u0432\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u0437 \u0446\u0438\u043c, \u043e\u0434\u043d\u0430\u043a \u0437\u043c\u0443\u0441\u0438\u0442\u0438 \u0439\u043e\u0433\u043e \u0434\u043e\u0431\u0440\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Gutenberg \u0431\u0443\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u043b\u0435\u0433\u043a\u043e, \u044f\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0456\u0434\u0443\u0432\u0430\u0442\u0438 \u0456\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457.<\/p>\n

\u041f\u0435\u0440\u0448 \u0437\u0430 \u0432\u0441\u0435, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u043b\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443 \u043d\u0430\u0448\u0443 \u0437\u0431\u0456\u0440\u043a\u0443. \u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0446\u0435 \u0431\u0443\u043b\u043e \u043d\u0430 npm, \u0446\u0435 \u0431\u0443\u043b\u043e \u0442\u0430\u043a \u0441\u0430\u043c\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u044f\u043a \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435 \u0432 \u043d\u0430\u0448 \u0442\u0435\u0440\u043c\u0456\u043d\u0430\u043b:<\/p>\n

\u0412\u0432\u0435\u0434\u0435\u043d\u043d\u044f Select2 \u0443 \u0431\u043b\u043e\u043a \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/h2>\n

\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 Git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0439 \u043a\u0443\u0440\u0441\u0443 \u0417\u0430\u043a\u0430 \u200b\u200b\u0413\u043e\u0440\u0434\u043e\u043d\u0441\u0430 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/a> (\u0447\u0430\u0441\u0442\u0438\u043d\u0430 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0443 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438 \u0417\u0430\u043a\u0430 \u200b\u200b\u0413\u043e\u0440\u0434\u043e\u043d\u0441\u0430 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/a>) \u044f\u043a \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u043c\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0456\u043d\u0430 (\u0437\u043e\u043a\u0440\u0435\u043c\u0430 InspectorControls<\/code>\u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443), \u0434\u043b\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f react-select<\/code>\u043c\u0435\u043d\u0456 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u043b\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0442\u0430\u043a\u0456 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0443 \u0432\u0435\u0440\u0445\u043d\u0456\u0439 \u0447\u0430\u0441\u0442\u0438\u043d\u0456 \u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0443:<\/p>\n

import React from 'react';\nimport Select from 'react-select';\n<\/code><\/pre>\n
\u041e \u043d\u0456! \u041a\u043e\u043c\u043f\u0456\u043b\u044f\u0446\u0456\u044f \u0446\u044c\u043e\u0433\u043e \u0434\u0430\u0454 \u043d\u0430\u043c \u043f\u043e\u043c\u0438\u043b\u043a\u0443:<\/p>\n
\n
\u041c\u043e\u0434\u0443\u043b\u044c \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e: \u043f\u043e\u043c\u0438\u043b\u043a\u0430: \u043d\u0435 \u0432\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0432\u0438\u0440\u0456\u0448\u0438\u0442\u0438 "react"<\/p>\n<\/blockquote>\n
\u041d\u0456\u043a\u043e\u043b\u0438 \u043d\u0435 \u0431\u0456\u0439\u0442\u0435\u0441\u044f, \u0446\u044f \u0447\u0443\u0434\u043e\u0432\u0430 \u0441\u0442\u0430\u0442\u0442\u044f \u00ab\u042f\u043a \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 React \u0443 \u0432\u0430\u0448\u0438\u0445 \u0431\u043b\u043e\u043a\u0430\u0445 Gutenberg\u00bb \u0432\u0456\u0434 CSS Igniter<\/a> \u043f\u0440\u0438\u0439\u0448\u043b\u0430 \u043d\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0443, \u0432\u0441\u0435, \u0449\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0437\u0440\u043e\u0431\u0438\u0442\u0438, \u0446\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044f externals<\/code>\u0432 \u043d\u0430\u0448\u043e\u043c\u0443 webpack.config.js<\/code>\u0444\u0430\u0439\u043b\u0456:<\/p>\n
externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM',\n}\n<\/code><\/pre>\n
\u041e\u0441\u044c \u0442\u0430\u043a:<\/p>\n
module.exports = {\n    entry: {\n        '.\/assets\/js\/editor': '.\/blocks\/index.js',\n        '.\/assets\/js\/script': '.\/blocks\/script.js',\n    },\n    output: {\n        path: path.resolve( __dirname ),\n        filename: '[name].js',\n    },\n    externals: {\n        'react': 'React',\n        'react-dom': 'ReactDOM',\n    }\n...\n<\/code><\/pre>\n
\u0420\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u044f InspectorControls<\/h2>\n
\u0423 \u0440\u0443\u043b\u043e\u043d \u043f\u0430\u043d\u0435\u043b\u0456 \u0432\u0430\u0448\u043e\u0433\u043e <InspectorControls><\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u0434\u0435 \u0434\u043e\u0434\u0430\u0442\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435:<\/p>\n
<Select\n    name='select-two'\n    value={ JSON.parse( selectedOption) }\n    onChange={ handleSelectChange }\n    options={[\n        { value: 'health', label: 'Health' },\n        { value: 'wealth', label: 'Wealth' },\n        { value: 'code', label: 'Code' },\n    ]}\n    isMulti='true'\n    \/>\n<\/code><\/pre>\n
\u041c\u0438 \u0449\u0435 \u043d\u0435 \u0437\u0430\u043a\u0456\u043d\u0447\u0438\u043b\u0438, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043d\u0430\u043c \u0442\u0430\u043a\u043e\u0436 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u0434\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438 selectedOption<\/code>\u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0456 handleSelectChange<\/code>\u0444\u0443\u043d\u043a\u0446\u0456\u044e. \u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0437\u0440\u043e\u0431\u0438\u0442\u0438 \u0446\u0435 \u0442\u0430\u043a:<\/p>\n
attributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\n<\/code><\/pre>\n
…\u0430 \u0442\u0435\u043f\u0435\u0440 \u043f\u0440\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044e…<\/p>\n
const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n<\/code><\/pre>\n
\u041f\u043e\u0447\u0435\u043a\u0430\u0439\u0442\u0435, \u043d\u0430\u0432\u0456\u0449\u043e \u043d\u0430\u043c JSON.stringify()<\/code>\u0456 JSON.parse()<\/code>\u0446\u0456\u043d\u043d\u043e\u0441\u0442\u0456? \u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u044f\u043a\u0435 react-select<\/code>\u043f\u0440\u0438\u0439\u043c\u0430\u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0454 \u043c\u0430\u0441\u0438\u0432\u043e\u043c, \u0456 \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433 \u043d\u0435 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043d\u0430\u043c \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0442\u0438 \u0446\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u044f\u043a \u043c\u0430\u0441\u0438\u0432, \u0446\u0435 \u043e\u0431\u0445\u0456\u0434\u043d\u0438\u0439 \u0448\u043b\u044f\u0445, \u044f\u043a\u0438\u0439 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438.<\/p>\n
\u0417\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u0440\u0430\u0437\u043e\u043c<\/h2>\n
\u0422\u0435\u043f\u0435\u0440 \u043d\u0430\u0448\u0430 \u043f\u043e\u0432\u043d\u0430 InspectorControls<\/code>\u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043c\u0430\u0454 \u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0442\u0438 \u0442\u0430\u043a:<\/p>\n
...\nattributes: {\n    selectedOption: {\n        type: 'string',\n        default: null,\n    }\n},\nedit: props => {\n    const { attributes: { selectedOption }, className, setAttributes } = props;\n    const handleSelectChange = (selectedOption) => setAttributes( { selectedOption: JSON.stringify( selectedOption) } );\n    return [\n        <InspectorControls>\n            <PanelBody\n                title={ __( 'Select2', 'text-domain') }\n            >\n                <PanelRow>\n                    <Select\n                        name='select-two'\n                        value={ JSON.parse( selectedOption) }\n                        onChange={ handleSelectChange }\n                        options={[\n                            { value: 'health', label: 'Health' },\n                            { value: 'wealth', label: 'Wealth' },\n                            { value: 'code', label: 'Code' },\n                        ]}\n            isMulti='true'\n                        \/>\n                 <\/PanelRow>\n             <\/PanelBody>\n         <\/InspectorControls>,\n...\n<\/code><\/pre>\n
\u0414\u043e\u0431\u0440\u0435 \u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0454 \u0432 Gutenberg<\/h2>\n
\u042f\u043a \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0430\u0447\u0438\u0442\u0438 \u043d\u0430 \u0441\u043a\u0440\u0456\u043d\u0448\u043e\u0442\u0456, \u0446\u0435 \u043f\u0440\u0430\u0446\u044e\u0454 \u0434\u043e\u0441\u0438\u0442\u044c \u0434\u043e\u0431\u0440\u0435:<\/p>\n
\"\u0414\u043e\u0434\u0430\u0439\u0442\u0435\u0412\u0438\u0431\u0435\u0440\u0456\u0442\u044c 2 \u044f\u043a Gutenberg InspectorControl<\/p>\n
\u0411\u0435\u0440\u0443\u0447\u0438 \u0446\u0435 \u0434\u0430\u043b\u0456<\/h2>\n
\u042f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0432 \u0446\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0438\u0439 \u0456\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 \u043f\u043b\u0430\u0433\u0456\u043d\u0456 Secure Blocks for Gutenberg. \u0414\u0456\u0437\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u044f\u043a \u044f \u0437\u0430\u043f\u043e\u0432\u043d\u0438\u0432 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f Select2 \u0434\u0438\u043d\u0430\u043c\u0456\u0447\u043d\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438 \u0437 WordPress REST API<\/a>.<\/p>\n
\u0414\u0436\u0435\u0440\u0435\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0443:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043d\u0430\u0434 \u044f\u043a\u0438\u043c \u044f \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0432, \u044f \u0445\u043e\u0442\u0456\u0432 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 Select2 \u044f\u043a Gutenberg InpectorControl, \u0449\u043e\u0431 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u0438 \u043c\u0435\u043d\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043e \u0431\u043b\u043e\u043a\u0443. \u0426\u0435\u0439 \u043f\u0456\u0434\u0440\u0443\u0447\u043d\u0438\u043a \u0442\u0430\u043a\u043e\u0436 \u0434\u0430\u0441\u0442\u044c \u0432\u0430\u043c \u043e\u0441\u043d\u043e\u0432\u0443, \u044f\u043a\u0430 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430…<\/p>\n","protected":false},"author":1,"featured_media":224196,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[902,849,725],"tags":[1174],"class_list":["post-228332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod-3","category-pidruchnyky","category-rozrobnyk","tag-affiai-uk"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts\/228332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/comments?post=228332"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts\/228332\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/media\/224196"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/media?parent=228332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/categories?post=228332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/tags?post=228332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}