Wenprise WordPress Components

A component library for WordPress Gutenberg editor, providing responsive layout and carousel settings components.

Installation

Using npm:

npm install wenprise-wp-components

Using pnpm:

pnpm add wenprise-wp-components

Components

DeviceSwitcher

A device switching component for toggling between desktop, tablet, and mobile device views.

import { DeviceSwitcher } from 'wenprise-wp-components';

const MyComponent = () => {
  const [device, setDevice] = useState('desktop');
  
  return (
    <DeviceSwitcher 
      selectedDevice={device} 
      onChange={(newDevice) => setDevice(newDevice)} 
    />
  );
};

LayoutSettings

Layout settings component for managing responsive grid layouts.

import { LayoutSettings } from 'wenprise-wp-components';

const MyBlockEdit = ({ attributes, setAttributes }) => {
  return (
    <InspectorControls>
      <LayoutSettings 
        attributes={attributes} 
        setAttributes={setAttributes} 
      />
    </InspectorControls>
  );
};

CarouselSettings

Carousel settings component for managing responsive carousel layouts.

import { CarouselSettings } from 'wenprise-wp-components';

const MyBlockEdit = ({ attributes, setAttributes }) => {
  return (
    <InspectorControls>
      <CarouselSettings 
        attributes={attributes} 
        setAttributes={setAttributes} 
      />
    </InspectorControls>
  );
};

Hooks

useResponsive

Responsive hook for managing device state and switching.

import { useResponsive } from 'wenprise-wp-components';

const MyComponent = () => {
  const { device, handleDeviceChange } = useResponsive();
  
  return (
    <>
      <DeviceSwitcher selectedDevice={device} onChange={handleDeviceChange} />
      {device === 'desktop' && <p>Desktop view content</p>}
      {device === 'tablet' && <p>Tablet view content</p>}
      {device === 'mobile' && <p>Mobile view content</p>}
    </>
  );
};

Internationalization

All components support internationalization using WordPress's __() function. You can localize strings by passing your text domain:

// Load text domain in your plugin
wp.i18n.setLocaleData({ 'Layout Settings': '布局设置' }, 'my-plugin');

License

MIT