Skip to content

Commit

Permalink
Refactor typography controls
Browse files Browse the repository at this point in the history
  • Loading branch information
Lalo Sanchez committed Mar 6, 2024
1 parent c4f531b commit a815592
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 50 deletions.
2 changes: 1 addition & 1 deletion includes/advanced-form/advanced-form-submit-actions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ public function do_field_replacements( $text ) {
$refer_id = is_object( $post ) ? $post->ID : url_to_postid( wp_get_referer() );
$text = str_replace( '{page_title}', get_the_title( $refer_id ), $text );
}

return $text;
}
/**
Expand Down
50 changes: 49 additions & 1 deletion includes/header/class-kadence-header-cpt.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,55 @@ public function filter_post_type_user_caps( $allcaps ) {
public function register_meta() {
register_post_meta(
'kadence_header',
'_kad_form_headerBorder',
'_kad_header_headerFont',
array(
'single' => true,
'auth_callback' => array( $this, 'meta_auth_callback' ),
'type' => 'object',
'default' => array(
'color' => '',
'size' => array( '', '', '' ),
'sizeType' => 'px',
'lineHeight' => array( '', '', '' ),
'lineType' => '',
'letterSpacing' => array( '', '', '' ),
'letterType' => 'px',
'textTransform' => '',
'family' => '',
'google' => false,
'style' => '',
'weight' => '',
'variant' => '',
'subset' => '',
'loadGoogle' => true,
),
'show_in_rest' => array(
'schema' => array(
'type' => 'object',
'properties' => array(
'color' => array( 'type' => 'string' ),
'size' => array( 'type' => 'array' ),
'sizeType' => array( 'type' => 'string' ),
'lineHeight' => array( 'type' => 'array' ),
'lineType' => array( 'type' => 'string' ),
'letterSpacing' => array( 'type' => 'array' ),
'letterType' => array( 'type' => 'string' ),
'textTransform' => array( 'type' => 'string' ),
'family' => array( 'type' => 'string' ),
'google' => array( 'type' => 'boolean' ),
'style' => array( 'type' => 'string' ),
'weight' => array( 'type' => 'string' ),
'variant' => array( 'type' => 'string' ),
'subset' => array( 'type' => 'string' ),
'loadGoogle' => array( 'type' => 'boolean' ),
),
),
),
)
);
register_post_meta(
'kadence_header',
'_kad_header_headerBorder',
array(
'single' => true,
'auth_callback' => array( $this, 'meta_auth_callback' ),
Expand Down
107 changes: 61 additions & 46 deletions src/blocks/header/edit-inner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import {
} from '@wordpress/block-editor';
import { TextControl, ToggleControl, ToolbarGroup, ExternalLink, Button, Placeholder } from '@wordpress/components';

import { FormTitle, SelectForm } from './components';
import { FormTitle, SelectForm, FieldBlockAppender } from './components';

/**
* Internal dependencies
Expand Down Expand Up @@ -98,20 +98,9 @@ export function EditInner(props) {
const [borderRadiusUnit] = useHeaderMeta('_kad_header_borderRadiusUnit');

// Typography options
const [fontSize] = useHeaderMeta('_kad_header_fontSize');
const [fontSizeType] = useHeaderMeta('_kad_header_fontSizeType');
const [lineHeight] = useHeaderMeta('_kad_header_lineHeight');
const [lineHeightType] = useHeaderMeta('_kad_header_lineHeightType');
const [letterSpacing] = useHeaderMeta('_kad_header_letterSpacing');
const [letterSpacingType] = useHeaderMeta('_kad_header_letterSpacingType');
const [textTransform] = useHeaderMeta('_kad_header_textTransform');
const [fontFamily] = useHeaderMeta('_kad_header_fontFamily');
const [googleFont] = useHeaderMeta('_kad_header_googleFont');
const [loadGoogle] = useHeaderMeta('_kad_header_loadGoogle');
const [fontVariant] = useHeaderMeta('_kad_header_fontVariant');
const [fontWeight] = useHeaderMeta('_kad_header_fontWeight');
const [fontStyle] = useHeaderMeta('_kad_header_fontStyle');
const [fontSubset] = useHeaderMeta('_kad_header_fontSubset');

const [headerFont] = useHeaderMeta('_kad_header_headerFont');
console.log(headerFont);

//Background Options
const [bgColor] = useHeaderMeta('_kad_header_bgColor');
Expand Down Expand Up @@ -473,6 +462,7 @@ export function EditInner(props) {
</>
)}
</style>

<InspectorControls>
<InspectorControlTabs
panelName={'advanced-header'}
Expand Down Expand Up @@ -566,39 +556,64 @@ export function EditInner(props) {
>
<TypographyControls
fontGroup={'header'}
fontSize={fontSize}
onFontSize={(value) => setMetaAttribute(value, 'fontSize')}
fontSizeType={fontSizeType}
onFontSizeType={(value) => setMetaAttribute(value, 'fontSizeType')}
lineHeight={lineHeight}
onLineHeight={(value) => setMetaAttribute(value, 'lineHeight')}
lineHeightType={lineHeightType}
onLineHeightType={(value) => setMetaAttribute(value, 'lineHeightType')}
reLetterSpacing={letterSpacing}
onLetterSpacing={(value) => setMetaAttribute(value, 'letterSpacing')}
letterSpacingType={letterSpacingType}
onLetterSpacingType={(value) => setMetaAttribute(value, 'letterSpacingType')}
textTransform={textTransform}
onTextTransform={(value) => setMetaAttribute(value, 'textTransform')}
fontFamily={fontFamily}
onFontFamily={(value) => setMetaAttribute(value, 'fontFamily')}
fontSize={headerFont.size}
onFontSize={(value) => setMetaAttribute({ ...headerFont, size: value }, 'headerFont')}
fontSizeType={headerFont.sizeType}
onFontSizeType={(value) =>
setMetaAttribute({ ...headerFont, sizeType: value }, 'headerFont')
}
lineHeight={headerFont.lineHeight}
onLineHeight={(value) =>
setMetaAttribute({ ...headerFont, lineHeight: value }, 'headerFont')
}
lineHeightType={headerFont.lineType}
onLineHeightType={(value) =>
setMetaAttribute({ ...headerFont, lineType: value }, 'headerFont')
}
reLetterSpacing={headerFont.letterSpacing}
onLetterSpacing={(value) =>
setMetaAttribute({ ...headerFont, letterSpacing: value }, 'headerFont')
}
letterSpacingType={headerFont.letterType}
onLetterSpacingType={(value) =>
setMetaAttribute({ ...headerFont, letterType: value }, 'headerFont')
}
textTransform={headerFont.textTransform}
onTextTransform={(value) =>
setMetaAttribute({ ...headerFont, textTransform: value }, 'headerFont')
}
fontFamily={headerFont.family}
onFontFamily={(value) =>
setMetaAttribute({ ...headerFont, family: value }, 'headerFont')
}
onFontChange={(select) => {
setMetaAttribute(select.value, 'fontFamily');
setMetaAttribute(select.google, 'googleFont');
setMetaAttribute({ ...headerFont, ...select }, 'headerFont');
}}
onFontArrayChange={(values) => setMetaAttribute(values)}
//googleFont={googleFont}
//onGoogleFont={(value) => setMetaAttribute(value, 'googleFont')}
//loadGoogleFont={loadGoogle}
//onLoadGoogleFont={(value) => setMetaAttribute(value, 'loadGoogle')}
fontVariant={fontVariant}
onFontVariant={(value) => setMetaAttribute(value, 'fontVariant')}
fontWeight={fontWeight}
onFontWeight={(value) => setMetaAttribute(value, 'fontWeight')}
fontStyle={fontStyle}
onFontStyle={(value) => setMetaAttribute(value, 'fontStyle')}
fontSubset={fontSubset}
onFontSubset={(value) => setMetaAttribute(value, 'fontSubset')}
onFontArrayChange={(values) =>
setMetaAttribute({ ...headerFont, ...values }, 'headerFont')
}
googleFont={headerFont.google}
onGoogleFont={(value) =>
setMetaAttribute({ ...headerFont, google: value }, 'headerFont')
}
loadGoogleFont={headerFont.loadGoogle}
onLoadGoogleFont={(value) =>
setMetaAttribute({ ...headerFont, loadGoogle: value }, 'headerFont')
}
fontVariant={headerFont.variant}
onFontVariant={(value) =>
setMetaAttribute({ ...headerFont, variant: value }, 'headerFont')
}
fontWeight={headerFont.weight}
onFontWeight={(value) =>
setMetaAttribute({ ...headerFont, weight: value }, 'headerFont')
}
fontStyle={headerFont.style}
onFontStyle={(value) => setMetaAttribute({ ...headerFont, style: value }, 'headerFont')}
fontSubset={headerFont.subset}
onFontSubset={(value) =>
setMetaAttribute({ ...headerFont, subset: value }, 'headerFont')
}
/>
</KadencePanelBody>
<KadencePanelBody
Expand Down
4 changes: 2 additions & 2 deletions src/packages/components/src/border/responsive-border-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,11 @@ export default function ResponsiveBorderControl( {
}

//if the mobile or tablet units are the same as desktop, unset them so they now inherit / follow desktop.
if ( undefined !== value?.[0]?.unit && mobileValue && isEqual( value?.[0]?.unit, mobileValue?.[0]?.unit ) ) {
if ( mobileValue && isEqual( value?.[0]?.unit, mobileValue?.[0]?.unit ) ) {
mobileValue[0].unit = '';
onChangeMobile( mobileValue );
}
if ( undefined !== value?.[0]?.unit && tabletValue && isEqual( value?.[0]?.unit, tabletValue?.[0]?.unit ) ) {
if ( tabletValue && isEqual( value?.[0]?.unit, tabletValue?.[0]?.unit ) ) {
tabletValue[0].unit = '';
onChangeTablet( tabletValue );
}
Expand Down

0 comments on commit a815592

Please sign in to comment.