first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,173 @@
+/**
+ * Internal dependencies
+ */
+import {
+	replaceClass,
+	getActiveClass,
+} from '../../../gutenberg/utils/classes-replacer';
+
+/**
+ * WordPress dependencies
+ */
+const {
+	__,
+} = wp.i18n;
+
+const {
+	registerBlockStyle,
+} = wp.blocks;
+
+const {
+	Component,
+	Fragment,
+} = wp.element;
+
+const {
+	PanelBody,
+	SelectControl,
+} = wp.components;
+
+const {
+	InspectorControls,
+} = wp.blockEditor;
+
+const {
+	addFilter,
+} = wp.hooks;
+
+const {
+	createHigherOrderComponent,
+} = wp.compose;
+
+const {
+	withDispatch,
+} = wp.data;
+
+
+registerBlockStyle( 'core/paragraph', {
+	name: 'cnvs-paragraph-callout',
+	label: __( 'Callout' ),
+} );
+
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning the custom styles if needed.
+ *
+ * @param {function|Component} BlockEdit Original component.
+ *
+ * @return {string} Wrapped component.
+ */
+const paragraphWithCanvasDropcap = createHigherOrderComponent( ( BlockEdit ) => {
+	class NewEdit extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.activeClasses = '';
+
+			this.getDropcapStyle = this.getDropcapStyle.bind( this );
+			this.updateDropcapStyle = this.updateDropcapStyle.bind( this );
+		}
+
+		/**
+		 * Get dropcap style from classname on the block.
+		 *
+		 * @return {String}
+		 */
+		getDropcapStyle() {
+			const {
+				attributes,
+			} = this.props;
+
+			return getActiveClass( attributes.className, 'is-cnvs-dropcap' );
+		}
+
+		/**
+		 * Update dropcap classname on the block.
+		 *
+		 * @param {String} dropcapName name of dropcap style
+		 * @memberof NewEdit
+		 */
+		updateDropcapStyle( dropcapName ) {
+			const {
+				attributes,
+				onChangeClassName,
+			} = this.props;
+
+			const updatedClassName = replaceClass( attributes.className, 'is-cnvs-dropcap', dropcapName );
+
+			onChangeClassName( updatedClassName );
+		}
+
+		render() {
+			if ( 'core/paragraph' !== this.props.name ) {
+				return <BlockEdit { ...this.props } />;
+			}
+
+			const {
+				attributes,
+			} = this.props;
+
+			if ( attributes.dropCap ) {
+				let dropcapStyle = this.getDropcapStyle();
+
+				if ( dropcapStyle ) {
+					dropcapStyle = dropcapStyle.replace( /^is-cnvs-dropcap-/, '' );
+				}
+
+				return (
+					<Fragment>
+						<BlockEdit { ...this.props } />
+						<InspectorControls>
+							<PanelBody
+								title={ __( 'Dropcap Style' ) }
+							>
+								<SelectControl
+									value={ dropcapStyle }
+									options={ [
+										{
+											label: __( 'Default' ),
+											value: '',
+										}, {
+											label: __( 'Simple' ),
+											value: 'simple',
+										}, {
+											label: __( 'Bordered' ),
+											value: 'bordered',
+										}, {
+											label: __( 'Border Right' ),
+											value: 'border-right',
+										}, {
+											label: __( 'Background Light' ),
+											value: 'bg-light',
+										}, {
+											label: __( 'Background Dark' ),
+											value: 'bg-dark',
+										},
+									] }
+									onChange={ ( val ) => {
+										this.updateDropcapStyle( val );
+									} }
+								/>
+							</PanelBody>
+						</InspectorControls>
+					</Fragment>
+				);
+			}
+
+			return <BlockEdit { ...this.props } />;
+		}
+	}
+
+	return withDispatch( ( dispatch, { clientId } ) => {
+		return {
+			onChangeClassName( newClassName ) {
+				dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, {
+					className: newClassName,
+				} );
+			},
+		};
+	} )( NewEdit );
+}, 'paragraphWithCanvasDropcap' );
+
+addFilter( 'editor.BlockEdit', 'canvas/paragraph/dropcap', paragraphWithCanvasDropcap );