Group toolbar code icons

Organize inline-code and code-block icons
in the toolbar for subtle IA improvement

app/assets/javascripts/vue_shared/components/rich_content_editor/constants.js

@@ -14,7 +14,6 @@ const TOOLBAR_ITEM_CONFIGS = [
   { isDivider: true },
   { icon: 'quote', command: 'Blockquote', tooltip: __('Insert a quote') },
   { icon: 'link', event: 'openPopupAddLink', tooltip: __('Add a link') },
-  { icon: 'doc-code', command: 'CodeBlock', tooltip: __('Insert a code block') },
   { isDivider: true },
   { icon: 'list-bulleted', command: 'UL', tooltip: __('Add a bullet list') },
   { icon: 'list-numbered', command: 'OL', tooltip: __('Add a numbered list') },
@@ -27,6 +26,7 @@ const TOOLBAR_ITEM_CONFIGS = [
   { icon: 'doc-image', event: CUSTOM_EVENTS.openAddImageModal, tooltip: __('Insert an image') },
   { isDivider: true },
   { icon: 'code', command: 'Code', tooltip: __('Insert inline code') },
+  { icon: 'doc-code', command: 'CodeBlock', tooltip: __('Insert a code block') },
 ];
 
 export const EDITOR_OPTIONS = {

changelogs/unreleased/220616-group-code-icons-in-toolbar.yml

+---
+title: Update Static Site Editor toolbar to group inline-code and code-block buttons together
+merge_request: 34006
+author:
+type: changed