registerFormatType<\/code>som g\u00f6r att vi kan v\u00e4lja markeringsf\u00e4rgen f\u00f6r vald text med hj\u00e4lp av den semantiska <mark><\/code>HTML-taggen.<\/p>\nAll kod som anv\u00e4nds i denna handledning finns i det kostnadsfria<\/strong> insticksprogrammet ’Highlighter’<\/a>.<\/p>\nDet \u00e4r v\u00e4rt att notera att du inte bara kan anv\u00e4nda format p\u00e5 vald text i dina block, utan du kan ocks\u00e5 anv\u00e4nda dem f\u00f6r att infoga andra objekt direkt i block, till exempel inlinebilder och ikoner.<\/p>\n
Anv\u00e4nda en formattyp med hj\u00e4lp av Highlighter-plugin.<\/p>\n
Videon ovan visar Highlighter-pluginen och v\u00e5r formattyp i aktion. L\u00e5t oss hoppa till det.<\/p>\n
F\u00f6ruts\u00e4ttningar<\/h2>\n\n- L\u00e4s guiden Skapa ett plugin f\u00f6r WordPress Block Editor (Gutenberg)<\/a> s\u00e5 att du kan f\u00e5 ett f\u00f6rspr\u00e5ng med att skapa plugin.<\/li>\n
- Du kan eventuellt ladda ner det kostnadsfria "Highlighter"-pluginet<\/a> och titta p\u00e5 filen
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nKonfigurera plugin-filerna<\/h2>\n
Om du har f\u00f6ljt f\u00f6ruts\u00e4ttningen och f\u00f6ljt pluginguiden m\u00e5ste vi g\u00e5 vidare och ta bort ett g\u00e4ng av dessa filer.<\/p>\n
\n- Ta bort allt f\u00f6rutom filerna
index.js<\/code>och i src-mappen.style.scss<\/code><\/li>\n- Ta bort inneh\u00e5llet i
index.js<\/code>och style.scss<\/code>helt.<\/li>\n\/build<\/code>Ta bort alla filer i mappen. Vi kommer att \u00e5terskapa dessa senare.<\/li>\n- Ta bort
block.json<\/code>. Vi bygger inte ett block idag, s\u00e5 vi beh\u00f6ver inte det h\u00e4r.<\/li>\n<\/ul>\nSt\u00e4ll skripten i k\u00f6<\/h3>\n
I huvudpluginfilen (wholesome-plugin.php<\/code>om du har f\u00f6ljt f\u00f6reg\u00e5ende handledning ordagrant) l\u00e4gg till f\u00f6ljande kod f\u00f6r att st\u00e4lla JavaScript och CSS f\u00f6r din plugin.<\/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- Registrera formattyp<\/li>\n<\/ol>\n
\n\u00d6ppna din \/src\/index.js<\/code>fil och l\u00e4gg till f\u00f6ljande 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>\nDetta skapar v\u00e5r \u00f6verstrykningsknapp som visas i formatmenyn. Nu kommer vi att anv\u00e4nda registerFormatType<\/code>f\u00f6r att registrera formatet.<\/p>\nF\u00f6rst m\u00e5ste vi redigera v\u00e5ra importer f\u00f6r att \u00e4ven importera registerFormatType<\/code>fr\u00e5n @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nRegistrera sedan formatet genom att l\u00e4gga till formatets namn (wholesome\/highlighter<\/code>), och skicka in ett objekt med f\u00f6ljande egenskaper. toggleFormat<\/code>kommer att anv\u00e4ndas senare f\u00f6r v\u00e5rt klickevenemang.<\/p>\n\nclassName<\/code>: Klassnamnet som kommer att l\u00e4ggas till taggen som omger den markerade texten.<\/li>\nedit<\/code>: Knappen som vi tidigare registrerat.<\/li>\ntagName<\/code>: Typen av tagg som kommer att till\u00e4mpas p\u00e5 den markerade texten. I det h\u00e4r fallet anv\u00e4nder vi <mark><\/code>som \u00e4r semantiskt korrekt markering f\u00f6r en textmarkering.<\/li>\ntitle<\/code>: Formatets titel.<\/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>\nHantera klicket<\/h3>\n
Nu n\u00e4r vi har lagt till knappen i formatmenyn beh\u00f6ver vi bara hantera klickh\u00e4ndelsen.<\/p>\n
![\"Formatera](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nRedigera RichTextToolbarButton<\/code>och l\u00e4gg till onClick<\/code>h\u00e4ndelsen.<\/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>\nP\u00e5 triggern anropar vi toggleFormat<\/code>passing in v\u00e4rdet (som \u00e4r den markerade texten) och skickar ett objekt med type<\/code>egenskapen inst\u00e4lld p\u00e5 namnet p\u00e5 v\u00e5rt format.<\/p>\nN\u00e4r du nu klickar p\u00e5 knappen initialt kommer den att applicera <mark><\/code>HTML-taggen p\u00e5 den markerade texten, och n\u00e4r du klickar igen kommer den att v\u00e4xla format genom att ta bort den igen.<\/p>\nF\u00f6r att se koden i sin helhet och f\u00f6r att se de senaste uppdateringarna, ta en titt p\u00e5 hela \/src\/formats\/highlight.js<\/code>filen i Highlighter-plugin<\/a>.<\/p>\nKoden ovan kommer att registrera blocket f\u00f6r alla blocktyper. Men om du vill att blocket endast ska visas p\u00e5 vissa blocktyper kan det ocks\u00e5 g\u00f6ras.<\/p>\n
F\u00f6r att g\u00f6ra detta m\u00e5ste vi anv\u00e4nda Higher Order Component ifCondition och anv\u00e4ndaSelect f\u00f6r att best\u00e4mma blocktypen som vi har valt.<\/p>\n
F\u00f6r att g\u00f6ra detta l\u00e4gg till f\u00f6ljande importer \u00f6verst i filen.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nL\u00e4gg till f\u00f6ljande kodblock ovanf\u00f6r registerFormatType<\/code>kodblocket.<\/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>\nSom du kan se av koden, om blocket som v\u00e4ljs \u00e4r kommer core\/paragraph<\/code>Higher Order-komponenten ifCondition<\/code>att returnera sant och d\u00e4rf\u00f6r till\u00e5ta knappen att rendera.<\/p>\nAllt vi beh\u00f6ver g\u00f6ra nu \u00e4r att skicka beh\u00e5llaren vi just har skapat till registerBlockType<\/code>kodblocket och v\u00e5r kod \u00e4r klar.<\/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>\nF\u00f6r att se koden i sin helhet, ta en titt p\u00e5 \/src\/formats\/highlight-paragraph.js<\/code>filen i Highlighter-plugin<\/a>.<\/p>\n\n- Ta saker l\u00e4ngre genom att l\u00e4gga till anpassade attribut till ditt anpassade format med en modal popover<\/a>.<\/li>\n
- L\u00e4gg till en blockad sidof\u00e4lt med InspectorControls<\/a><\/li>\n
- Titta p\u00e5 att bygga en alternativ- och inst\u00e4llningssida med hj\u00e4lp av Gutenberg-komponenter<\/a><\/li>\n<\/ul>\n