| | 986 | (({ |
| | 987 | hooks: { addFilter }, |
| | 988 | element: { createElement: e, Fragment: f }, |
| | 989 | blockEditor: { InspectorControls }, |
| | 990 | components: { PanelBody, TextControl }, |
| | 991 | i18n: { __ } |
| | 992 | }) => { |
| | 993 | const allowedBlocks = new Set(['core/paragraph']); |
| | 994 | |
| | 995 | addFilter( |
| | 996 | 'blocks.registerBlockType', |
| | 997 | 'slide/register-block-attributes', |
| | 998 | (settings) => { |
| | 999 | if (!allowedBlocks.has(settings.name)) { |
| | 1000 | return settings; |
| | 1001 | } |
| | 1002 | |
| | 1003 | return { |
| | 1004 | ...settings, |
| | 1005 | attributes: { |
| | 1006 | ...settings.attributes, |
| | 1007 | fontFamily: { |
| | 1008 | type: 'string' |
| | 1009 | } |
| | 1010 | } |
| | 1011 | }; |
| | 1012 | } |
| | 1013 | ); |
| | 1014 | |
| | 1015 | addFilter( |
| | 1016 | 'editor.BlockEdit', |
| | 1017 | 'slide/control-block-attributes', |
| | 1018 | (BlockEdit) => { |
| | 1019 | return (props) => { |
| | 1020 | const { attributes, setAttributes, isSelected, name } = props; |
| | 1021 | return e( |
| | 1022 | f, |
| | 1023 | null, |
| | 1024 | e(BlockEdit, props), |
| | 1025 | isSelected && allowedBlocks.has(name) && e( |
| | 1026 | InspectorControls, |
| | 1027 | null, |
| | 1028 | e( |
| | 1029 | PanelBody, |
| | 1030 | { |
| | 1031 | title: __('Font Family', 'slide'), |
| | 1032 | icon: 'format-video', |
| | 1033 | initialOpen: false |
| | 1034 | }, |
| | 1035 | e(TextControl, { |
| | 1036 | label: __('Font Family'), |
| | 1037 | value: attributes.fontFamily, |
| | 1038 | onChange: (fontFamily) => setAttributes({ fontFamily }) |
| | 1039 | }) |
| | 1040 | ) |
| | 1041 | ) |
| | 1042 | ); |
| | 1043 | }; |
| | 1044 | } |
| | 1045 | ); |
| | 1046 | |
| | 1047 | addFilter( |
| | 1048 | 'editor.BlockListBlock', |
| | 1049 | 'slide/edit-block-attributes', |
| | 1050 | (BlockListBlock) => { |
| | 1051 | return (props) => { |
| | 1052 | if (allowedBlocks.has(props.block.name)) { |
| | 1053 | const { wrapperProps = {}, attributes } = props; |
| | 1054 | const { style = {} } = wrapperProps; |
| | 1055 | const { fontFamily } = attributes; |
| | 1056 | |
| | 1057 | if (fontFamily) { |
| | 1058 | props = { |
| | 1059 | ...props, |
| | 1060 | wrapperProps: { |
| | 1061 | ...wrapperProps, |
| | 1062 | style: { |
| | 1063 | ...style, |
| | 1064 | fontFamily |
| | 1065 | } |
| | 1066 | } |
| | 1067 | }; |
| | 1068 | } |
| | 1069 | } |