F\u00f6rutom en f\u00f6rb\u00e4ttrad redigerare, introducerar WordPress 5.4 intressanta f\u00f6rb\u00e4ttringar i Site Health Tool<\/a> och REST API<\/a>. <\/u>Vissa f\u00f6rv\u00e4ntade funktioner i WordPress 5.4 har f\u00f6rsenats och b\u00f6r finnas i k\u00e4rnan i samband med releasen av WordPress 5.5<\/a> \u00a0(se Native Lazy Loading on images<\/a> och Navigation block<\/a>).<\/p>\n Du b\u00f6r spara f\u00f6ljande datum och l\u00e4nkar fr\u00e5n WordPress 5.4 Development Cycle<\/a>:<\/p>\n S\u00e5, vad \u00e4r nytt i WordPress 5.4?<\/p>\n Ett ansenligt antal versioner av Gutenbergs<\/a>\u00a0plugin har slagits samman i k\u00e4rnan, fr\u00e5n 6,6 till 7,5. S\u00e5 om du inte anv\u00e4nder Plugin-programmet Gutenberg hittar du massor av nya funktioner, f\u00f6rb\u00e4ttringar och buggfixar i blockredigeraren vid uppgraderingen till WordPress 5.4.<\/p>\n Men det \u00e4r inte bara block och funktioner i redigeraren som har f\u00f6rb\u00e4ttrats:<\/p>\n Teamet som har skapat block-redigeraren har uppn\u00e5tt en 14% tidsminskning i laddning och 51% time-to-type minskning, f\u00f6r en s\u00e4rskilt betydande post (~ 36.000 ord, ~ 1.000 block) sedan WordPress 5.3.<\/p><\/blockquote>\n Det \u00e4r en massa fantastiska saker, s\u00e5 l\u00e5t oss k\u00f6ra ig\u00e5ng.<\/p>\n Block-redigeraren \u00e4r fortfarande under utveckling, men WordPress 5.4 inkluderar massor av f\u00f6r\u00e4ndringar som f\u00f6rb\u00e4ttrar redigerarens anv\u00e4ndbarhet b\u00e5de p\u00e5 station\u00e4ra och mobila enheter.<\/p>\n N\u00e5gra av dessa f\u00f6r\u00e4ndringar avser gr\u00e4nssnittet, exempelvis att fullsk\u00e4rmsl\u00e4get \u00e4r aktiverat som standard, block-valen har f\u00f6rb\u00e4ttrats, det finns en enkel v\u00e4xling mellan redigeringsl\u00e4ge och urvalsl\u00e4ge, fasta mobila verktygsf\u00e4lt, och br\u00f6dsmulor f\u00f6r block-navigering. Tv\u00e5 nya block och ytterligare alternativinst\u00e4llningar l\u00e4gger till fler funktioner i redigeraren.<\/p>\n H\u00e4r \u00e4r en snabb lista \u00f6ver v\u00e5ra favorit-funktioner och f\u00f6rb\u00e4ttringar i block-redigeraren som har inkluderas i WordPress 5.4:<\/p>\n Block f\u00f6r sociala ikoner <\/strong>till\u00e5ter f\u00f6rfattare att snabbt l\u00e4gga till ikoner med l\u00e4nkar till \u00a0sociala profiler<\/a> och erbjuder ett stort antal barn-block med sociala ikoner att v\u00e4lja mellan. Detta block har varit p\u00e5 experiment-stadiet ett tag och \u00e4r stabilt sedan \u00a0Gutenberg 7,5<\/a>.<\/p>\n Blocket f\u00f6r sociala ikoner levereras med tre f\u00f6rdefinierade stilar f\u00f6r dina visuella anpassningar: Standard<\/strong>, endast logotyper<\/strong> och Piller-form<\/strong>.<\/p>\n Sedan de f\u00f6rst inf\u00f6rdes som en experimentell funktion i Gutenberg 6,5 (och slogs samman i WordPress 5.3<\/a>), har sociala ikoner lagts till Gutenberg 7,5. De kanske inte fungerar som f\u00f6rv\u00e4ntat om du k\u00f6r en f\u00f6r\u00e5ldrad version av Gutenberg-pluginet.<\/p>\n Enligt Jorge Costa<\/a>, finns det tv\u00e5 s\u00e4tt att f\u00f6rhindra problem med sociala ikoner:<\/p>\n Fr\u00e5n och med Gutenberg 7.2<\/a>, byter blockredigerarens block f\u00f6r knappar<\/strong> ut blocket f\u00f6r singel-knappar<\/a>, och g\u00f6r att WordPress-anv\u00e4ndare kan l\u00e4gga till fler knappar till sitt inneh\u00e5ll inom samma blockbeh\u00e5llare.<\/p>\n Singel-knappar levereras med tv\u00e5 f\u00f6rinst\u00e4llda stilar att v\u00e4lja mellan och flera ytterligare alternativ f\u00f6r att finjustera utseendet.<\/p>\n Med WordPress 5.4, f\u00e5r webbplats\u00e4gare djupare kontroll \u00f6ver utseendet och k\u00e4nslan av deras call-to-actions tack vare till\u00e4gg av tonade bakgrunder<\/a>. Detta har \u00e4ven en handfull f\u00f6rinst\u00e4llningar som \u00e4r tillg\u00e4ngliga f\u00f6r webbplatsens admins f\u00f6r ytterligare anpassningar.<\/p>\n WordPress 5.4 l\u00e4gger till ett helt nytt v\u00e4lkomstbildspel som ger grundl\u00e4ggande information om blockredigeraren och en l\u00e4nk till onlinedokumentationen<\/a> (tillagd i Gutenberg 7.1<\/a>).<\/p>\n Modalen \u00e4r endast synlig direkt efter uppdateringen till 5.4. Om du vill utl\u00f6sa den igen \u00e4r det bara att \u00f6ppna menyn Fler verktyg och alternativ<\/strong> fr\u00e5n den \u00f6vre h\u00f6gra knappen och hitta l\u00e4nken V\u00e4lkomstguide.<\/strong><\/p>\n Fr\u00e5n och med WordPress 5.4 \u00f6ppnas redigeraren i fullsk\u00e4rmsl\u00e4ge som standard<\/a> i nya installationer och enheter. Du kan v\u00e4xla fullsk\u00e4rmsl\u00e4get<\/strong> av\/p\u00e5 genom att klicka p\u00e5 menyn Fler verktyg och alternativ<\/strong>, som visas i bilden nedan.<\/p>\n I nul\u00e4get lagras denna preferens lokalt, vilket inneb\u00e4r att den kommer att skrivas \u00f6ver n\u00e4r preferenser f\u00f6r\u00e4ndras, som n\u00e4r du kommer \u00e5t din webbplats i inkognitol\u00e4ge. I framtiden b\u00f6r denna preferens lagras i databasen, vilket g\u00f6r anv\u00e4ndarens val best\u00e4ndigt i varje sammanhang.<\/p>\n Observera att beslutet<\/a> att ha redigeraren i fullsk\u00e4rmsl\u00e4ge som standard inte enbart uppskattas. Det anses vara potentiellt f\u00f6rvirrande f\u00f6r nyb\u00f6rjare och icke-avancerade anv\u00e4ndare. Kontrollera det h\u00e4r inl\u00e4gget<\/a> om du vill veta mer om m\u00e4nniskors oro f\u00f6r fullsk\u00e4rmsl\u00e4get.<\/p>\n Utvecklare som jobbar med block-redigeraren kan styra fullsk\u00e4rmsl\u00e4get programmatiskt med endast n\u00e5gra rader av JavaScript:<\/p>\n Om du brukar skriva artiklar i l\u00e5ngform<\/a> b\u00f6r du uppskatta st\u00f6det f\u00f6r infogad text- f\u00e4rg. Innan denna uppdatering, var vi tvungna att koda RichText-block i HTML-l\u00e4ge f\u00f6r att \u00e4ndra f\u00e4rgen p\u00e5 enstaka ord och str\u00e4ngar.<\/p>\n Fr\u00e5n och med WordPress 5.4 kan vi v\u00e4lja ord och under-str\u00e4ngar i RichText-block och snabbt \u00e4ndra sina f\u00e4rger med hj\u00e4lp av den inbyggda f\u00e4rgv\u00e4ljaren.<\/p>\n WordPress 5.4 l\u00e4gger till en l\u00e5ng lista med f\u00e4rgrelaterade funktioner och f\u00f6rb\u00e4ttringar i blockredigeraren. Som jag nyss n\u00e4mnde, \u00e4r vi inte begr\u00e4nsade till fasta f\u00e4rger l\u00e4ngre. Flera block st\u00f6der nu tonade bakgrunder och f\u00f6rdefinierade upps\u00e4ttningar av toningar.<\/p>\n H\u00e4r \u00e4r en snabb lista \u00f6ver n\u00e5gra f\u00e4rgrelaterade f\u00f6rb\u00e4ttringar:<\/p>\n Ett annat bra till\u00e4gg till blockredigeraren \u00e4r block f\u00f6r utvalda bilder i de senaste inl\u00e4ggen (Gutenberg 7.5<\/a>).<\/p>\n Detta \u00e4r bara den nyaste av flera f\u00f6rb\u00e4ttringar som har lagts till i blocket f\u00f6r de senaste inl\u00e4ggen och tar oss ytterligare ett steg<\/a> mot ”mer komplexa och dynamiska eller globala block”.<\/p>\n Med WordPress 5.4, g\u00f6r blocket f\u00f6r de senaste inl\u00e4ggen att du kan dra inl\u00e4gg fr\u00e5n en specifik kategori. Det till\u00e5ter dig d\u00e4remot inte att bygga mer avancerade fr\u00e5gor efter kategori \/ tag \/ inl\u00e4ggstyp och \/ eller att inkludera \/ utesluta enstaka inl\u00e4gg.<\/p>\n Vi hoppas att vi f\u00e5r se ytterligare f\u00f6rb\u00e4ttringar i detta block i framtiden.<\/p>\n Den nya br\u00f6dsmule-menyn har till syfte att f\u00f6renkla navigeringen med kapslade block. Den \u00e4r tillg\u00e4nglig f\u00f6r Gutenberg-anv\u00e4ndare sedan version 6.7<\/a>, och nu sammanslagen i k\u00e4rnan.<\/p>\n Bilden nedan visar flera kapslade block och den nya br\u00f6dsmule<\/a>-menyn l\u00e4ngst ned.<\/p>\n Tema och block-utvecklare b\u00f6r f\u00e5 kunskap om de f\u00f6r\u00e4ndringar som har tillf\u00f6rts till block-redigeraren i WordPress 5.4. Dessa \u00e4ndringar omfattar:<\/p>\n Block-utvecklare och avancerade anv\u00e4ndare kan nu l\u00e4gga till anpassade genv\u00e4gar till blockredigeraren.<\/p>\n Ett nytt paket som kallas Utvecklare<\/a> kan l\u00e4gga till sina anpassade genv\u00e4gar genom att anropa \u00e5tg\u00e4rden f\u00f6r Detta kommer automatiskt att l\u00e4gga till den anpassade genv\u00e4gen till genv\u00e4gs- modalen som finns under knappen f\u00f6r Fler verktyg & alternativ<\/strong> i \u00f6vre h\u00f6gra h\u00f6rnet av redigeraren.<\/p>\n Vi kan sedan bifoga en hanterare f\u00f6r tangentbords-kortkommandon<\/a> med hj\u00e4lp av Du kan l\u00e4sa mer om kortkommandon p\u00e5 Make WordPress Core blog<\/a>.<\/p>\n WordPress 5.4 introducerar toningsbakgrunder med en handfull f\u00f6rinst\u00e4llningar f\u00f6r knapp-block och omslags-block. Detta sker tack vare den nya API:n f\u00f6r toningstema<\/a>.<\/p>\n Den nya API:n erbjuder \u00a0<\/p>\n Du kan inaktivera anpassade toningar med hj\u00e4lp av toningsfunktionen kan tas bort helt med hj\u00e4lp av b\u00e5de WordPress 5.4 introducerar flera f\u00f6r\u00e4ndringar i DOM-strukturen som tema-utvecklare b\u00f6r vara medvetna om.<\/p>\n F\u00f6r en detaljerad beskrivning om DOM- och CSS-\u00e4ndringar kan man l\u00e4sa Markup and style-related changes<\/a> i WordPress 5.4<\/p>\n Med det nya paketet @wordpress\/create-block f\u00f6r Block Byggnadsst\u00e4llningar, har exploat\u00f6rerna ett nytt s\u00e4tt att generera katalogstrukturen f\u00f6r ett blockredigerar-plugin. Den h\u00e4r strukturen omfattar vanligtvis index.php, index.js och style.css.<\/p>\n Blockutvecklare kan nu helt enkelt k\u00f6ra f\u00f6ljande kommando:<\/p>\n Block Collection<\/a> skapar ett s\u00e4tt att visuellt gruppera samlingar av block i ins\u00e4ttaren f\u00f6r blockredigeraren. Collections skiljer sig fr\u00e5n kategorier och skapar \u00e4nnu ett s\u00e4tt att gruppera block.<\/p>\n Det nya API:et ger en ny funktion:<\/p>\n Det introducerades med Gutenberg 7.3<\/a> \u00a0och \u00e4r nu \u00a0sammanslaget i k\u00e4rnan<\/a>. Den nya API:n g\u00f6r att tema och block-utvecklare kan organisera blocken b\u00e4ttre vilket g\u00f6r det enklare f\u00f6r anv\u00e4ndarna att uppt\u00e4cka och l\u00e4gga till block till inneh\u00e5ll.<\/p>\n\n
Vad \u00e4r nytt i block-redigeraren<\/h2>\n
\n
Nya funktioner och f\u00f6rb\u00e4ttringar i block-redigeraren<\/h3>\n
\n
Nya block f\u00f6r sociala ikoner<\/h4>\n
![\"Block](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/social-icons-1-1.jpg\"){kind=icon}
![\"Stilar](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/social-icons-2.jpg\"){kind=icon}
\n
Block f\u00f6r nya knappar<\/h4>\n
![\"Blocket](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/buttons-block.png\")
![\"Knappinst\u00e4llningar](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/button-settings.jpg\")
![\"Omarbetade](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/gradient-background.jpg\")
En V\u00e4lkomst-guide Modal<\/h4>\n
![\"V\u00e4lkomst-guide](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/welcome-modal-1-1.jpg\")
![\"V\u00e4lkomst-guide\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/welcome-guide-2.jpg\")
Fullsk\u00e4rmsl\u00e4ge \u00e4r aktiverat som standard<\/h4>\n
![\"Fullsk\u00e4rmsl\u00e4get](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/fullscreen-mode.png\")
const isFullscreenMode = wp.data.select( 'core\/edit-post' ).isFeatureActive( 'fullscreenMode' );\n\nif ( isFullscreenMode ) {\n\twp.data.dispatch( 'core\/edit-post' ).toggleFeature( 'fullscreenMode' );\n}<\/code><\/pre>\nBlock f\u00f6r infogat textf\u00e4rg-st\u00f6d i RichText<\/h4>\n
![\"Alternativet](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/richtext-color-option.jpg\")
![\"RichText](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/richtext-color-1.jpg\")
Ytterligare f\u00e4rgalternativ f\u00f6r flera block<\/h4>\n
\n
![\"Omslags-block](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/cover-block.jpg\")
Block f\u00f6r utvalda bilder i de senaste inl\u00e4ggen<\/h4>\n
![\"Block](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/latest-posts.jpg\")
En ny br\u00f6dsmule-meny f\u00f6r block-navigering<\/h4>\n
![\"Den](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/breadcrumbs-1.jpg\")
\u00c4ndringar i blockredigeraren f\u00f6r tema och Block-utvecklare<\/h3>\n
\n
Tangentbordsgenv\u00e4gar f\u00f6r block-redigeraren<\/h4>\n
@wordpress\/keyboard-shortcuts<\/code> har inf\u00f6rts<\/a> f\u00f6r att centralisera registrering, borttagning och dokumentation av redigerarens genv\u00e4gar.<\/p>\nregisterShortcut<\/code> p\u00e5 detta s\u00e4tt:<\/p>\nwp.data.dispatch( 'core\/keyboard-shortcuts' ).registerShortcut( {\n\n\t\/\/ Shortcut identifier\n\tname: 'plugin\/shortcut-test',\n\n\t\/\/ Shortcut category (possible values global, block, selection)\n\tcategory: 'global',\n\n\t\/\/ Shortcut description\n\tdescription: 'My first shortcut',\n\n\t\/\/ The key combination that triggers the shortcut\n\tkeyCombination: {\n\n\t\t\/\/ Available modifiers:\n\t\t\/\/ primary, primaryShift, primaryAlt,\n\t\t\/\/ secondary, access, ctrl, alt,\n\t\t\/\/ ctrlShift, shift, shiftAlt\n\t\tmodifier: 'alt',\n\t\tcharacter: 'w',\n\t},\n\n\t\/\/ An alias for the key combination\n\taliases: [\n\t\t{\n\t\t\tmodifier: 'primary',\n\t\t\tcharacter: 'q',\n\t\t},\n\t],\n} );<\/code><\/pre>\n![\"En](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/my-first-shortcut.jpg\")
useShortcut<\/code> funktionen:<\/p>\nimport { useShortcut } from '@wordpress\/keyboard-shortcuts';\nimport { useCallback } from '@wordpress\/element';\n\nconst MyComponent = () => {\n\tuseShortcut(\n\n\t\t'plugin\/shortcut-test',\n\n\t\tuseCallback(\n\t\t\t( event ) => {\n\t\t\t\t\/\/ Do something\n\t\t\t},\n\t\t\t[]\n\t\t)\n\t);\n}<\/code><\/pre>\nAPI:s f\u00f6r toningstema<\/h4>\n
editor-gradient-presets<\/code> temast\u00f6ds-alternativet som g\u00f6r att tema-utvecklare kan \u00e5sidos\u00e4tta standard-f\u00f6rinst\u00e4llningar och definiera sina egna<\/a>:<\/p>\nadd_theme_support(\n\t'editor-gradient-presets',\n\tarray(\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',\n\t\t\t'slug'\t\t=> 'cedetblue-chartreuse'\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'Chocolate to Coral', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',\n\t\t\t'slug'\t\t=> 'chocolate-to-coral',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',\n\t\t\t'slug'\t\t=> 'darkmagenta-to-darkorchid',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',\n\t\t\t'slug'\t\t=> 'deepskyblue-to-dodgerblue',\n\t\t),\n\t)\n);<\/code><\/pre>\n![\"Anpassade](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/custom-gradient-presets.jpg\")
\n
name<\/code>: en meningsfull etikett som ger information om toningen. Detta \u00e4r s\u00e4rskilt anv\u00e4ndbart f\u00f6r sk\u00e4rml\u00e4sare och anv\u00e4ndare som har sv\u00e5rt att skilja p\u00e5 vissa f\u00e4rger.<\/li>\ngradient<\/code>: CSS-v\u00e4rden f\u00f6r toningen.<\/li>\nslug<\/code>: en identifierare f\u00f6r att generera CSS-klasser<\/a> som anv\u00e4nds i blockredigeraren.<\/li>\n<\/ul>\n![\"Anpassade](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/03\/gradient-tooltip.jpg\")
disable-custom-gradients<\/code> temast\u00f6ds-alternativet:<\/p>\nadd_theme_support( 'disable-custom-gradients' );<\/code><\/pre>\ndisable-custom-gradients<\/code> och \u00a0editor-gradients-presets<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );\nadd_theme_support( 'editor-gradient-presets', array() );<\/code><\/pre>\n\u00c4ndringar av markering och format p\u00e5 blockredigeraren<\/h4>\n
\n
editor-<\/code>klassprefixet har tagits bort fr\u00e5n blockredigerarens skript och nu b\u00f6r utvecklare endast anv\u00e4nda block-editor- prefixet<\/li>\nedit-post-layout__content<\/code>-klassen har tagits bort fr\u00e5n DOM i blockredigeraren.<\/li>\ndiv<\/code>-wrappers har tagits bort fr\u00e5n RichText och andra block eftersom de \u00e4r \u00f6verfl\u00f6diga. Denna f\u00f6r\u00e4ndring medf\u00f6r en betydande prestandaf\u00f6rb\u00e4ttring och f\u00f6renklar DOM-tr\u00e4det, en sak som b\u00f6r uppskattas av block- och temautvecklare<\/a>.<\/li>\nBlock Byggnadsst\u00e4llningar<\/h4>\n
$ npm init @wordpress\/block block-name<\/code><\/pre>\nBlock Collection<\/h4>\n
registerBlockCollection( namespace, { title, icon } );<\/code><\/pre>\n\n
namespacee<\/code>: matchas mot ett blockprefix.<\/li>\ntitle<\/code>: detta \u00e4r den etikett som visas i block-ins\u00e4ttaren.<\/li>\nicon<\/code>: detta \u00e4r ikonen som visas med titeln i block-ins\u00e4ttaren.<\/li>\n<\/ul>\nBlock Variations<\/h4>\n