registerFormatType<\/code>, kt\u00f3ra pozwoli nam wybra\u0107 kolor pod\u015bwietlenia zaznaczonego tekstu za pomoc\u0105 semantycznego <mark><\/code>znacznika HTML.<\/p>\nCa\u0142y kod u\u017cyty w tym samouczku mo\u017cna znale\u017a\u0107 w bezp\u0142atnej<\/strong> wtyczce \u201eHighlighter"<\/a>.<\/p>\nWarto zauwa\u017cy\u0107, \u017ce nie tylko mo\u017cesz zastosowa\u0107 formatowanie do zaznaczonego tekstu w swoich blokach, ale mo\u017cesz r\u00f3wnie\u017c u\u017cy\u0107 ich do wstawienia innych obiekt\u00f3w bezpo\u015brednio do blok\u00f3w, takich jak obrazy i ikony w tek\u015bcie.<\/p>\n
Stosowanie typu formatu za pomoc\u0105 wtyczki Highlighter.<\/p>\n
Powy\u017cszy film pokazuje wtyczk\u0119 Highlighter i nasz typ formatu w akcji. Przejd\u017amy do tego.<\/p>\n
Warunki wst\u0119pne<\/h2>\n\n- Przeczytaj przewodnik Tworzenie wtyczki do edytora blok\u00f3w WordPress (Gutenberg)<\/a>, aby rozpocz\u0105\u0107 tworzenie wtyczki.<\/li>\n
- Opcjonalnie pobierz darmow\u0105 wtyczk\u0119 \u201eHighlighter”<\/a> i sp\u00f3jrz na plik
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nSkonfiguruj pliki wtyczek<\/h2>\n
Je\u015bli spe\u0142ni\u0142e\u015b wymagania wst\u0119pne i post\u0119pujesz zgodnie z przewodnikiem dotycz\u0105cym wtyczek, musimy i\u015b\u0107 dalej i usun\u0105\u0107 kilka tych plik\u00f3w.<\/p>\n
\n- W folderze src usu\u0144 wszystko poza plikami
index.js<\/code>i .style.scss<\/code><\/li>\n- Usu\u0144 zawarto\u015b\u0107
index.js<\/code>i style.scss<\/code>ca\u0142kowicie.<\/li>\n- W
\/build<\/code>folderze usu\u0144 wszystkie pliki. Zregenerujemy je p\u00f3\u017aniej.<\/li>\n- Usu\u0144
block.json<\/code>. Nie budujemy dzisiaj bloku, wi\u0119c nie potrzebujemy tego.<\/li>\n<\/ul>\nKolejkuj skrypty<\/h3>\n
W g\u0142\u00f3wnym pliku wtyczki (wholesome-plugin.php<\/code>je\u015bli post\u0119powa\u0142e\u015b dok\u0142adnie zgodnie z poprzednim samouczkiem) dodaj nast\u0119puj\u0105cy kod, aby umie\u015bci\u0107 w kolejce JavaScript i CSS dla swojej wtyczki.<\/p>\n<?php\n\nfunction setup(): void {\n\n load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );\n\n add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );\n\n add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );\n}\n\nfunction enqueue_block_editor_assets(): void {\n\n $asset_path = ROOT_DIR. '\/build\/index.asset.php';\n\n if (! file_exists( $asset_path)) {\n throw new Error(\n esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin \"wholesome-highlighter\" first.', 'wholesome-highlighter') );\n }\n\n $scripts = '\/build\/index.js';\n $assets = include $asset_path;\n\n wp_enqueue_script(\n PLUGIN_SLUG. '-block-scripts',\n plugins_url( $scripts, ROOT_FILE ),\n $assets['dependencies'],\n $assets['version'],\n false\n );\n\n wp_set_script_translations(\n PLUGIN_SLUG. '-block-scripts',\n 'wholesome-highlighter',\n ROOT_DIR. 'languages'\n );\n}\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n\nfunction enqueue_block_styles(): void {\n\n $styles = '\/build\/style-index.css';\n\n wp_enqueue_style(\n PLUGIN_SLUG. '-block-styles',\n plugins_url( $styles, ROOT_FILE ),\n array(),\n filemtime( ROOT_DIR. $styles) );\n}\n\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n<\/code><\/pre>\n\n- Zarejestruj typ formatu<\/li>\n<\/ol>\n
\nOtw\u00f3rz \/src\/index.js<\/code>plik i dodaj nast\u0119puj\u0105cy kod.<\/p>\n\nimport { RichTextToolbarButton } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nconst HighlighterButton = ({ isActive, onChange, value}) => {\n return (<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n \/>) };\n<\/code><\/pre>\nTworzy to nasz przycisk wyr\u00f3\u017cnienia, kt\u00f3ry pojawi si\u0119 w menu formatu. Teraz u\u017cyjemy registerFormatType<\/code>do zarejestrowania formatu.<\/p>\nNajpierw musimy edytowa\u0107 nasze importy, aby r\u00f3wnie\u017c importowa\u0107 registerFormatType<\/code>z @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nNast\u0119pnie zarejestruj format, dodaj\u0105c nazw\u0119 formatu (wholesome\/highlighter<\/code>) i przekazuj\u0105c obiekt o nast\u0119puj\u0105cych w\u0142a\u015bciwo\u015bciach. toggleFormat<\/code>zostanie wykorzystany p\u00f3\u017aniej w naszym wydarzeniu dotycz\u0105cym klikni\u0119\u0107.<\/p>\n\nclassName<\/code>: nazwa klasy, kt\u00f3ra zostanie dodana do tagu otaczaj\u0105cego pod\u015bwietlony tekst.<\/li>\nedit<\/code>: Przycisk, kt\u00f3ry wcze\u015bniej zarejestrowali\u015bmy.<\/li>\ntagName<\/code>: typ tagu, kt\u00f3ry zostanie zastosowany do pod\u015bwietlonego tekstu. W tym przypadku u\u017cywamy <mark><\/code>kt\u00f3ry jest semantycznie poprawnym znacznikiem dla pod\u015bwietlenia tekstu.<\/li>\ntitle<\/code>: Tytu\u0142 formatu.<\/li>\n<\/ul>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButton,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nObs\u0142uguj klikni\u0119cie<\/h3>\n
Teraz, gdy dodali\u015bmy przycisk do menu formatu, wszystko, co musimy zrobi\u0107, to obs\u0142u\u017cy\u0107 zdarzenie klikni\u0119cia.<\/p>\n
![\"Sformatuj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nEdytuj RichTextToolbarButton<\/code>i dodaj onClick<\/code>wydarzenie.<\/p>\n<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n onClick={() => {\n onChange(\n toggleFormat( value, {\n type: 'wholesome\/highlighter',\n }) );\n } }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n\/>\n<\/code><\/pre>\nNa wyzwalaczu wywo\u0142ujemy toggleFormat<\/code>przekazywanie warto\u015bci (kt\u00f3ra jest pod\u015bwietlonym tekstem) i przekazujemy obiekt z type<\/code>w\u0142a\u015bciwo\u015bci\u0105 ustawion\u0105 na nazw\u0119 naszego formatu.<\/p>\nTeraz, gdy przycisk zostanie klikni\u0119ty pocz\u0105tkowo, zastosuje <mark><\/code>tag HTML do zaznaczonego tekstu, a po ponownym klikni\u0119ciu prze\u0142\u0105czy format, usuwaj\u0105c go ponownie.<\/p>\nAby wy\u015bwietli\u0107 kod w ca\u0142o\u015bci i zobaczy\u0107 najnowsze aktualizacje , sp\u00f3jrz na pe\u0142ny \/src\/formats\/highlight.js<\/code>plik we wtyczce Highlighter<\/a>.<\/p>\nPowy\u017cszy kod zarejestruje blok dla wszystkich typ\u00f3w blok\u00f3w. Je\u015bli jednak chcesz, aby blok pojawia\u0142 si\u0119 tylko w niekt\u00f3rych typach blok\u00f3w, mo\u017cesz to zrobi\u0107.<\/p>\n
Aby to zrobi\u0107, b\u0119dziemy musieli u\u017cy\u0107 komponentu wy\u017cszego rz\u0119du ifCondition i useSelect do okre\u015blenia typu bloku, kt\u00f3ry wybrali\u015bmy.<\/p>\n
Aby to zrobi\u0107, dodaj nast\u0119puj\u0105ce importy na pocz\u0105tku pliku.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nNad registerFormatType<\/code>blokiem kodu dodaj nast\u0119puj\u0105cy blok tworzenia kodu.<\/p>\n\nvar HighlighterButtonContainer = ifCondition( (props) => {\n const selectedBlock = useSelect( (select) => select('core\/block-editor').getSelectedBlock() );\n return (selectedBlock &&\n selectedBlock.name === 'core\/paragraph'\n ); \n} )( HighlighterButton );\n<\/code><\/pre>\nJak wida\u0107 po kodzie, je\u015bli wybrany blok jest core\/paragraph<\/code>sk\u0142adnikiem wy\u017cszego rz\u0119du ifCondition<\/code>, zwr\u00f3ci warto\u015b\u0107 true, a zatem pozwoli na renderowanie przycisku.<\/p>\nWszystko, co musimy teraz zrobi\u0107, to przekaza\u0107 w\u0142a\u015bnie utworzony kontener do registerBlockType<\/code>bloku kodu i nasz kod jest gotowy.<\/p>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButtonContainer,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nAby zobaczy\u0107 kod w ca\u0142o\u015bci , sp\u00f3jrz na \/src\/formats\/highlight-paragraph.js<\/code>plik we wtyczce Highlighter<\/a>.<\/p>\n\n- Id\u017a dalej, dodaj\u0105c niestandardowe atrybuty do niestandardowego formatu za pomoc\u0105 modalnego popovera<\/a>.<\/li>\n
- Dodaj blokowy pasek boczny za pomoc\u0105 InspectorControls<\/a><\/li>\n
- Sp\u00f3jrz na tworzenie strony opcji i ustawie\u0144 za pomoc\u0105 komponent\u00f3w Gutenberg<\/a><\/li>\n<\/ul>\n