D8CORE-943 Added more image styles for wysiwyg (#146)

* D8CORE-943: Added more image styles for WYSIWYG
* D8CORE-943: Remove height limits on a few styles.
* D8CORE-943: Add tests.

config/sync/core.entity_view_display.media.image.media_library.yml

@@ -5,9 +5,10 @@ dependencies:
   config:
     - core.entity_view_mode.media.media_library
     - field.field.media.image.field_media_image
-    - image.style.medium
+    - image.style.medium_square
     - media.type.image
   module:
+    - field_formatter_class
     - image
 _core:
   default_config_hash: PaGXvzRcL9eII--JV4eCVfObjrNo0l-u1dB_WJtB9ig
@@ -22,9 +23,11 @@ content:
     region: content
     label: hidden
     settings:
-      image_style: medium
+      image_style: medium_square
       image_link: ''
-    third_party_settings: {  }
+    third_party_settings:
+      field_formatter_class:
+        class: ''
 hidden:
   created: true
   field_media_image: true

config/sync/core.entity_view_display.media.image.stanford_image_large_square.yml

@@ -0,0 +1,40 @@
+uuid: 820c0473-1fd7-4dc8-a27b-da2d09d3329e
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.stanford_image_large_square
+    - field.field.media.image.field_media_image
+    - image.style.large_square
+    - media.type.image
+  module:
+    - field_formatter_class
+    - image
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    allow_custom: false
+    enabled: false
+_core:
+  default_config_hash: 4Ny-qpsNb-KZOCogLHV8JHe6zj4XdpwpDi_eu-qFVCs
+id: media.image.stanford_image_large_square
+targetEntityType: media
+bundle: image
+mode: stanford_image_large_square
+content:
+  field_media_image:
+    label: hidden
+    settings:
+      image_style: large_square
+      image_link: ''
+    third_party_settings:
+      field_formatter_class:
+        class: ''
+    type: image
+    weight: 0
+    region: content
+hidden:
+  created: true
+  name: true
+  thumbnail: true
+  uid: true

config/sync/core.entity_view_display.media.image.stanford_image_medium_square.yml

@@ -0,0 +1,40 @@
+uuid: e4902a8b-70d0-4bc8-a945-015f66b94b08
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.stanford_image_medium_square
+    - field.field.media.image.field_media_image
+    - image.style.medium_square
+    - media.type.image
+  module:
+    - field_formatter_class
+    - image
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    allow_custom: false
+    enabled: false
+_core:
+  default_config_hash: 4Ny-qpsNb-KZOCogLHV8JHe6zj4XdpwpDi_eu-qFVCs
+id: media.image.stanford_image_medium_square
+targetEntityType: media
+bundle: image
+mode: stanford_image_medium_square
+content:
+  field_media_image:
+    label: hidden
+    settings:
+      image_style: medium_square
+      image_link: ''
+    third_party_settings:
+      field_formatter_class:
+        class: ''
+    type: image
+    weight: 0
+    region: content
+hidden:
+  created: true
+  name: true
+  thumbnail: true
+  uid: true

config/sync/core.entity_view_display.media.image.stanford_image_thumb_square.yml

@@ -0,0 +1,40 @@
+uuid: f6b5546b-02e1-436f-9e73-7cb8b733c37c
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.stanford_image_thumb_square
+    - field.field.media.image.field_media_image
+    - image.style.thumbnail_square
+    - media.type.image
+  module:
+    - field_formatter_class
+    - image
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    allow_custom: false
+    enabled: false
+_core:
+  default_config_hash: 4Ny-qpsNb-KZOCogLHV8JHe6zj4XdpwpDi_eu-qFVCs
+id: media.image.stanford_image_thumb_square
+targetEntityType: media
+bundle: image
+mode: stanford_image_thumb_square
+content:
+  field_media_image:
+    label: hidden
+    settings:
+      image_style: thumbnail_square
+      image_link: ''
+    third_party_settings:
+      field_formatter_class:
+        class: ''
+    type: image
+    weight: 0
+    region: content
+hidden:
+  created: true
+  name: true
+  thumbnail: true
+  uid: true

config/sync/core.entity_view_mode.media.stanford_image_large.yml

@@ -5,6 +5,6 @@ dependencies:
   module:
     - media
 id: media.stanford_image_large
-label: 'Large (480×480)'
+label: 'Large (480px wide, un-cropped)'
 targetEntityType: media
 cache: true

config/sync/core.entity_view_mode.media.stanford_image_large_square.yml

@@ -0,0 +1,10 @@
+uuid: b4c371d5-a2ab-4b9c-87cc-af621a2c28d0
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.stanford_image_large_square
+label: 'Large square (480px, cropped)'
+targetEntityType: media
+cache: true

config/sync/core.entity_view_mode.media.stanford_image_medium.yml

@@ -5,6 +5,6 @@ dependencies:
   module:
     - media
 id: media.stanford_image_medium
-label: 'Medium (220×220)'
+label: 'Medium (220px wide, un-cropped) '
 targetEntityType: media
 cache: true

config/sync/core.entity_view_mode.media.stanford_image_medium_square.yml

@@ -0,0 +1,10 @@
+uuid: 8fdf9d55-05a0-4568-a2e1-59b2e3ea51a1
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.stanford_image_medium_square
+label: 'Medium square (220px, cropped)'
+targetEntityType: media
+cache: true

config/sync/core.entity_view_mode.media.stanford_image_stanford_circle.yml

@@ -5,6 +5,6 @@ dependencies:
   module:
     - media
 id: media.stanford_image_stanford_circle
-label: Circle
+label: 'Circle headshot (112px, cropped)'
 targetEntityType: media
 cache: true

config/sync/core.entity_view_mode.media.stanford_image_thumb_square.yml

@@ -0,0 +1,10 @@
+uuid: 5e79a0f5-cc22-4cb2-b732-647185e1e7e5
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.stanford_image_thumb_square
+label: 'Thumb (100px, cropped)'
+targetEntityType: media
+cache: true

config/sync/core.entity_view_mode.media.thumbnail.yml

@@ -7,6 +7,6 @@ dependencies:
 _core:
   default_config_hash: 6lKEwketpQdX89N_7xP5lPFRpc9TiP2bUE0XK1deEkA
 id: media.thumbnail
-label: Thumbnail
+label: 'Thumb (100px wide, un-cropped)'
 targetEntityType: media
 cache: true

config/sync/editor.editor.stanford_html.yml

@@ -53,11 +53,11 @@ settings:
             - Source
             - PasteFromWord
   plugins:
-    stylescombo:
-      styles: "a.su-button|Button\r\na.su-button--big|Big Button\r\na.su-button--secondary|Secondary Button\r\na.su-link--action|Action Link\r\np.plain-text|Normal\r\np.su-intro-text|Intro Text\r\np.su-font-splash|Splash Font\r\np.su-quote-text|Quote Text\r\np.su-drop-cap|Drop Cap First Letter\r\np.su-related-text|Card Text\r\np.su-callout-text|Callout Text\r\np.su-subheading|Sub Title"
     drupallink:
       linkit_enabled: true
       linkit_profile: default
+    stylescombo:
+      styles: "a.su-button|Button\r\na.su-button--big|Big Button\r\na.su-button--secondary|Secondary Button\r\na.su-link--action|Action Link\r\np.plain-text|Normal\r\np.su-intro-text|Intro Text\r\np.su-font-splash|Splash Font\r\np.su-quote-text|Quote Text\r\np.su-drop-cap|Drop Cap First Letter\r\np.su-related-text|Card Text\r\np.su-callout-text|Callout Text\r\np.su-subheading|Sub Title"
     language:
       language_list: un
 image_upload:

config/sync/filter.format.stanford_html.yml

@@ -4,8 +4,11 @@ status: true
 dependencies:
   config:
     - core.entity_view_mode.media.stanford_image_large
+    - core.entity_view_mode.media.stanford_image_large_square
     - core.entity_view_mode.media.stanford_image_medium
+    - core.entity_view_mode.media.stanford_image_medium_square
     - core.entity_view_mode.media.stanford_image_stanford_circle
+    - core.entity_view_mode.media.stanford_image_thumb_square
     - core.entity_view_mode.media.thumbnail
   module:
     - editor
@@ -92,8 +95,11 @@ filters:
       allowed_view_modes:
         default: default
         stanford_image_large: stanford_image_large
+        stanford_image_large_square: stanford_image_large_square
         stanford_image_medium: stanford_image_medium
+        stanford_image_medium_square: stanford_image_medium_square
         stanford_image_stanford_circle: stanford_image_stanford_circle
+        stanford_image_thumb_square: stanford_image_thumb_square
         thumbnail: thumbnail
   stanford_media_embed_markup:
     id: stanford_media_embed_markup

config/sync/image.style.large.yml

@@ -5,13 +5,13 @@ dependencies: {  }
 _core:
   default_config_hash: J2n0RpFzS0-bgSyxjs6rSdgxB1rb-bTAgqywNx_964M
 name: large
-label: 'Large (480×480)'
+label: 'Large (480 wide)'
 effects:
   ddd73aa7-4bd6-4c85-b600-bdf2b1628d1d:
     uuid: ddd73aa7-4bd6-4c85-b600-bdf2b1628d1d
     id: image_scale
     weight: 0
     data:
       width: 480
-      height: 480
+      height: null
       upscale: false

config/sync/image.style.large_square.yml

@@ -0,0 +1,17 @@
+uuid: d8917450-2ccf-4789-b76b-f168f53c53d7
+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: large_square
+label: 'Large Square (480x480)'
+effects:
+  1040d0df-12a5-4ee2-80ab-5699fb351ce8:
+    uuid: 1040d0df-12a5-4ee2-80ab-5699fb351ce8
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 480
+      height: 480
+      crop_type: focal_point

config/sync/image.style.medium.yml

@@ -5,13 +5,13 @@ dependencies: {  }
 _core:
   default_config_hash: Y9NmnZHQq20ASSyTNA6JnwtWrJJiSajOehGDtmUFdM0
 name: medium
-label: 'Medium (220×220)'
+label: 'Medium (220 wide)'
 effects:
   bddf0d06-42f9-4c75-a700-a33cafa25ea0:
     uuid: bddf0d06-42f9-4c75-a700-a33cafa25ea0
     id: image_scale
     weight: 0
     data:
       width: 220
-      height: 220
+      height: null
       upscale: false

config/sync/image.style.medium_square.yml

@@ -0,0 +1,17 @@
+uuid: aab90a08-0d0e-4186-8439-3c3d53959c96
+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: medium_square
+label: 'Medium Square (220x220)'
+effects:
+  5684c6dd-0ef1-4108-abab-192a9f5e711f:
+    uuid: 5684c6dd-0ef1-4108-abab-192a9f5e711f
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 220
+      height: 220
+      crop_type: focal_point

config/sync/image.style.thumbnail.yml

@@ -5,13 +5,13 @@ dependencies: {  }
 _core:
   default_config_hash: cCiWdBHgLwj5omG35lsKc4LkW4MBdmcctkVop4ol5x0
 name: thumbnail
-label: 'Thumbnail (100×100)'
+label: 'Thumbnail (100 wide)'
 effects:
   1cfec298-8620-4749-b100-ccb6c4500779:
     uuid: 1cfec298-8620-4749-b100-ccb6c4500779
     id: image_scale
     weight: 0
     data:
       width: 100
-      height: 100
+      height: null
       upscale: false

config/sync/image.style.thumbnail_square.yml

@@ -0,0 +1,17 @@
+uuid: 8f1d083f-2bd4-44cb-a8fa-c0057f5b12f4
+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: thumbnail_square
+label: 'Thumbnail Square (100x100)'
+effects:
+  8bd095fd-3d2d-4ba3-bed6-fcf30394815e:
+    uuid: 8bd095fd-3d2d-4ba3-bed6-fcf30394815e
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 100
+      height: 100
+      crop_type: focal_point

config/sync/user.role.site_manager.yml

@@ -28,10 +28,10 @@ permissions:
   - 'administer users'
   - 'assign contributor role'
   - 'assign site_editor role'
+  - 'assign site_manager role'
   - 'assign stanford_faculty role'
   - 'assign stanford_staff role'
   - 'assign stanford_student role'
-  - 'assign site_manager role'
   - 'cancel account'
   - 'change own username'
   - 'choose layout for node stanford_page'

tests/behat/features/TextFormats.feature

@@ -0,0 +1,33 @@
+@api
+Feature: Text formats
+  In order to verify that Configuration is accurate
+  As a administrator
+  I should check various text format configuration settings.
+
+  @testthis
+  Scenario: Basic HTML
+    Given I am logged in as a user with the "administrator" role
+    And I am on "/admin/config/content/formats/manage/stanford_html"
+    Then the checkbox "Large (480px wide, un-cropped)" should be checked
+    And the checkbox "Large square (480px, cropped)" should be checked
+    And the checkbox "Medium (220px wide, un-cropped)" should be checked
+    And the checkbox "Medium square (220px, cropped)" should be checked
+    And the checkbox "Circle headshot (112px, cropped)" should be checked
+    And the checkbox "Thumb (100px, cropped)" should be checked
+    And the checkbox "Thumb (100px wide, un-cropped)" should be checked
+    And the checkbox "Full content" should not be checked
+    And the checkbox "Media library" should not be checked
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_large"
+    And I should see "Image style: Large (480 wide)"
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_large_square"
+    And I should see "Image style: Large Square (480x480)"
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_medium"
+    And I should see "Image style: Medium (220 wide)"
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_medium_square"
+    And I should see "Image style: Medium Square (220x220)"
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_stanford_circle"
+    And I should see "Image style: Circle"
+    Then I am on "/admin/structure/media/manage/image/display/stanford_image_thumb_square"
+    And I should see "Image style: Thumbnail Square (100x100)"
+    Then I am on "/admin/structure/media/manage/image/display/thumbnail"
+    And I should see "Image style: Thumbnail (100 wide)"