leeshadle

Sorry @nico23 I’m not fully understanding the code you wanted and you mentioned being interested in including the entire Gutenberg sidebar. Here’s the code for the class selector:

/**
 * External Dependencies
 */

/**
 * WordPress Dependencies
 */
import { __ } from '@wordpress/i18n';
import { createHigherOrderComponent } from '@wordpress/compose';
import { BlockControls,  InspectorAdvancedControls } from '@wordpress/block-editor';
import { BaseControl, Button, MenuGroup, ToolbarDropdownMenu, TextControl } from "@wordpress/components";
import { dispatch, useSelect } from '@wordpress/data';
import { getPath } from '@wordpress/url';
const { openGeneralSidebar } = dispatch( 'core/edit-post' ) || {};
const { openGeneralSidebar: openGeneralSidebarSiteEditor } = dispatch( 'core/edit-site' ) || {};

/**
 * Internal Dependencies
 */
import ClassPicker from '../../components/class-picker';
import pluginIcons from '../../utils/icons';
import './index.scss';
const slug = 'draft';

const addUtilityClassesToBlockEdit = createHigherOrderComponent(
	( BlockEdit ) => {
		return ( props ) => {
			const {
				setAttributes,
				isSelected,
			} = props;

			let {
				attributes: {
					className,
				},
			} = props;

			const isSiteEditor = getPath( window.location.href )?.includes(
				'site-editor.php'
			);

			const { pluginSettings, isSavingPost, isAutosavingPost } = useSelect(
				( select ) => {

					const pluginSettings = select(
						${ slug }/settings
					).getPluginSettings();

					// const isSavingPost = select('core/editor').isSavingPost();
					// const isAutosavingPost = select('core/editor').isAutosavingPost();

					return {
						pluginSettings,
						// isAutosavingPost,
						// isSavingPost,
					};
			} );

			const { mode } = pluginSettings;

			const onChange = ( newValues, { action, removedValue } ) => {
				if( !! newValues ) {
					className = newValues
						.map( ( newValue ) => {
							let { value } = newValue;

							return value;
						} )
						.toString()
						.replace( /,/g, ' ' );
				}

				if( ! newValues ) {
					className = '';
				}

				setAttributes( {
					className,
				} );
			};

			if( !! className ) {
				className = className.split( ' ' );
				className = className.map( ( option ) => {

					return {
						label: option.replace( 'tw-', '' ),
						value: option,
					};
				} )
			}

			return (
				<>
					<BlockEdit
						{ ...props }
					/>
					{
						mode === 'development' &&
						<>
						<BlockControls
							group="other"
						>
							<ToolbarDropdownMenu
								icon={ pluginIcons.plugin }
								label={ __( 'Add Utility Classes', 'draft' ) }
								popoverProps={ {
									position: 'bottom right',
									variant: 'alternate',
								} }
								menuProps={ { 'className': 'no-icons' } }>
								{ ( { onClose } ) => (
									<>
										<MenuGroup
											className="pb-0"
										>
											<BaseControl
												className="mt-0"
												help={ __( Separate multiple classes with spaces., 'draft' ) }
											>
												<TextControl
													label="Additional CSS Class(es)"
													value={ !! className ? className.map( className => className.value ).toString().replace(/,/g,' ') : '' }
													onChange={ ( nextValue ) => {
														setAttributes( {
															className:
																nextValue !== ''
																	? nextValue
																	: undefined,
														} )
													}	}
												/>
											</BaseControl>
											<ClassPicker
												onChange={ onChange }
												className={ className }
												autofocus={ false }
												blurInputOnSelect={ false }
											/>
										</MenuGroup>
										<MenuGroup>
											<Button variant="link" onClick={ () => isSiteEditor ? openGeneralSidebarSiteEditor( ${ slug }/settings ) : openGeneralSidebar( ${ slug }/settings ) }>{ __( 'Edit default settings', 'draft' ) }</Button>
										</MenuGroup>
									</>
								) }
							</ToolbarDropdownMenu>
						</BlockControls>
						<InspectorAdvancedControls>
							<ClassPicker
								onChange={ onChange }
								className={ className }
								autofocus={ false }
								blurInputOnSelect={ false }
							/>
							<Button variant="link" onClick={ () => isSiteEditor ? openGeneralSidebarSiteEditor( ${ slug }/settings ) : openGeneralSidebar( ${ slug }/settings ) }>{ __( 'Edit default settings', 'draft' ) }</Button>
						</InspectorAdvancedControls>
						</>
					}
				</>
			);
		}
	},
	'addUtilityClassesToBlockEdit'
);

const name = 'add-utility-classes-to-blocks';
const filters = [
	{
		hookName: 'editor.BlockEdit',
		namespace: ${ slug }/add-draft-classes-to-block-edit,
		callback: addUtilityClassesToBlockEdit,
	},
];

export { name, filters };

I think the key part you’re looking for is using the InspectorAdvancedControls component:

import { BlockControls,  InspectorAdvancedControls } from '@wordpress/block-editor';

And then you just drop children in there:

<InspectorAdvancedControls>
							<ClassPicker
								onChange={ onChange }
								className={ className }
								autofocus={ false }
								blurInputOnSelect={ false }
							/>
							<Button variant="link" onClick={ () => isSiteEditor ? openGeneralSidebarSiteEditor( ${ slug }/settings ) : openGeneralSidebar( ${ slug }/settings ) }>{ __( 'Edit default settings', 'draft' ) }</Button>
						</InspectorAdvancedControls>

I’m sharing code snippets to try and help you find what you’re looking for. It’s not resistance so much as the plugin is free, there aren’t many new users using the plugin, few free plugin customers convert to paid plugin customers, and I’m a one person operation. 🥴

Hopefully this gives you the information you need.

Hi @nico23!

Thanks for reaching out, as far as I know since the switch to Gutenberg including the uncompiled source code isn’t required.

I don’t have much in the index.js file as I’m mostly autoloading a bunch of things. here’s the index.js source code:

/**
 * External Dependencies
 */

/**
 * WordPress Dependencies
//  */
import { registerBlockType } from '@wordpress/blocks';
import { registerFormatType } from '@wordpress/rich-text';
import { registerPlugin } from '@wordpress/plugins';
import { select, register, useSelect } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';

/**
 * Internal Dependencies
 */
import './style.scss';
import './index.scss';

import * as darkModeToggle from './blocks/dark-mode-toggle';

const blocks = [
	darkModeToggle,
];

blocks.forEach( ( { name, settings } ) => { registerBlockType( name, settings ); } );

import * as addUtilityClassesToBlocks from './filters/add-utility-classes-to-blocks';
import * as addDarkModeClassToEditor from './filters/add-dark-mode-class-to-editor';
import * as groupLink from './filters/group-link';
import * as queryTitleFilter from './filters/query-title-filter';

const filters = [
	addUtilityClassesToBlocks,
	addDarkModeClassToEditor,
	groupLink,
	queryTitleFilter,
];

filters.forEach( ( { name, filters } ) => {
	filters.forEach(
			( { hookName, namespace, callback } ) => { addFilter( hookName, namespace, callback ); }
		);
}	);

import * as inlineClasses from './formats/inline-classes';
registerFormatType( inlineClasses.name, inlineClasses.settings );

import * as pluginSettings from './plugins/plugin-settings';

const plugins = [
	pluginSettings,
];

plugins.forEach( ( { name, settings } ) => { registerPlugin( name, settings ); } );

import * as pluginSettingsStore from './stores/plugin-settings';
register( pluginSettingsStore.store );

• This reply was modified 6 months, 1 week ago by leeshadle.
• This reply was modified 6 months, 1 week ago by leeshadle.

Hi @rishiichaudharyy!

Thank you for letting me know! 🙏

This was a bug and has been fixed. I just released a new version with the fix 3.0.9.

Thank you for posting this @d3xt3r_adam5, I’m glad to hear updating to the latest version of WP fixes the issue!

The paid plugin doesn’t use the CDN code on the frontend, it only loads the compiled Tailwind. I don’t understand how people get the premium features by pasting that code into their site?

Also, they’d probably want a config file too, which they’d have to drop in as well. Easily adding a config file is also a feature of the free plugin.

People may also want to use the @apply Tailwind function so they can add custom CSS that uses Tailwind classes. You’d need to drop that in as well. This is also functionality included in the free plugin.

If it was as easy to drop Tailwind in as you say, why would 1000+ people even bother using my plugin?

Again, I feel that your review is unfair and inaccurate. Could you please change your rating or remove it?

Hi @jaroslawjakowenko!

Thank you for letting me know about this error 🙏

I fixed this bug and you should now be able to save the settings. Please let me know if you are still running into issues.

Thank you again!!

Lee

Thank you @francismacomber for letting me know! 🙏 I just released a plugin update to fix this bug. Please let me know if you run into any more issues.

Hi @damienlopvet!

You should be able to use any Tailwind utility classes. However, the default configuration shipped with the plugin limits the colors to only a handful to keep the utility class selector snappy.

Could you share your configuration with me? I’m guessing that’s why you’re not seeing it. If you remove the colors key in the configuration file you can access all the default Tailwind colors, such as bg-red-400:

var tailwind = !!tailwind ? tailwind : window.tailwind;

tailwind.config = {
    important: true,
    theme: {
        /* max-width responsive breakpoints */
        screens: {
            md: {
                'max': '1023px'
            },
            sm: {
                'max': '767px'
            },
        },
        colors: {
            primary: tailwind.colors.slate['900'],
            secondary: tailwind.colors.white,
            text: 'var(--color-text)',
            accent: tailwind.colors.sky['500'],
            neutral: tailwind.colors.slate,
            transparent: tailwind.colors.transparent,
            current: tailwind.colors.current,
        },
        extend: {
            boxShadow: {
                inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)',
            },
            fontFamily: {
                primary: tailwind.defaultConfig.theme.fontFamily.sans,
                secondary: tailwind.defaultConfig.theme.fontFamily.sans,
                text: tailwind.defaultConfig.theme.fontFamily.sans,
                accent: tailwind.defaultConfig.theme.fontFamily.sans,
            },
            listStyleType: {
                circle: 'circle',
                square: 'square',
            },
        },
    },
    corePlugins: {
        preflight: false,
    },
}