diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
index cdda006..2d1bc23 100644
--- a/client/dist/js/bundle.js
+++ b/client/dist/js/bundle.js
@@ -1 +1 @@
-!function(){"use strict";var e={274:function(e,t,o){var n,r=(n=o(521))&&n.__esModule?n:{default:n};window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)()}))},521:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=a(o(648)),r=a(o(335)),l=a(o(165));function a(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{n.default.component.registerMany({ColorPickerField:r.default,FontPickerField:l.default})}},335:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var o=u(t);if(o&&o.has(e))return o.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=r?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}n.default=e,o&&o.set(e,n);return n}(o(363)),r=s(o(86)),l=o(648),a=s(o(754)),i=o(127);function s(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,o=new WeakMap;return(u=function(e){return e?o:t})(e)}class c extends n.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this),this.state={isOpen:!1,value:e.value}}handleToggle(){this.setState({isOpen:!this.state.isOpen})}renderButton(){const{value:e}=this.state,{colors:t,name:o}=this.props;let r;return e&&(r=t.find((t=>{let{CSSClass:o}=t;return o===e}))),r=r||t[0],n.default.createElement(i.Button,{id:`Popover_${o}`,onClick:this.handleToggle,className:"color-picker-field-button"},n.default.createElement("div",{className:"color-picker-field-button__color-icon",style:{backgroundColor:r?r.Color:"transparent"}}),n.default.createElement("div",{className:"color-picker-field-button__color-label"},r?r.Title:n.default.createElement("em",null,a.default._t("ColorPickerField.EMPTY_TITLE","None"))))}renderPopover(){const{PopoverOptionSetComponent:e,colors:t,name:o}=this.props,{isOpen:r,value:l}=this.state,i=e=>[n.default.createElement("span",{className:"color-picker-field-popover__option-icon",style:{backgroundColor:e.Color}}),n.default.createElement("span",{className:"color-picker-field-popover__option-label"},e.Title)],s=t.map((e=>({key:e.CSSClass,content:i(e),className:["color-picker-field-popover__option",{"color-picker-field-popover__option--selected":e.CSSClass===l}],text:e.Title,onClick:()=>{this.handleToggle(),this.setState({value:e.CSSClass})}})));return n.default.createElement(e,{buttons:s,searchPlaceholder:a.default._t("ColorPickerField.SEARCH_BLOCKS","Search colours"),className:"color-picker-field-popover",placement:"bottom-start",onSearch:(e,t)=>t.filter((t=>{let{text:o}=t;return o.toLowerCase().includes(e.toLowerCase())})),isOpen:r,target:`Popover_${o}`,toggle:this.handleToggle})}render(){const{name:e}=this.props,{value:t}=this.state;return n.default.createElement("div",null,this.renderButton(),this.renderPopover(),n.default.createElement("input",{name:e,type:"hidden",value:t}))}}c.propTypes={colors:r.default.arrayOf(r.default.shape({Title:r.default.text,CSSClass:r.default.text,Color:r.default.text})),name:r.default.string,value:r.default.string};var d=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"ColorPickerField"))(c);t.default=d},165:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var o=u(t);if(o&&o.has(e))return o.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=r?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}n.default=e,o&&o.set(e,n);return n}(o(363)),r=s(o(86)),l=o(648),a=s(o(754)),i=o(127);function s(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,o=new WeakMap;return(u=function(e){return e?o:t})(e)}class c extends n.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this),this.state={isOpen:!1,value:e.value,selectedFont:this.getFontByValue(e.value).Title}}getFontByValue(e){const{fonts:t}=this.props;let o;return e&&(o=t.find((t=>{let{CSSClass:o}=t;return o===e}))),o=o||t[0],o}handleToggle(){this.setState({isOpen:!this.state.isOpen})}renderSelectorButton(){const{value:e}=this.state,{name:t}=this.props,o=this.getFontByValue(e);return n.default.createElement(i.Button,{id:`Popover_${t}`,onClick:this.handleToggle,className:"font-picker-field-button font-icon-caret-down-two"},o?o.Title:n.default.createElement("em",null,a.default._t("FontPickerField.EMPTY_TITLE","None")))}renderPopover(){const{PopoverOptionSetComponent:e,fonts:t,name:o}=this.props,{isOpen:r,value:l}=this.state,a=t.map((e=>({key:e.CSSClass,content:e.Title,className:["font-picker-field-popover__option",{"font-picker-field-popover__option--selected":e.CSSClass===l}],buttonProps:{style:{fontFamily:`'${e.Title}'`}},text:e.Title,onClick:()=>{this.handleToggle(),this.setState({value:e.CSSClass,selectedFont:e.Title})}})));return n.default.createElement(e,{disableSearch:!0,buttons:a,className:"font-picker-field-popover",placement:"bottom-start",isOpen:r,target:`Popover_${o}`,toggle:this.handleToggle})}renderSelectedFontPreview(){const{selectedFont:e}=this.state,t=a.default._t("FontPickerField.PREVIEW_FONT_SENTENCE","The quick brown fox jumps over the lazy dog."),o=a.default._t("FontPickerField.PREVIEW_FONT_ALPHABET",'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 - = _ + < > ? / . , : "');return n.default.createElement("div",{className:"font-picker-field__selection-preview",style:{fontFamily:`'${e}'`||"inherit"}},t,n.default.createElement("br",null),o)}render(){const{name:e}=this.props,{value:t}=this.state;return n.default.createElement("div",null,this.renderSelectorButton(),this.renderPopover(),this.renderSelectedFontPreview(),n.default.createElement("input",{name:e,type:"hidden",value:t}))}}c.propTypes={fonts:r.default.arrayOf(r.default.shape({Title:r.default.text,CSSClass:r.default.text})),name:r.default.string,value:r.default.string};var d=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"FontPickerField"))(c);t.default=d},944:function(e,t,o){var n=i(o(311)),r=i(o(363)),l=o(691),a=o(648);function i(e){return e&&e.__esModule?e:{default:e}}n.default.entwine("ss",(e=>{e(".js-injector-boot .form__field-holder .color-picker-field").entwine({ReactRoot:null,onmatch(){const e=(0,a.loadComponent)("ColorPickerField"),t=this.data("schema"),o={colors:t.source,value:t.value,name:t.name};let n=this.getReactRoot();n||(n=(0,l.createRoot)(this[0]),this.setReactRoot(n)),n.render(r.default.createElement(e,o))},onunmatch(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))}}),e(".js-injector-boot .form__field-holder .font-picker-field").entwine({ReactRoot:null,onmatch(){const e=(0,a.loadComponent)("FontPickerField"),t=this.data("schema"),o={fonts:t.source,value:t.value,name:t.name};let n=this.getReactRoot();n||(n=(0,l.createRoot)(this[0]),this.setReactRoot(n)),n.render(r.default.createElement(e,o))},onunmatch(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))}})}))},648:function(e){e.exports=Injector},86:function(e){e.exports=PropTypes},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},127:function(e){e.exports=Reactstrap},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,o),l.exports}o(944),o(274)}();
\ No newline at end of file
+!function(){"use strict";var e={274:function(e,t,o){var n,r=(n=o(521))&&n.__esModule?n:{default:n};window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)()}))},521:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=a(o(648)),r=a(o(335)),l=a(o(165));function a(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{n.default.component.registerMany({ColorPickerField:r.default,FontPickerField:l.default})}},335:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var o=u(t);if(o&&o.has(e))return o.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=r?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}n.default=e,o&&o.set(e,n);return n}(o(363)),r=s(o(86)),l=o(648),a=s(o(754)),i=o(127);function s(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,o=new WeakMap;return(u=function(e){return e?o:t})(e)}class c extends n.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this),this.state={isOpen:!1,value:e.value}}handleToggle(){this.setState((e=>({isOpen:!e.isOpen})))}renderButton(){const{value:e}=this.state,{colors:t,name:o}=this.props;let r;return e&&(r=t.find((t=>{let{CSSClass:o}=t;return o===e}))),r=r||t[0],n.default.createElement(i.Button,{id:`Popover_${o}`,onClick:this.handleToggle,className:"color-picker-field-button"},n.default.createElement("div",{className:"color-picker-field-button__color-icon",style:{backgroundColor:r?r.Color:"transparent"}}),n.default.createElement("div",{className:"color-picker-field-button__color-label"},r?r.Title:n.default.createElement("em",null,a.default._t("ColorPickerField.EMPTY_TITLE","None"))))}renderPopover(){const{PopoverOptionSetComponent:e,colors:t,name:o}=this.props,{isOpen:r,value:l}=this.state,i=e=>[n.default.createElement("span",{className:"color-picker-field-popover__option-icon",style:{backgroundColor:e.Color}}),n.default.createElement("span",{className:"color-picker-field-popover__option-label"},e.Title)],s=t.map((e=>({key:e.CSSClass,content:i(e),className:["color-picker-field-popover__option",{"color-picker-field-popover__option--selected":e.CSSClass===l}],text:e.Title,onClick:()=>{this.handleToggle(),this.setState({value:e.CSSClass})}})));return n.default.createElement(e,{buttons:s,searchPlaceholder:a.default._t("ColorPickerField.SEARCH_BLOCKS","Search colours"),className:"color-picker-field-popover",placement:"bottom-start",onSearch:(e,t)=>t.filter((t=>{let{text:o}=t;return o.toLowerCase().includes(e.toLowerCase())})),isOpen:r,target:`Popover_${o}`,toggle:this.handleToggle})}render(){const{name:e}=this.props,{value:t}=this.state;return n.default.createElement("div",null,this.renderButton(),this.renderPopover(),n.default.createElement("input",{name:e,type:"hidden",value:t}))}}c.propTypes={colors:r.default.arrayOf(r.default.shape({Title:r.default.text,CSSClass:r.default.text,Color:r.default.text})),name:r.default.string,value:r.default.string};var d=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"ColorPickerField"))(c);t.default=d},165:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var o=u(t);if(o&&o.has(e))return o.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=r?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}n.default=e,o&&o.set(e,n);return n}(o(363)),r=s(o(86)),l=o(648),a=s(o(754)),i=o(127);function s(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,o=new WeakMap;return(u=function(e){return e?o:t})(e)}class c extends n.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this),this.state={isOpen:!1,value:e.value,selectedFont:this.getFontByValue(e.value).Title}}getFontByValue(e){const{fonts:t}=this.props;let o;return e&&(o=t.find((t=>{let{CSSClass:o}=t;return o===e}))),o=o||t[0],o}handleToggle(){this.setState((e=>({isOpen:!e.isOpen})))}renderSelectorButton(){const{value:e}=this.state,{name:t}=this.props,o=this.getFontByValue(e);return n.default.createElement(i.Button,{id:`Popover_${t}`,onClick:this.handleToggle,className:"font-picker-field-button font-icon-caret-down-two"},o?o.Title:n.default.createElement("em",null,a.default._t("FontPickerField.EMPTY_TITLE","None")))}renderPopover(){const{PopoverOptionSetComponent:e,fonts:t,name:o}=this.props,{isOpen:r,value:l}=this.state,a=t.map((e=>({key:e.CSSClass,content:e.Title,className:["font-picker-field-popover__option",{"font-picker-field-popover__option--selected":e.CSSClass===l}],buttonProps:{style:{fontFamily:`'${e.Title}'`}},text:e.Title,onClick:()=>{this.handleToggle(),this.setState({value:e.CSSClass,selectedFont:e.Title})}})));return n.default.createElement(e,{disableSearch:!0,buttons:a,className:"font-picker-field-popover",placement:"bottom-start",isOpen:r,target:`Popover_${o}`,toggle:this.handleToggle})}renderSelectedFontPreview(){const{selectedFont:e}=this.state,t=a.default._t("FontPickerField.PREVIEW_FONT_SENTENCE","The quick brown fox jumps over the lazy dog."),o=a.default._t("FontPickerField.PREVIEW_FONT_ALPHABET",'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 - = _ + < > ? / . , : "');return n.default.createElement("div",{className:"font-picker-field__selection-preview",style:{fontFamily:`'${e}'`||"inherit"}},t,n.default.createElement("br",null),o)}render(){const{name:e}=this.props,{value:t}=this.state;return n.default.createElement("div",null,this.renderSelectorButton(),this.renderPopover(),this.renderSelectedFontPreview(),n.default.createElement("input",{name:e,type:"hidden",value:t}))}}c.propTypes={fonts:r.default.arrayOf(r.default.shape({Title:r.default.text,CSSClass:r.default.text})),name:r.default.string,value:r.default.string};var d=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"FontPickerField"))(c);t.default=d},944:function(e,t,o){var n=i(o(311)),r=i(o(363)),l=o(691),a=o(648);function i(e){return e&&e.__esModule?e:{default:e}}n.default.entwine("ss",(e=>{e(".js-injector-boot .form__field-holder .color-picker-field").entwine({ReactRoot:null,onmatch(){const e=(0,a.loadComponent)("ColorPickerField"),t=this.data("schema"),o={colors:t.source,value:t.value,name:t.name};let n=this.getReactRoot();n||(n=(0,l.createRoot)(this[0]),this.setReactRoot(n)),n.render(r.default.createElement(e,o))},onunmatch(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))}}),e(".js-injector-boot .form__field-holder .font-picker-field").entwine({ReactRoot:null,onmatch(){const e=(0,a.loadComponent)("FontPickerField"),t=this.data("schema"),o={fonts:t.source,value:t.value,name:t.name};let n=this.getReactRoot();n||(n=(0,l.createRoot)(this[0]),this.setReactRoot(n)),n.render(r.default.createElement(e,o))},onunmatch(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))}})}))},648:function(e){e.exports=Injector},86:function(e){e.exports=PropTypes},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},127:function(e){e.exports=Reactstrap},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,o),l.exports}o(944),o(274)}();
\ No newline at end of file
diff --git a/client/src/components/ColorPickerField/ColorPickerField.js b/client/src/components/ColorPickerField/ColorPickerField.js
index 6223c9e..a8baf69 100644
--- a/client/src/components/ColorPickerField/ColorPickerField.js
+++ b/client/src/components/ColorPickerField/ColorPickerField.js
@@ -17,9 +17,9 @@ class ColorPickerField extends Component {
   }
 
   handleToggle() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
+    this.setState((prevState) => ({
+      isOpen: !prevState.isOpen,
+    }));
   }
 
   renderButton() {
diff --git a/client/src/components/FontPickerField/FontPickerField.js b/client/src/components/FontPickerField/FontPickerField.js
index 44b488b..858219c 100644
--- a/client/src/components/FontPickerField/FontPickerField.js
+++ b/client/src/components/FontPickerField/FontPickerField.js
@@ -37,9 +37,9 @@ class FontPickerField extends Component {
   }
 
   handleToggle() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
+    this.setState((prevState) => ({
+      isOpen: !prevState.isOpen,
+    }));
   }
 
   renderSelectorButton() {