block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    __experimentalAlignmentMatrixControl as AlignmentMatrixControl, // Komponenti getirdik.
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    console.log(attributes.alignment) // Yaptığımız ayara göre değerini test etmek için
    
    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <label>{ __( 'Yatay/Dikey hizalama', 'sc-cards' ) }</label>
                    <PanelRow>
                        <AlignmentMatrixControl
                            value={ attributes.alignment }
                            onChange={ ( value ) => setAttributes({ alignment: value }) }
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Şimdi gelin, bu değişkeni, editör tarafında, bloğumuzun parent elemanı için bir CSS class değeri (className) olarak kullanalım:

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {
	return (
		<>
			{block_settings(attributes, setAttributes)}
			<p { ...useBlockProps({
					className: attributes.alignment
				}) }
			>
				{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
			</p>
		</>
	);
}

• Aynı değişkeni, tema görünümünde de bir CSS class değeri olarak kullanabiliriz.
  • Ben bloğu bir div içerisine aldım ve bu div için de attributes.alignment değerini class olarak kullandım.
  • Farklı bir kullanımı göstermek için, aynı değeri, bu div içindeki p elemanına da class olarak atadım. Tabi aynı CSS classını hem parent hem de child elemanlarında kullanmak pek kullanışlı değil. Siz birini tercih edebilirsiniz.

save.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
	return (
		<div { ...useBlockProps.save({
			className: attributes.alignment
		}) }>
			<p className={attributes.alignment}>
				{ __(
					'Sc Cards – hello from the saved content!',
					'sc-cards'
				) }
			</p>
		</div>
	);
}

• Bu bileşen kendi <label></label> elemanını kendisi oluşturuyor.
• Bu yüzden AlignmentMatrixControl bileşenden hemen önce oluşturduğumuz <label></label> elemanını oluşturmadık.

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    __experimentalAlignmentMatrixControl as AlignmentMatrixControl,
    AnglePickerControl, // Komponenti getirdik.
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    console.log(attributes.angle) // Yaptığımız ayara göre değerini test etmek için
    
    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <label>{ __( 'Yatay/Dikey hizalama', 'sc-cards' ) }</label>
                    <PanelRow>
                        <AlignmentMatrixControl
                            id="diledigimiz-bir-id-degeri"
                            label={ __( 'Yatay/Dikey hizalama', 'sc-cards' ) }
                            value={ attributes.alignment }
                            onChange={ ( value ) => setAttributes({ alignment: value }) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <AnglePickerControl
                            value={ attributes.angle }
                            onChange={ ( value ) => setAttributes({ angle: value }) }
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Bloğun editör görünümünde kullanımına bir örnek:

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {

    const textStyle = {
        transform: `rotate(${attributes.angle}deg)`
    }

	return (
		<>
			{block_settings(attributes, setAttributes)}
			<div { ...useBlockProps({
					className: attributes.alignment
				}) }
			>
				<p style={textStyle}>
					{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
				</p>
			</div>
		</>
	);
}

• Bloğun tema görünümünde kullanmak için de save.js dosyasında şöyle bir değişiklik yapabiliriz:

save.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {

	const textStyle = {
        transform: `rotate(${attributes.angle}deg)`
    }

	return (
		<div { ...useBlockProps.save({
			className: attributes.alignment
		}) }>
			<p	style={textStyle}>
				{ __(
					'Sc Cards – hello from the saved content!',
					'sc-cards'
				) }
			</p>
		</div>
	);
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    BaseControl 
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {
    
    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <BaseControl
                            id="textarea-1"
                            label={__('Text girin', 'sc-cards')}
                            help={__('Burası şu işe yarar.', 'sc-cards')}
                            __nextHasNoMarginBottom={ true }
                        >
                            <textarea id="textarea-1" />
                        </BaseControl>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Bloğun editör görünümünde kullanımına bir örnek:

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {

    const textStyle = {
        transform: `rotate(${attributes.angle}deg)`
    }

	return (
		<>
			{block_settings(attributes, setAttributes)}
			<div { ...useBlockProps({
					className: attributes.alignment
				}) }
			>
				<p style={textStyle}>
					{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
				</p>
			</div>
		</>
	);
}

• Bloğun tema görünümünde kullanmak için de save.js dosyasında şöyle bir değişiklik yapabiliriz:

save.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {

	const textStyle = {
        transform: `rotate(${attributes.angle}deg)`
    }

	return (
		<div { ...useBlockProps.save({
			className: attributes.alignment
		}) }>
			<p	style={textStyle}>
				{ __(
					'Sc Cards – hello from the saved content!',
					'sc-cards'
				) }
			</p>
		</div>
	);
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    __experimentalBoxControl as BoxControl
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {
    
    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <BoxControl
                            values={{
                                top: attributes.containerPadding.top,
                                left: attributes.containerPadding.left,
                                right: attributes.containerPadding.right,
                                bottom: attributes.containerPadding.bottom,
                            }}
                            onChange={(value) => setAttributes({ containerPadding: value })}
                            label={__('Blok container elemanının padding değerleri:', 'sc-cards')}
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Şimdi gelin, bu değişkeni, editör tarafında, bloğumuzun <p></p> elemanında padding değerleri vermek için kullanalım:

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {


    const textStyle = {
	paddingLeft: attributes.containerPadding.left,
	paddingRight: attributes.containerPadding.right,
	paddingTop: attributes.containerPadding.top,
	paddingBottom: attributes.containerPadding.bottom
    }

	return (
		<>
			{block_settings(attributes, setAttributes)}
			<div { ...useBlockProps({
					className: attributes.alignment
				}) }
			>
				<p style={textStyle}>
					{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
				</p>
			</div>
		</>
	);
}

• Aynı mantıkla, yaptığımız ayarı, tema görünümü için bloğumuzun save.js dosyasında kullanabiliriz.

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    __experimentalBoxControl as BoxControl
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    const units = [
        { value: 'px', label: 'px', default: 0 },
        { value: '%', label: '%', default: 10 },
        { value: 'em', label: 'em', default: 0 },
    ]

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <BoxControl
                            units={units}
                            label={ __( 'Padding', 'sc-cards' ) }
                            values={ attributes.containerPadding }
                            onChange={(value) => setAttributes({ containerPadding: value })}
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

import { block_settings } from './inc/block-settings';

export default function Edit({ attributes, setAttributes }) {


    const textStyle = {
        padding: `${attributes.containerPadding.top} ${attributes.containerPadding.right} ${attributes.containerPadding.bottom} ${attributes.containerPadding.left}`
    }

	return (
		<>
			{block_settings(attributes, setAttributes)}
			<div { ...useBlockProps({
					className: attributes.alignment
				}) }
			>
				<p style={textStyle}>
					{ __( 'Sc Cards – hello from the editor!', 'sc-cards' ) }
				</p>
			</div>
		</>
	);
}

save.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {

	const textStyle = {
        padding: `${attributes.containerPadding.top} ${attributes.containerPadding.right} ${attributes.containerPadding.bottom} ${attributes.containerPadding.left}`
    }

	return (
		<div { ...useBlockProps.save({
			className: attributes.alignment
		}) }>
			<p	style={textStyle}>
				{ __(
					'Sc Cards – hello from the saved content!',
					'sc-cards'
				) }
			</p>
		</div>
	);
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    Button
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {


    const clickFunction = () => {
        setAttributes({ayar: "değeri"})
    }

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <Button
                            disabled={false}
                            variant="secondary"
                            onClick={() => clickFunction()}
                        > { __( 'Kaydet', 'sc-cards' ) }
                        </Button>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    Button,
    ButtonGroup
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <ButtonGroup>
                            <Button variant="secondary">{__('%100', 'sc-cards')}</Button>
                            <Button variant="secondary">{__('%75', 'sc-cards')}</Button>
                            <Button variant="secondary">{__('%50', 'sc-cards')}</Button>
                            <Button variant="secondary">{__('%25', 'sc-cards')}</Button>
                        </ButtonGroup>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    Card,
    CardBody,
    CardDivider,
    CardFooter,
    CardHeader,
    CardMedia,
    PanelBody,
    PanelRow,
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    const units = [
        { value: 'px', label: 'px', default: 0 },
        { value: '%', label: '%', default: 10 },
        { value: 'em', label: 'em', default: 0 },
    ]

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <Card
                            elevation="10"
                        >
                            <CardHeader>Kart Başlığı</CardHeader>
                            <CardBody>Kart gövdesi gövdesi kart gövdesi</CardBody>
                            <CardDivider />
                            <CardBody>Kart gövdesi gövdesi kart gövdesi</CardBody>
                            <CardMedia>
                                <img src="https://www.fillmurray.com/640/360" />
                            </CardMedia>
                            <CardFooter>Kart footer kısmı</CardFooter>
                        </Card>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    CheckboxControl
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <CheckboxControl
                            label={__('Fiyatı göster', 'sc-cards')}
                            help={__('Burayı işaretlersen ürün fiyatları görünecek', 'sc-cards')}
                            checked={ attributes.showPrices }
                            onChange={(value) => setAttributes({ showPrices: value })}
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    ColorIndicator
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        {__('Kullanılan renk: ', 'sc-cards')}
                        <ColorIndicator colorValue="yellow" />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    ColorPalette
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

const colors = [
    { name: 'red', color: '#f00' },
    { name: 'white', color: '#fff' },
    { name: 'blue', color: '#00f' },
    { name: 'grey', color: '#ddd' },
    { name: 'yellow', color: 'yellow' },
    { name: 'brown', color: 'brown' },
    { name: 'orange', color: 'orange' },
    { name: 'renk 2', color: 'rgb(100,100,100)' },
];

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <ColorPalette
                            colors={ colors }
                            value={ attributes.selectedColor }
                            onChange={ ( color ) => setAttributes( {selectedColor: color} ) }
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    ComboboxControl
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    const options = [
        {
            value: 'xsmall',
            label: 'xSmall',
        },
        {
            value: 'small',
            label: 'Small',
        },
        {
            value: 'normal',
            label: 'Normal',
        },
        {
            value: 'medium',
            label: 'Medium',
        },
        {
            value: 'large',
            label: 'Large',
        },
        {
            value: 'xlarge',
            label: 'xLarge',
        },
        {
            value: 'huge',
            label: 'Huge',
        },
    ];

    const setFilteredOptions = (options, inputValue) => {
        options.filter( ( option ) =>
            option.label
                .toLowerCase()
                .startsWith( inputValue.toLowerCase() )
        )
    }

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <ComboboxControl
                            label={__('Font Size', 'sc-cards')}
                            value={ attributes.fontSize }
                            onChange={ (value) => setAttributes({fontSize: value}) }
                            options={ options }
                            onFilterValueChange={(inputValue) => setFilteredOptions(options, inputValue)}
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    Dashicon
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <Dashicon icon="admin-home" />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    DateTimePicker
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    const date = new Date();

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <DateTimePicker
                            currentDate={ attributes.date ? attributes.date : date }
                            onChange={ ( newDate ) => setAttributes( {date: newDate} ) }
                            is12Hour={ false }
                            __nextRemoveHelpButton
                            __nextRemoveResetButton
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Yaptığınız resmin url değerini;
  • Edit({ attributes, setAttributes }) veya
  • save({attributes}) fonksiyonları içerisinde iken şu şekilde çağırırız:

attributes.date

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls
} from '@wordpress/block-editor';

import {
    PanelBody,
    PanelRow,
    Disabled,
    Button,
    TextControl
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <Disabled isDisabled={attributes.disabled}>
                            <TextControl
                                label={__('Adınızı girin:', 'sc-cards')}
                                onChange={ () => {} }
                                placeholder={__('Adım SOYADIM', 'sc-cards')}
                                style={ { opacity: attributes.disabled ? 0.5 : 1 } }
                            />
                        </Disabled>
                    </PanelRow>
                    <PanelRow>
                        <Button
                            variant="secondary" 
                            onClick={ () => setAttributes({disabled: !attributes.disabled}) }
                            isDestructive={true}
                        >
                        {__('Değer girişini kapat', 'sc-cards')}
                        </Button>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

• Yaptığınız resmin url değerini;
  • Edit({ attributes, setAttributes }) veya
  • save({attributes}) fonksiyonları içerisinde iken şu şekilde çağırırız:

attributes.disabled

block-settings.js

import { __ } from '@wordpress/i18n';

import {
    InspectorControls,
    MediaUpload,
    MediaUploadCheck
} from '@wordpress/block-editor';

import {
    PanelBody,
    Button
} from '@wordpress/components';

export function block_settings(attributes, setAttributes) {

    const removeMedia = () => {
        setAttributes({
            mediaId: 0,
            mediaUrl: ''
        });
    }
    const onSelectMedia = (media) => {
        setAttributes({
            mediaId: media.id,
            mediaUrl: media.url
        });
    }

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={__('Genel Ayarlar', 'sc-cards')}
                    initialOpen={true}
                >
                    <div className="sc-editor-post-featured-image">
                        <MediaUploadCheck>
                            <MediaUpload
                                onSelect={onSelectMedia}
                                value={attributes.mediaId}
                                allowedTypes={['image']}
                                render={({ open }) => (
                                    <Button
                                    className={attributes.mediaId == 0 ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
                                    onClick={open}
                                    >
                                        {attributes.mediaId == 0 && __('Resim seç', 'sc-cards')}
                                        {attributes.mediaId != 0 &&
                                            <fieldset className='stcnnt-img-preview'>
                                                <img src={attributes.mediaUrl} />
                                            </fieldset>
                                        }
                                    </Button>
                                )}
                            />
                        </MediaUploadCheck>
                        {attributes.mediaId != 0 &&
                            <MediaUploadCheck>
                                <MediaUpload
                                    title={__('Değiştir', 'sc-cards')}
                                    value={attributes.mediaId}
                                    onSelect={onSelectMedia}
                                    allowedTypes={['image']}
                                    render={({ open }) => (
                                        <Button className="sc-change-img" variant="secondary" onClick={open}>{__('Resmi değiştir', 'sc-cards')}</Button>
                                    )}
                                />
                            </MediaUploadCheck>
                        }
                        {attributes.mediaId != 0 &&
                            <MediaUploadCheck>
                                <Button
                                    variant="secondary"
                                    isDestructive={true}
                                    onClick={removeMedia}>{__('Kaldır', 'sc-cards')}</Button>
                            </MediaUploadCheck>
                        }

                    </div>
                </PanelBody>
            </InspectorControls>
        </>
    )
}

editor.scss

.sc-editor-post-featured-image
{
	width: 100%;
	text-align: center;
	.editor-post-featured-image__toggle, .editor-post-featured-image__preview img
	{
		border: 3px solid #ddd;
		padding: 5px;
		margin: 0 auto;
	}
	.stcnnt-img-preview
	{
		display: flex;
		justify-content: center;
        align-items: center;
		height: 150px;
		overflow: hidden;
		img {
			object-fit: cover;
			height: 150px;
		};
		margin-bottom: 5px;
	}
	.sc-change-img{
		margin-right: 5px;
	}
}

• Yaptığınız resmin url değerini;
  • Edit({ attributes, setAttributes }) veya
  • save({attributes}) fonksiyonları içerisinde iken şu şekilde çağırırız:

<img src={attributes.mediaUrl} />