render.php
141 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Render About [Author Pro] Block |
| 4 | */ |
| 5 | |
| 6 | $block_id = isset($attributes['blockId']) ? $attributes['blockId'] : ''; |
| 7 | if (empty($block_id)) { |
| 8 | $block_id = 'author-pro-about-' . uniqid(); |
| 9 | } |
| 10 | $anchor = isset($attributes['anchor']) ? $attributes['anchor'] : ''; |
| 11 | // Use Anchor if set, otherwise fallback to Block ID |
| 12 | $element_id = !empty($anchor) ? $anchor : $block_id; |
| 13 | |
| 14 | $badge_text = isset($attributes['badgeText']) ? $attributes['badgeText'] : 'The Author'; |
| 15 | $title = isset($attributes['title']) ? $attributes['title'] : "Crafting Stories That Matter"; |
| 16 | $description = isset($attributes['description']) ? $attributes['description'] : ''; |
| 17 | $author_image_url = isset($attributes['authorImageUrl']) ? $attributes['authorImageUrl'] : ''; |
| 18 | $author_image_alt = isset($attributes['authorImageAlt']) ? $attributes['authorImageAlt'] : 'Author'; |
| 19 | $features = isset($attributes['features']) ? $attributes['features'] : []; |
| 20 | $btn_text = isset($attributes['btnText']) ? $attributes['btnText'] : 'Read Full Bio'; |
| 21 | $btn_url = isset($attributes['btnUrl']) ? $attributes['btnUrl'] : '#'; |
| 22 | $padding_top = isset($attributes['paddingTop']) ? $attributes['paddingTop'] : 128; |
| 23 | $padding_bottom = isset($attributes['paddingBottom']) ? $attributes['paddingBottom'] : 128; |
| 24 | $bg_color = isset($attributes['bgColor']) ? $attributes['bgColor'] : ''; |
| 25 | |
| 26 | // Styling Attributes |
| 27 | $accent_color = isset($attributes['accentColor']) ? $attributes['accentColor'] : ''; |
| 28 | $btn_bg_color = isset($attributes['btnBgColor']) ? $attributes['btnBgColor'] : ''; |
| 29 | $btn_text_color = isset($attributes['btnTextColor']) ? $attributes['btnTextColor'] : ''; |
| 30 | $btn_border_color = isset($attributes['btnBorderColor']) ? $attributes['btnBorderColor'] : ''; |
| 31 | $btn_hover_bg_color = isset($attributes['btnHoverBgColor']) ? $attributes['btnHoverBgColor'] : ''; |
| 32 | $btn_hover_text_color = isset($attributes['btnHoverTextColor']) ? $attributes['btnHoverTextColor'] : ''; |
| 33 | $btn_hover_border_color = isset($attributes['btnHoverBorderColor']) ? $attributes['btnHoverBorderColor'] : ''; |
| 34 | |
| 35 | // Generate Dynamic CSS |
| 36 | $custom_css = ""; |
| 37 | |
| 38 | if ($accent_color) { |
| 39 | $custom_css .= "#{$element_id} .awt-accent, #{$element_id} .awt-accent svg { color: {$accent_color} !important; }"; |
| 40 | $custom_css .= "#{$element_id} .awt-border-accent { border-color: {$accent_color} !important; }"; |
| 41 | } |
| 42 | |
| 43 | if ($btn_bg_color || $btn_text_color || $btn_border_color) { |
| 44 | $custom_css .= "#{$element_id} .awt-btn {"; |
| 45 | if ($btn_bg_color) $custom_css .= " background-color: {$btn_bg_color};"; |
| 46 | if ($btn_text_color) $custom_css .= " color: {$btn_text_color};"; |
| 47 | if ($btn_border_color) $custom_css .= " border-color: {$btn_border_color};"; |
| 48 | $custom_css .= " }"; |
| 49 | } |
| 50 | |
| 51 | if ($btn_hover_bg_color || $btn_hover_text_color || $btn_hover_border_color) { |
| 52 | $custom_css .= "#{$element_id} .awt-btn:hover {"; |
| 53 | if ($btn_hover_bg_color) $custom_css .= " background-color: {$btn_hover_bg_color};"; |
| 54 | if ($btn_hover_text_color) $custom_css .= " color: {$btn_hover_text_color};"; |
| 55 | if ($btn_hover_border_color) $custom_css .= " border-color: {$btn_hover_border_color};"; |
| 56 | $custom_css .= " }"; |
| 57 | } |
| 58 | |
| 59 | // CSS Variables for padding and background |
| 60 | $style = "padding-top: {$padding_top}px; padding-bottom: {$padding_bottom}px;"; |
| 61 | if ($bg_color) { |
| 62 | $style .= " background-color: {$bg_color};"; |
| 63 | } |
| 64 | |
| 65 | $wrapper_attributes = get_block_wrapper_attributes([ |
| 66 | 'class' => 'awt-author-pro-about bg-white', |
| 67 | 'style' => $style, |
| 68 | 'id' => $element_id // Ensure HTML ID matches CSS selector |
| 69 | ]); |
| 70 | |
| 71 | // Determine Button Classes Conditionally |
| 72 | $btn_classes = "awt-btn inline-block px-8 py-3 border font-bold rounded transition"; |
| 73 | if (empty($btn_text_color)) { |
| 74 | $btn_classes .= " text-primary"; |
| 75 | } |
| 76 | if (empty($btn_border_color)) { |
| 77 | $btn_classes .= " border-primary"; |
| 78 | } |
| 79 | // Default hover classes only if custom hovers are not set |
| 80 | if (empty($btn_hover_bg_color)) { |
| 81 | $btn_classes .= " hover:bg-primary"; |
| 82 | } |
| 83 | if (empty($btn_hover_text_color)) { |
| 84 | $btn_classes .= " hover:text-white"; |
| 85 | } |
| 86 | ?> |
| 87 | |
| 88 | <?php if (!empty($custom_css)) : ?> |
| 89 | <style><?php echo $custom_css; ?></style> |
| 90 | <?php endif; ?> |
| 91 | |
| 92 | <section <?php echo $wrapper_attributes; ?>> |
| 93 | <div class="awt-container mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> |
| 94 | <!-- Left Column: Image --> |
| 95 | <div class="relative" data-aos="fade-right"> |
| 96 | <div class="awt-border-accent absolute top-0 left-0 w-full h-full border-2 border-accent/20 rounded-2xl -z-10"></div> |
| 97 | <?php if ($author_image_url) : ?> |
| 98 | <img |
| 99 | src="<?php echo esc_url($author_image_url); ?>" |
| 100 | alt="<?php echo esc_attr($author_image_alt); ?>" |
| 101 | class="rounded-xl shadow-xl w-full h-[500px] object-cover grayscale hover:grayscale-0 transition duration-500" |
| 102 | > |
| 103 | <?php else : ?> |
| 104 | <div class="rounded-xl shadow-xl w-full h-[500px] bg-gray-200 flex items-center justify-center text-gray-400"> |
| 105 | <span><?php esc_html_e('Upload Image', 'author-website-templates'); ?></span> |
| 106 | </div> |
| 107 | <?php endif; ?> |
| 108 | </div> |
| 109 | |
| 110 | <!-- Right Column: Content --> |
| 111 | <div data-aos="fade-left"> |
| 112 | <span class="awt-accent text-accent font-bold text-xs uppercase tracking-widest mb-2 block"><?php echo esc_html($badge_text); ?></span> |
| 113 | <h2 class="text-4xl font-serif font-bold text-primary mb-6"> |
| 114 | <?php echo wp_kses_post($title); ?> |
| 115 | </h2> |
| 116 | <?php if ($description): ?> |
| 117 | <div class="text-secondary leading-relaxed mb-6"> |
| 118 | <?php echo wp_kses_post($description); ?> |
| 119 | </div> |
| 120 | <?php endif; ?> |
| 121 | |
| 122 | <?php if (!empty($features)) : ?> |
| 123 | <ul class="space-y-4 mb-8 ml-0"> |
| 124 | <?php foreach ($features as $feature) : ?> |
| 125 | <li class="flex items-center gap-3 text-primary font-medium"> |
| 126 | <span class="awt-accent"><svg class="w-6 h-6 text-accent" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg></span> <?php echo wp_kses_post($feature); ?> |
| 127 | </li> |
| 128 | <?php endforeach; ?> |
| 129 | </ul> |
| 130 | <?php endif; ?> |
| 131 | |
| 132 | <a |
| 133 | href="<?php echo esc_url($btn_url); ?>" |
| 134 | class="<?php echo esc_attr($btn_classes); ?>" |
| 135 | > |
| 136 | <?php echo esc_html($btn_text); ?> |
| 137 | </a> |
| 138 | |
| 139 | </div> |
| 140 | </div> |
| 141 | </section> |