Gutenberg

Omschrijving

De blokeditor werd geïntroduceerd in standaard WordPress met versie 5.0, maar het Gutenberg-project zal uiteindelijk invloed hebben op de hele publicatie-ervaring, inclusief aanpassingen daaraan (het volgende focusgebied). Met deze bètaplug-in kun je geavanceerde functies rondom bewerkings- en aanpassingsprojecten testen voordat ze in toekomstige WordPress-releases terechtkomen.

Ontdek meer over het project.

Focus bij het bewerken

De editor geeft de gebruiker een nieuwe gebruikservaring voor het schrijven van pagina’s en berichten die het schrijven van rich posts moeiteloos maakt, en “blokken” bevat die het eenvoudig maken om iets te maken waar je nu shortcodes, aangepaste HTML, of “mystery meat” insluitingsopties voor nodig hebt. – Matt Mullenweg

Eén ding dat WordPress onderscheidt van andere systemen, is dat je het toestaat een prachtige berichtlayout te maken — maar alleen wanneer je HTML en CSS kent en je eigen aangepaste thema kunt maken. Door de editor te zien als een hulpmiddel die je in staat stelt berichten met designinvloeden te schrijven en prachtige layouts te maken, kunnen we WordPress omvormen in iets waar gebruikers van houden in plaats van iets dat ze kiezen omdat iedereen het gebruikt.

Gutenberg ziet de editor als meer dan een veld met inhoud, en herziet een layout die al bijna een decennium grotendeels onveranderd is gebleven. Dit stelt ons in staat om een moderne bewerkingservaring holistisch vorm te geven, en een basis te leggen voor zaken die komen gaan.

Hierom kijken we naar het volledige editor scherm kijken, en niet alleen naar het veld met de inhoud:

  1. Het blok verenigt meerdere interfaces in zich. Voegen we dat toe bovenop de bestaande interface, dan zou dit de complexiteit vergroten in plaats van het te verminderen.
  2. Door de interface opnieuw te bekijken, kunnen we de schrijf-, bewerkings-, en publiceerervaring moderniseren, met gebruiksgemak en eenvoud in het achterhoofd, waarvan zowel nieuwe als terloopse gebruikers profiteren.
  3. Wanneer een enkel blok interface centraal staat, toont dit een duidelijk pad voor ontwikkelaars voor het maken van premium blokken, superieur aan zowel de shortcodes en widgets.
  4. Door de hele interface te herzien leggen we een solide basis voor de volgende focus, volledige site-aanpassing.
  5. Door naar het gehele editor scherm te kijken hebben we ook de kans om de basis drastisch te moderniseren, en stappen te nemen richting een een meer vloeiende en door JavaScript aangedreven toekomst die de WordPress REST API volledig benut.

Blokken

Blokken zijn de uiteindelijke evolutie van wat nu op verschillende manieren mogelijk wordt gemaakt door shortcodes, insluitingen, widgets, berichtformaten, aangepaste berichttypen, thema-opties, metaboxen, en andere opmaakelementen. Ze belichamen de verscheidenheid aan functionaliteit die mogelijk is met WordPress, met een duidelijke en consequente gebruikerservaring.

Stel je bijvoorbeeld een aangepast “werknemers” blok voor, dat een cliënt naar een pagina Over Ons kan slepen, en dat automatisch een afbeelding, naam, en bio laat zien. Een heel universum aan plugins die WordPress allemaal op dezelfde manier uitbreiden. Vereenvoudigde menu’s en widgets. Gebruikers die WordPress – en 90% van de plugins – meteen begrijpen en kunnen gebruiken. Hiermee kun je eenvoudig prachtige berichten opstellen, zoals dit voorbeeld.

Bekijk ook de FAQ voor antwoorden op de meest gestelde vragen over dit project.

Compatibiliteit

Berichten zijn achterwaarts compatibel, en shortcodes blijven nog steeds werken. We onderzoeken continu hoe op maat gemaakte metaboxen kunnen blijven werken, en we kijken naar oplossingen die gaan van een plug-in om Gutenberg uit te schakelen tot het automatisch detecteren of Gutenberg wel of niet moet worden geladen. We willen zorgen dat de nieuwe bewerkingservaring van schrijven naar publiceren gebruiksvriendelijk is, maar we willen ook graag een goede oplossing voor bestaande, op maat gemaakte, sites.

De fasen van Gutenberg

Het Gutenberg project bestaat uit drie geplande fasen. De eerste, die wordt opgenomen in WordPress 5.0, richt zich op de bewerkingservaring van berichten en het implementeren van blokken. Deze initiële fase concentreert zich op een inhoud-eerst benadering. Het gebruik van blokken, zoals hierboven beschreven staat, stelt je in staat om je te concentreren op hoe je inhoud eruit gaat zien zonder dat je wordt afgeleid door andere configuratie-opties. Dit zal uiteindelijk ervoor zorgen dat alle gebruikers hun inhoud op een boeiende, directe, en visuele manier kunnen laten zien.

Deze fundamentele elementen zullen de basis vormen voor de tweede en de derde fase, gepland voor volgend jaar, om verder te gaan dan de berichten in de pagina templates en op den duur het aanpassen van de volledige site mogelijk te maken.

Gutenberg is een grote verandering, en er zullen manieren zijn om ervoor te zorgen dat de bestaande functionaliteit (zoals shortcodes en metaboxen) blijven werken terwijl de ontwikkelaars de tijd en mogelijkheden krijgen om zonder problemen over te stappen. Uiteindelijk zal dit de plugin- en themaontwikkelaars beter in staat stellen om de gebruikers te voorzien van een boeiender en meer visuele ervaring die gebruik maakt van gereedschappen die door de core worden ondersteund.

Bijdragers

Gutenberg wordt gebouwd door veel bijdragers en vrijwilligers. Bekijk de volledige lijst op CONTRIBUTORS.md.

Blokken

Deze plugin heeft 17 blokken.

core/block
Gutenberg
core/template-part
Gutenberg
core/social-link-
Gutenberg
core/post-content
Gutenberg
core/latest-posts
Gutenberg
core/shortcode
Gutenberg
core/legacy-widget
Gutenberg
core/tag-cloud
Gutenberg
core/categories
Gutenberg
core/post-title
Gutenberg
core/latest-comments
Gutenberg
core/site-title
Gutenberg
core/navigation
Gutenberg
core/calendar
Gutenberg
core/archives
Gutenberg
core/search
Gutenberg
core/rss
Gutenberg

FAQ

Hoe verstuur ik feedback of krijg ik hulp bij een fout?

Stuur ons je foutrapporten, suggesties voor nieuwe functionaliteit, en andere feedback! Ga naar de GitHub problemenpagina om te zoeken naar bestaande problemen of een nieuw probleem te openen. Hoewel we proberen om problemen, die hier op het plugin-forum zijn gemeld, bij te houden, krijg je een sneller antwoord (en verminder je dubbele inspanning) door alles gecentraliseerd te houden in de GitHub-repository.

Hoe kan ik bijdragen?

We noemen dit editor project “Gutenberg” omdat het een flinke onderneming is. We werken er elke dag aan in GitHub, en we zouden je hulp bij het bouwen ervan erg waarderen. Je kunt ons ook feedback geven. De de eenvoudigste manier om dit te doen is je aanmelden bij ons Slack kanaal, #core-editor.

Zie ook CONTRIBUTING.md.

Waar kan ik meer lezen over Gutenberg?

Beoordelingen

18 januari 2020
This is really nice solution. I like it much more then classic editor.
17 januari 2020
This is a nightmare. I can't do anything I want with. Diverse HTML tags are taken out of your control entirely. If you want complete control over your HTML, then you need to save and maintain your content off-site, edit your HTML there, paste it into the Gutenberg-editor, save and view. If you want to change your content later, the you will have to relocate the matching html code you had saved somewhere on your computer... Is this supposed to be innovation? This is a one-way HTML editor. Once you paste your HTML into Gutenberg, then half of it is gone after saving...
15 januari 2020
How do you cut and paste plain text and then format? Not easy - when you create a new para block it adds an extra line. No easy way to convert HTML back and forth without it screwing up. Doesn't recognize <i> tags when pasting. How do you insert a block? Does weird reformatting when you don't expect it. User interface is totally confusing - the so-called 'clean UI' just means there are no visual prompts. How do you superscript or subscript? Shall I go on? Total fail. This is an example of developers trying to be clever but not relying on user input for their design/coding decisions.
15 januari 2020
Since I installed Gutenberg I felt in love again with WordPress. Everything is a shortcut now and it's amazing.
15 januari 2020
Why is this plugin still supplied with WP. Its the worst plugin I have ever worked upon
Lees alle 3.007 beoordelingen

Bijdragers & ontwikkelaars

“Gutenberg” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

“Gutenberg” is vertaald in 46 talen. Dank voor de vertalers voor hun bijdragen.

Vertaal “Gutenberg” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

New Features

  • Add a new Buttons block. #17352
  • Support adding links to Media & Text block image. #18139
  • Navigation block: Support changing the font size. #19127
  • Gallery block: Add images size selector. #18581

Enhancements

  • Improve the block inserter search algorithm. #19122
  • Improve the block placeholders design and responsiveness. #18745
  • Navigation mode: Auto-enable when tabbing to the block list with an existing block selection. #19238 #19298
  • Use tabs for gradient and color. #19133
  • Add “download” keyword to the File block. #18995
  • Add “poem” keyword to the Verse block. #19355
  • Convert to blocks:
    • preserve text alignment. #19097
    • Skip shortcode if not on its own line. #19059
  • Writing flow: Improve tabbing for Edit mode. #19235
  • Use Popover for the block toolbar. #18779
  • Improve the block multi-selection styles. #19094 #19121
  • Support reduced-motion for Social Links transitions. #18750
  • Use the default cursor for Select Tool #19157
  • Round position attributes on cover focal point save. #19183
  • Remove block inserter shortcuts. #19045
  • Navigation block:
    • Clarify the placeholder label. #19105
    • Removes the reusable block option from the items. #19250
    • Sub-items white background adjustment. #18976
  • Adjustments to the welcome guide. #19195
  • Audio block: Don’t render an empty audio tag. #18850
  • Make validation of block html tags and attributes case insensitive #19207
  • Block examples: concatenate strings and add translators notes. #19048
  • Show the trash button as a link. #19131
  • Removed the bottom-margin for the RadioControl component. #19340
  • Copy:
    • Capitalize “Manager” in Block Manager. #19375
    • Expand on sentence case usage. #18758 #19377
    • Update the copy of the Experiments page #18233
    • Removes title case from alignments for text and image. #18757
    • Unify not capitalizing the heading for each of the attributes. #19374
    • Updates description of the navigation block. #19098

Performance:

  • Remove the BlockAsyncRenderProvider and render parents asynchronously #19343

Bugs:

  • A11y:
    • Make text alignment items radio menu items. #19233
    • Add group role to the block wrapper element. #19213
    • Prevent tabbing to the block drag handle. #19211
    • Add a label attribute to the Social Icons block. #18651
    • Improve Welcome guide and modal component. #19261 #19290
  • Pasting:
    • Content that results in a new block shouldn’t be treated as inline content. #19084
    • Preserve inline images. #19064
    • Remove trailing br elements. #19035
    • Remove windows paste markers. #19040
    • Strip HTML formatting space for inline text. #19043
    • Apply active formats when pasting inline. #14815
  • Rich Text:
    • Fix applying a format across 2 other formats. #19053
    • Fix using composed characters on Safari. #19171
  • Fix block navigation using the up arrow key. #19135
  • Fix Welcome Guide modal display for Internet Explorer. #19201
  • Fix Gallery block crashing on the contributor role. #19060
  • Only show available image sizes for Image and Gallery blocks. #19301
  • Remove the circle mask style from the Image block, and add a “rounded” style instead. #19028
  • Fix the Jest Preset Default package: Update preset file extension for inclusion in NPM deployments. #19306
  • Fix the Base Styles package: Import colors into variables. #19159
  • Limit the Next Page (Page Break) block to root level only. #18260
  • Navigation mode: fix reverse tabbing to the post title. #19305
  • Reposition Popovers on click. #19268
  • Fix RangeControl initialPosition prop to accept 0 as a value. #18611 #19202
  • CustomSelectControl: Use items width instead of 100%. #19150
  • Verse block: fix white space. #19173
  • Add missing i18n to the Latest Posts block settings strings #19032
  • Fix ColorPicker alpha value normalization. #18991
  • Fix Post title encoding. #19187
  • Fix dates alignments in the picker. #19294
  • Media Replace Flow: Don’t show the URL option unless there is a handler. #19063
  • Popover: don’t render fallback anchor if anchorRef is defined. #19308
  • Fix cursor position when splitting blocks with IME keyboard. #19055
  • URLInput: Avoid showing the suggestions loader when disabled. #18979
  • Translate block example strings. #18162
  • Writing flow: simplify & fix tabbing out of block. #19312

New APIs:

  • Button component:
    • Support the icon prop and use a consistent button height. #19193 #19366 #19123 #19058
    • Deprecate IconButton and replace its usage with Button. #19299 #19241
    • Support isPressed prop in Button and SVG components. #17748
  • New the @wordpress/keyboard-shortcuts package:
  • New React hook: useInstanceId. #19091
  • Support running arbitrary commands on the @wordpress/env containers and use it for linting and server registered fixtures. #18986
  • Font Size Picker: Add default size #18273

Experiments

  • Full Site Editing:
    • Add package with barebones site editor screen. #19054
    • Add Multi-Entity Saving flow. #18029 #19155
  • Widgets screen & customizer:
    • Fix Customiser block editor crash. #19023
    • Fix Drag & Drop not working on the widgets screen. #19029
  • Allow parent Block to consume child Block’s toolbar. #18440
  • Allow disabling the Block UI. #18173
  • Block Directory:
    • Update the regular expression that determines whether the plugin is using an img URL or an icon slug. #19316
    • Use the block’s title for alt text on block directory plugin items. #19263

Documentation

Various

  • Block Editor: Remove legacy “editor-” class name compatibility. #19050(https://github.com/wordpress/gutenberg/pull/19046)
  • Block Editor: Test ContrastChecker notices by string comparison. #19169
  • Fix useColors crashes on storybook. [#19046]
  • Data: Remove unused forceRender argument #19206
  • Define useSelect dependencies properly. #19044
  • Deprecate @wordpress/nux package. #18981
  • E2E Test Utils: Remove empty, unused KeyboardMode file. #19166
  • Popover: remove buffer options #19283
  • Refactor the MediaReplaceFlow component to use Dropdown. #19126
  • Remove unused is-hovered class from the block wrapper. #19390
  • RichText:
    • Rewrite withFilters with hooks. #19117
    • split out boundary style calculation. #19319
  • WritingFlow: rewrite with hooks. #19393
  • Project management: Add prepublish packages command for npm releases. #19214
  • Remove unused blocks-font-size classname. #19208
  • Add a pre-commit hook to check whether API docs are updated. #18820
  • Add mechanism to set a width on withViewportMatch. #17085
  • Add minimum and maximum values to the Gallery columns attribute. #16314
  • Include demo block templates in build ZIP. #19072
  • Fix CSS Coding Standards issue. #19272
  • Resolve WordPress package type imports. #18927
  • Add e2e tests:
    • Splitting and merging text. #19049
    • InnerBlocks renderAppender. #14996
    • Navigation block. #19189
    • Validate embed rendering before proceeding to next #19042
  • Add unit tests to the useViewportMatch and useMediaQuery React hooks. #19019