rename siteLang to locale, make language field use SupportedLang...

README.md

@@ -55,24 +55,6 @@ This option will enable an image and an alignment widget in the block settings,
 config.blocks.blocksConfig.quote.showImageField = true;
 ```
 
-#### `defaultLang`
-
-This option will set the default language in which the quotation marks should be shown. By default this option is set to `EN`.
-
-```js
-config.blocks.blocksConfig.quote.defaultLang = 'EN';
-```
-
-#### `allowedLanguages`
-
-This option will set the languages that are available to show the . By default this option is set to `['EN', 'DE']`.
-
-```js
-config.blocks.blocksConfig.quote.allowedLanguages = ['EN', 'DE'];
-```
-
-Currently available languages: EN, DE
-
 ## Credits
 
 <img alt="Deutsches Zentrum für Luft- und Raumfahrt (DLR)" width="200px" src="https://www.dlr.de/static/media/Logo-de.697a8e1f.svg" style="background-color:white">

news/16.feature

@@ -0,0 +1,3 @@
+- rename blockquote `siteLang` attribute to `locale`
+- remove default languages & use available languages from plone's `SupportedContentLanguages` vocabulary instead [@jonaspiterek]
+- language drop down now show's "English" / "Deutsch" instead of just "en" and "de" (because of the used vocabulary) [@jonaspiterek]

src/components/View.jsx

@@ -3,11 +3,9 @@ import config from '@plone/volto/registry';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
-import { useSelector } from 'react-redux';
 
 const View = (props) => {
-  const { data, isEditMode } = props;
-  const language = useSelector((state) => state.intl.locale);
+  const { data, isEditMode, intl } = props;
 
   const customSlateSettings = {
     ...props,
@@ -39,7 +37,7 @@ const View = (props) => {
         <blockquote
           cite={data.cite}
           lang={data.quotationLanguage}
-          siteLang={language}
+          locale={intl.locale}
         >
           {!isEditMode ? (
             <TextBlockView {...props} />

src/components/schema.js

@@ -38,33 +38,16 @@ const messages = defineMessages({
 });
 
 export const QuoteBlockSchema = ({ intl }) => {
-  const defaultLang = config.blocks?.blocksConfig?.quote?.defaultLang;
-  const allowedLanguages = config.blocks?.blocksConfig?.quote?.allowedLanguages;
-  const DEFAULT_LANGUAGES = [
-    ['en', 'en'],
-    ['de', 'de'],
-  ];
-
-  const filterDefaultLanguages = () => {
-    if (allowedLanguages) {
-      return DEFAULT_LANGUAGES.filter((item) =>
-        allowedLanguages.includes(item[0]),
-      );
-    } else {
-      return DEFAULT_LANGUAGES;
-    }
-  };
-
   return {
     title: intl.formatMessage(messages.quote),
     block: 'quote',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: config?.blocks?.blocksConfig?.quote?.showImageField
-          ? ['image']
-          : [],
+        fields: config?.blocks?.blocksConfig?.quote?.showImageField && [
+          'image',
+        ],
       },
       {
         id: 'author',
@@ -78,13 +61,6 @@ export const QuoteBlockSchema = ({ intl }) => {
       },
     ],
     properties: {
-      quotationLanguage: {
-        title: intl.formatMessage(messages.quotationLanguage),
-        choices: filterDefaultLanguages(),
-        default: defaultLang,
-        noValueOption: false,
-        description: intl.formatMessage(messages.description),
-      },
       image: {
         title: intl.formatMessage(messages.image),
         widget: 'object_browser',
@@ -98,6 +74,13 @@ export const QuoteBlockSchema = ({ intl }) => {
       additional_information: {
         title: intl.formatMessage(messages.additional_information),
       },
+      quotationLanguage: {
+        title: intl.formatMessage(messages.quotationLanguage),
+        vocabulary: {
+          '@id': 'plone.app.vocabularies.SupportedContentLanguages',
+        },
+        description: intl.formatMessage(messages.description),
+      },
       cite: {
         title: intl.formatMessage(messages.cite),
         widget: 'url',

src/index.js

@@ -22,8 +22,6 @@ const applyConfig = (config) => {
     // If an image is added and later on the image field get's disabled by setting 'showImageField' to 'false',
     // the image and alignment fields aswell as the image won't show any longer.
     showImageField: true,
-    defaultLang: 'en',
-    allowedLanguages: ['en', 'de'],
   };
 
   return config;

src/theme/main.less

@@ -2,12 +2,12 @@
   outline: none;
 }
 
-.block-editor-quote blockquote div {
+.block-editor-quote blockquote > div {
   margin: 0em 0em 1em;
 }
 
 .block.quote blockquote:not(.block-editor-quote blockquote) {
-  &[siteLang='en'] p {
+  &[locale='en'] p {
     &::before {
       content: '"';
     }
@@ -17,7 +17,7 @@
     }
   }
 
-  &[siteLang='de'] p {
+  &[locale='de'] p {
     &::before {
       content: '„';
     }