BlockControls<\/code>(from wp.blockEditor<\/code>). Wewn\u0105trz tego komponentu mo\u017cemy doda\u0107 jeden z komponent\u00f3w WordPress dla standardowych pask\u00f3w narz\u0119dzi, kt\u00f3re znamy z innych blok\u00f3w (na przyk\u0142ad wyr\u00f3wnanie) lub mo\u017cemy doda\u0107 w\u0142asny pasek narz\u0119dzi.<\/p>\nDomy\u015blnie blok b\u0119dzie posiada\u0142 pasek narz\u0119dzi zawieraj\u0105cy tylko ikon\u0119 bloku (dla funkcji Przekszta\u0142\u0107 w) oraz menu bloku do np. usuni\u0119cia bloku. Nie mo\u017cemy ich usun\u0105\u0107, ale mo\u017cemy doda\u0107 mi\u0119dzy nimi w\u0142asne przyciski i paski narz\u0119dzi.<\/p>\n
Jednak niekt\u00f3re komponenty WordPressa same dodadz\u0105 w\u0142asne paski narz\u0119dzi. W tej chwili nasz blok pokazuje pasek narz\u0119dzi do formatowania tekstu, kt\u00f3ry pochodzi z RichText<\/code>komponentu, kt\u00f3ry dodali\u015bmy.<\/p>\n![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7785e80.png\")
<\/a><\/p>\nDodawanie paska narz\u0119dzi wyr\u00f3wnania blok\u00f3w<\/h2>\n
Pasek wyr\u00f3wnywania blok\u00f3w istnieje praktycznie we wszystkich typach blok\u00f3w WordPress, wi\u0119c dodajmy go r\u00f3wnie\u017c do naszego bloku. Za kulisami istnieje komponent BlockAlignmentToolbar<\/code>, kt\u00f3ry mogliby\u015bmy doda\u0107, jednak nie polecam tego. Korzystanie z niego wymaga r\u0119cznej obs\u0142ugi klas w celu wyr\u00f3wnania blok\u00f3w i upewnienia si\u0119, \u017ce blok rozszerza swoj\u0105 szeroko\u015b\u0107 w edytorze po wybraniu opcji \u201eSzeroka szeroko\u015b\u0107" lub \u201ePe\u0142na szeroko\u015b\u0107”. Na szcz\u0119\u015bcie WordPress bardzo u\u0142atwi\u0142 jego implementacj\u0119, w pe\u0142ni automatycznie.<\/p>\nPS: Aktywny motyw musi aktywnie doda\u0107 obs\u0142ug\u0119 motywu dla tych dw\u00f3ch wyr\u00f3wna\u0144 blok\u00f3w. Mo\u017cesz doda\u0107 wsparcie dla tych, maj\u0105c add_theme_support('align-wide')<\/code>w after_setup_theme<\/code>haczyku.<\/p>\nMo\u017cemy doda\u0107 do naszej konfiguracji obiektu now\u0105 w\u0142a\u015bciwo\u015b\u0107 o registerBlockType()<\/code>nazwie supports<\/code>. Istnieje kilka innych funkcji, ale to, co nas tutaj interesuje, to align<\/code>. Mo\u017cemy albo ustawi\u0107 align<\/code>, aby true<\/code>doda\u0107 wszystkie mo\u017cliwe wyr\u00f3wnania, albo mo\u017cemy dostarczy\u0107 tablic\u0119 dok\u0142adnych wyr\u00f3wna\u0144, kt\u00f3re dopuszczamy dla naszego bloku.<\/p>\n...\nregisterBlockType('awp\/firstblock', {\n ...\n supports: {\n align: true\n },\n edit: (props) => {\n ...\n});<\/code><\/pre>\nCo daje nam to w edytorze:<\/p>\n
![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7967acd.png\")
<\/a><\/p>\nJe\u015bli chcesz, na przyk\u0142ad, uniemo\u017cliwi\u0107 komukolwiek korzystanie z szerokiej lub pe\u0142nej szeroko\u015bci, mo\u017cesz poda\u0107 tablic\u0119 i wykluczy\u0107 te dwa. Nazwy linii trasowania blok\u00f3w s\u0105 nast\u0119puj\u0105ce: left<\/code>, right<\/code>, center<\/code>, wide<\/code>i full<\/code>.<\/p>\nsupports: {\n align: ['left', 'right', 'center']\n},<\/code><\/pre>\nPotrzebujesz domy\u015blnego wyr\u00f3wnania?<\/h3>\n
Domy\u015blnie blok nie otrzymuje wyr\u00f3wnania bloku. Je\u015bli chcesz, mo\u017cesz ustawi\u0107 warto\u015b\u0107 domy\u015bln\u0105, tworz\u0105c atrybut za pomoc\u0105 klawisza align<\/code>, ustaw typ na string<\/code>i ustaw tam warto\u015b\u0107 domy\u015bln\u0105. WordPress automatycznie po\u0142\u0105czy ten atrybut z wyr\u00f3wnaniem bloku.<\/p>\nattributes: {\n align: {\n type: 'string',\n default: 'center'\n }\n},\nsupports: {\n align: true\n},<\/code><\/pre>\nDzi\u0119ki temu za ka\u017cdym razem, gdy tworzony jest nowy blok naszego typu, domy\u015blne wyr\u00f3wnanie bloku jest wy\u015brodkowane.<\/p>\n
Ba\u0142agan w stylizacji wyr\u00f3wnania blok\u00f3w? To nie nasza wina<\/h3>\n
Uwaga:<\/strong> Domy\u015blny styl blokowy z WordPressa zaburzy przep\u0142yw tre\u015bci posta podczas korzystania z wyr\u00f3wnania bloku do lewej i prawej. To samo dzieje si\u0119 z innymi typami blok\u00f3w z WordPressa i nie jest to wy\u0142\u0105cznie problem naszego bloku. Jest to spowodowane dodaniem do elementu float, co powoduje zwini\u0119cie elementu nadrz\u0119dnego. Uwierz mi, pr\u00f3bowa\u0142em skonstruowa\u0107 blok, aby unikn\u0105\u0107 tego problemu. Jedyne, co odkry\u0142em, \u017ce dzia\u0142a poprawnie bez ingerencji w inne wyr\u00f3wnania blok\u00f3w, to dodanie stylizacji do edytora i dostosowanie stylizacji p\u0142ywaka.<\/p>\n![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7baa1f0.png\")
<\/a><\/p>\nNiezale\u017cnie od tego, WordPress u\u0142atwi\u0142 wdro\u017cenie wyr\u00f3wnania blok\u00f3w. Przyjrzyjmy si\u0119 teraz innym paskom narz\u0119dzi, z kt\u00f3rych mo\u017cemy korzysta\u0107.<\/p>\n
Dodawanie paska narz\u0119dzi wyr\u00f3wnania tekstu<\/h2>\n
Je\u015bli wolisz pasek narz\u0119dzi do wyr\u00f3wnania tekstu, mo\u017cesz to zrobi\u0107 zamiast wyr\u00f3wnania do blok\u00f3w \u2013 w tym pasku narz\u0119dzi mamy tylko wyr\u00f3wnanie do lewej, do \u015brodka i do prawej. W rzeczywisto\u015bci mo\u017cesz u\u017cywa\u0107 zar\u00f3wno wyr\u00f3wnania tekstu, jak i wyr\u00f3wnania blok\u00f3w razem \u2013 dzia\u0142aj\u0105 osobno. Aby nie dezorientowa\u0107 u\u017cytkownik\u00f3w, mo\u017cesz na przyk\u0142ad doda\u0107 obs\u0142ug\u0119 wyr\u00f3wnania blok\u00f3w do szeroko\u015bci i pe\u0142nej szeroko\u015bci oraz u\u017cy\u0107 paska narz\u0119dzi wyr\u00f3wnania tekstu do kontrolowania wyr\u00f3wnania do lewej, do \u015brodka lub do prawej. W ten spos\u00f3b unikniesz wy\u017cej wspomnianego problemu<\/strong> z przep\u0142ywem blok\u00f3w w edytorze. Od Ciebie zale\u017cy, jak chcesz, aby Tw\u00f3j blok dzia\u0142a\u0142.<\/p>\nWordPress ma komponent do wyprowadzania paska narz\u0119dzi wyr\u00f3wnywania tekstu, ale nie ma automatycznej obs\u0142ugi dodawania poprawnych klas do faktycznego wyr\u00f3wnania tre\u015bci \u2013 zar\u00f3wno w edytorze, jak i w interfejsie (przynajmniej na tyle, na ile si\u0119 znalaz\u0142em!). Musimy r\u0119cznie doda\u0107 i zaktualizowa\u0107 atrybut wyr\u00f3wnania tekstu.<\/p>\n
Dodawanie BlockControls<\/code>iAlignmentToolbar<\/code><\/h3>\nDodajmy wreszcie BlockControls<\/code>do naszej edit<\/code>funkcji dla naszego wyj\u015bcia na pasku narz\u0119dzi. Komponent do wyr\u00f3wnania tekstu pochodzi AlignmentToolbar<\/code>z wp.blockEditor<\/code>pakietu.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n attributes: {\n myRichHeading: {\n type: 'string',\n },\n myRichText: {\n type: 'string',\n source: 'html',\n selector: 'p'\n },\n textAlignment: {\n type: 'string',\n }\n },\n supports: {\n align: ['wide', 'full']\n },\n edit: (props) => {\n const { attributes, setAttributes } = props;\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n return (<div className={alignmentClass}>\n <InspectorControls>\n ... \n <\/InspectorControls>\n <BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <\/BlockControls>\n <RichText \n tagName=\"h2\"\n placeholder=\"Write your heading here\"\n value={attributes.myRichHeading}\n onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n \/>\n <RichText\n tagName=\"p\"\n placeholder=\"Write your paragraph here\"\n value={attributes.myRichText}\n onChange={(newtext) => setAttributes({ myRichText: newtext })}\n \/>\n <\/div>\n );\n\u00a0\n },\n save: (props) => { \n const { attributes } = props;\n\u00a0\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n return (<div className={alignmentClass}>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n {attributes.activateLasers && \n <div className=\"lasers\">Lasers activated<\/div>\n }\n <\/div>\n );\n }\n});<\/code><\/pre>\nZauwa\u017c, \u017ce wykluczy\u0142em zawarto\u015b\u0107 wszystkiego, co stworzyli\u015bmy w InspectorControls<\/code>poprzednim kroku, aby skr\u00f3ci\u0107 kod.<\/p>\nPomi\u0119dzy wierszem #37<\/code>do #42<\/code>znajduje si\u0119 ca\u0142a zawarto\u015b\u0107 naszego paska narz\u0119dzi (opr\u00f3cz wyr\u00f3wnania blok\u00f3w automatycznie dodanego przez supports<\/code>w\u0142a\u015bciwo\u015b\u0107 i formatowania tekstu dodanego przez nasze RichText<\/code>komponenty). U\u017cywamy BlockControls<\/code>, aby uzyska\u0107 dost\u0119p do paska narz\u0119dzi, a wewn\u0105trz dodajemy AlignmentToolbar<\/code>komponent.<\/p>\nJak ju\u017c kilkakrotnie zrobili\u015bmy z danymi wej\u015bciowymi, udost\u0119pniamy value<\/code>w\u0142a\u015bciwo\u015b\u0107 do pokazywania zapisanej warto\u015bci oraz onChange<\/code>w\u0142a\u015bciwo\u015b\u0107 do aktualizowania naszego atrybutu w AlignmentToolbar<\/code>komponencie. Atrybut, kt\u00f3rego u\u017cyjemy do przechowywania wybranego wyr\u00f3wnania tekstu, jest zdefiniowany jako textAlignment<\/code>i musi by\u0107 typem string<\/code>. Jak zwykle mo\u017cesz poda\u0107 a, default<\/code>aby zapewni\u0107, \u017ce nowo utworzone bloki otrzymaj\u0105 domy\u015blne wyr\u00f3wnanie.<\/p>\nAby upewni\u0107 si\u0119, \u017ce blok zar\u00f3wno wyprowadza informacje o wyr\u00f3wnaniu, jak i jest poprawnie stylizowany (wi\u0119c faktycznie widzimy wyr\u00f3wnanie zmiany tekstu) zar\u00f3wno w edytorze, jak i w interfejsie u\u017cytkownika, musimy r\u0119cznie skonfigurowa\u0107 odpowiedni\u0105 klas\u0119 w opakowuj\u0105cym div. W obu edit<\/code>definiuj\u0119 save<\/code>zmienn\u0105, kt\u00f3ra sprawdza, czy attributes.textAlignment<\/code>jest ustawiona. Je\u015bli tak, tworz\u0119 nazw\u0119 klasy zgodnie ze standardami WordPressa dotycz\u0105cymi wyr\u00f3wnania tekstu, czyli \u201ehas-text-align-(left|center|right)”. Dzi\u0119ki tej klasie WordPress zastosuje swoj\u0105 stylizacj\u0119 do naszego bloku i upewni si\u0119, \u017ce nasz blok jest poprawnie wyr\u00f3wnany wizualnie, zar\u00f3wno w edytorze, jak i interfejsie.<\/p>\nDodawanie niestandardowych pask\u00f3w narz\u0119dzi z w\u0142asnymi przyciskami<\/h3>\n
Mo\u017cesz tak\u017ce doda\u0107 w\u0142asne przyciski na pasku narz\u0119dzi, aby robi\u0107, co chcesz, po ich klikni\u0119ciu. Aby to zrobi\u0107, b\u0119dziesz chcia\u0142 doda\u0107 komponent, Toolbar<\/code>a wewn\u0105trz tego elementu dodaj IconButton<\/code>(oba w wp.components<\/code>pakiecie). Oczywi\u015bcie wszystko w BlockControls<\/code>ci\u0105gu.<\/p>\nUwaga<\/strong>: Wed\u0142ug dziennika zmian WordPressa Gutenberga IconButton<\/code>jest przestarza\u0142e na rzecz u\u017cywania Button<\/code>. Jednak nie wydaje mi si\u0119, aby ikona pojawia\u0142a si\u0119 za pomoc\u0105 Button<\/code>komponentu, bez wzgl\u0119du na to, co robi\u0119, mimo \u017ce ma go obs\u0142ugiwa\u0107. Wi\u0119c od teraz b\u0119d\u0119 u\u017cywa\u0142 IconButton<\/code>.<\/p>\nOczywi\u015bcie mo\u017cesz po\u0142\u0105czy\u0107 wiele komponent\u00f3w paska narz\u0119dzi w ramach programu BlockControls<\/code>. Za pomoc\u0105 poni\u017cszego kodu dodajemy pasek narz\u0119dzi wyr\u00f3wnania tekstu i nasz niestandardowy pasek narz\u0119dzi z jednym przyciskiem po nim.<\/p>\n<BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <Toolbar>\n <IconButton\n label=\"My very own custom button\"\n icon=\"edit\"\n className=\"my-custom-button\"\n onClick={() => console.log('pressed button')}\n \/>\n <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n