Add instruction block inside content block

client/src/components/content-blocks/ContentComponent.vue

@@ -38,6 +38,7 @@
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Survey from '@/components/content-blocks/SurveyBlock';
   import Solution from '@/components/content-blocks/Solution';
+  import Instruction from '@/components/content-blocks/Instruction';
   import BookmarkActions from '@/components/notes/BookmarkActions';
 
   import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
@@ -63,6 +64,7 @@
       'thinglink_block': ThinglinkBlock,
       Survey,
       Solution,
+      Instruction,
       Assignment,
       BookmarkActions
     },

client/src/components/content-blocks/Instruction.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="instruction" v-if="me.isTeacher">
+    <bulb-icon class="instruction__icon"></bulb-icon>
+    <a class="instruction__link" :href="value.url">{{text}}</a>
+  </div>
+</template>
+
+<script>
+  import me from '@/mixins/me';
+  import BulbIcon from '@/components/icons/BulbIcon';
+
+  export default {
+    props: ['value'],
+
+    mixins: [me],
+
+    components: {
+      BulbIcon
+    },
+
+    computed: {
+      text() {
+        return this.value.text ? this.value.text : 'Anweisungen'
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+  .instruction {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      background-color: $color-brand;
+      fill: $color-white;
+      border-radius: 20px;
+      margin-right: $small-spacing;
+    }
+
+    &__link {
+      @include heading-3;
+    }
+  }
+</style>

server/books/blocks.py

@@ -110,6 +110,14 @@ class ModuleRoomSlugBlock(blocks.StructBlock):
 
     title = blocks.TextBlock()
 
+
+class InstructionBlock(blocks.StructBlock):
+    class Meta:
+        icon = 'help'
+
+    url = blocks.URLBlock()
+    text = blocks.TextBlock(required=False)
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()

server/books/models/contentblock.py

@@ -8,7 +8,7 @@ from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
     ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock, SurveyBlock, ModuleRoomSlugBlock, \
-    ThinglinkBlock
+    ThinglinkBlock, InstructionBlock
 from books.utils import get_type_and_value
 from core.wagtail_utils import StrictHierarchyPage
 from notes.models import ContentBlockBookmark
@@ -60,6 +60,7 @@ class ContentBlock(StrictHierarchyPage):
         ('genially_block', GeniallyBlock()),
         ('thinglink_block', ThinglinkBlock()),
         ('subtitle', SubtitleBlock()),
+        ('instruction', InstructionBlock()),
         ('module_room_slug', ModuleRoomSlugBlock())
     ]