Add the Divider Block to the block editor

closes RCX-2589
flag=block_editor

test plan:
  - add a divider block
  > expect a divider line

Change-Id: I33cac6d34709dd765281695ffdec2e6e36902afb
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/360975
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Luis Oliveira <luis.oliveira@instructure.com>
QA-Review: Luis Oliveira <luis.oliveira@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>

ui/shared/block-editor/react/components/blocks.ts

@@ -27,6 +27,7 @@ import {PageBlock} from './user/blocks/PageBlock'
 import {ImageBlock} from './user/blocks/ImageBlock'
 import {RCEBlock} from './user/blocks/RCEBlock'
 import {GroupBlock} from './user/blocks/GroupBlock'
+import {DividerBlock} from './user/blocks/DividerBlock'
 
 // sections
 import {ResourcesSection, ResourcesSectionInner} from './user/sections/ResourcesSection'
@@ -71,6 +72,7 @@ const blocks = {
   TabsBlock,
   TabBlock,
   TabContent,
+  DividerBlock,
 }
 
 export {blocks}

ui/shared/block-editor/react/components/editor/Toolbox/BlocksPanel.tsx

@@ -33,6 +33,7 @@ import {IconBlock, IconBlockIcon} from '../../user/blocks/IconBlock'
 import {RCEBlock, RCEBlockIcon} from '../../user/blocks/RCEBlock'
 import {TabsBlock, TabsBlockIcon} from '../../user/blocks/TabsBlock'
 import {GroupBlock, GroupBlockIcon} from '../../user/blocks/GroupBlock'
+import {DividerBlock, DividerBlockIcon} from '../../user/blocks/DividerBlock'
 
 import {createFromTemplate} from '../../../utils'
 import {type BlockTemplate, type TemplateNodeTree} from '../../../types'
@@ -230,6 +231,7 @@ const BlocksPanel = ({
       {renderBox('Image', ImageBlockIcon, <ImageBlock />)}
       {renderBox('Group', GroupBlockIcon, <GroupBlock />)}
       {renderBox('Tabs', TabsBlockIcon, <TabsBlock />)}
+      {renderBox('Divider', DividerBlockIcon, <DividerBlock />)}
       {renderTemplateBoxes()}
     </Flex>
   )

ui/shared/block-editor/react/components/user/blocks/DividerBlock/DividerBlock.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import {useNode, type Node} from '@craftjs/core'
+import {useScope} from '@canvas/i18n'
+
+const I18n = useScope('block-editor')
+
+const DividerBlock = () => {
+  const {
+    connectors: {connect, drag},
+    node,
+  } = useNode((n: Node) => {
+    return {
+      node: n,
+    }
+  })
+
+  return (
+    <div
+      role="treeitem"
+      aria-label={node.data.displayName}
+      aria-selected={node.events.selected}
+      className="block divider-block"
+      ref={el => el && connect(drag(el as HTMLElement))}
+      tabIndex={-1}
+    />
+  )
+}
+
+DividerBlock.craft = {
+  displayName: I18n.t('Divider'),
+  custom: {
+    isBlock: true,
+  },
+}
+
+export {DividerBlock}

ui/shared/block-editor/react/components/user/blocks/DividerBlock/index.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {DividerBlock} from './DividerBlock'
+
+const DividerBlockIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9.38461H15.8462V8H2V9.38461Z" fill="currentColor"/>
+<path d="M9.53033 0.46967C9.23744 0.176777 8.76256 0.176777 8.46967 0.46967L3.6967 5.24264C3.40381 5.53553 3.40381 6.01041 3.6967 6.3033C3.98959 6.59619 4.46447 6.59619 4.75736 6.3033L9 2.06066L13.2426 6.3033C13.5355 6.59619 14.0104 6.59619 14.3033 6.3033C14.5962 6.01041 14.5962 5.53553 14.3033 5.24264L9.53033 0.46967ZM9.75 2L9.75 1L8.25 1L8.25 2L9.75 2Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3033 12.7574L9.53034 17.5303C9.23745 17.8232 8.76257 17.8232 8.46968 17.5303L3.69671 12.7574C3.40381 12.4645 3.40381 11.9896 3.69671 11.6967C3.9896 11.4038 4.46447 11.4038 4.75737 11.6967L9.00001 15.9393L13.2426 11.6967C13.5355 11.4038 14.0104 11.4038 14.3033 11.6967C14.5962 11.9896 14.5962 12.4645 14.3033 12.7574Z" fill="currentColor"/>
+</svg>
+`
+
+export {DividerBlock, DividerBlockIcon}

ui/shared/block-editor/react/style.css

@@ -589,6 +589,14 @@
   line-height: 0;
 }
 
+.divider-block {
+  width: 95%;
+  height: 1px;
+  min-height: 1px;
+  margin: 0 auto;
+  border-top: 1px solid var(--ic-brand-font-color-dark);
+}
+
 @container block-editor-view (320px < width <= 768px) {
   .columns-section {
     &.columns-3,
@@ -703,7 +711,7 @@
   }
 }
 
-.block-template-preview-card {
+text-template-preview-card {
   background-position: left top;
   background-repeat: no-repeat;
   background-size: 100% auto;